In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Getting started designer

UI Kit is the official set for all digital projects. It contains all components, colours and styles to provide a consistent experience for our customers and collaborators.

How does it work?

Download the UI Kit. This sketch file is regularly updated. Each time you start a new project, make sure you are using the latest library version. To do so, compare the ZIP file version the one on this website.

 

Assets are only available for Sketch. It contains visual guidelines, colors, components and patterns for all the Airbus brands.

We want to give you the possibility to be part of the living product we are building, so be a contributor! :)

 

For more information, questions, suggestions or help, contact the Design System team using Slack or send an email at design-system@airbus.com

Ui Kit Download
How to use it?
1.

Once you have downloaded the Ui → Download the fonts

2.

Once you installed all dependencies, you can import the UI Kit as a Library. You will now have access to all symbols through all your Sketch files! We recommend you to move the UI Kit out of the Download folder before linking it as a library. Choose the location of your choice and remember it for future updates.

3.

Create a new document in Sketch

Basic components

Basic components

Also called atoms, they are available as Sketch Symbols. They are the smallest but also inseparable components in the UI Kit (text fields, icons, etc.). Drag & drop components from the Ui kit library into your file and change the sizes or internal parameters using overrides. You should not separate the Symbols.

Composed components

Composed components

Also called molecules, they are made up of combined symbols and other basic elements. To use them, drag & drop the component file. You can change the layout according to your needs and adapt it by adding customized symbols and elements.

Patterns

Patterns

Also called templates, they are a thematic, complex association of components (form cards, data table cards, chart cards, modals, etc.) They are ready-to-use, but you can customize them.

Colours

Colours

The colours are predefined, and refer to the corresponding main colour palette and UI palette of the brand you work for. More information is available in the colour section. To ensure using the correct Hex Codes, select them in the predefined colour styles.
How do I contribute?

How do I contribute?

Sometimes, no existing component matches your specific need. In the best-case scenario, you can modify an existing component by separating a Symbol and customizing it. Otherwise, you will have to create a new one from scratch. The only requirement for doing this is to respect the existing guidelines (colors rules, patterns, etc.) and behavior (states and styles). Don’t forget to consider the various states of your component (hover, clicked, empty, etc.). You are more than welcome to push your component to the design system team.
Back to top