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

Beta V1 Release

Airbus Design System was released almost a year ago. It is the official single source of truth for digital products and services for Airbus.

What's new?

Three months ago, we published the first alpha version of Airbus Design System. ✈️

We are very proud to announce the v1.0.0-Beta πŸ₯³

Β 

During one year and a half we built a product and a service with a full-time dedicated team. With this team model we were able to produce much faster using high quality standards. It gave us a global view around all different kinds of projects in Airbus to identify universal needs regarding the design of applications. It also gave us the opportunity to buildΒ  a vision of how the product and the service should be. It was the best way to start, no doubts.

Β 

Since the beginning of the crisis we saw an increase in the demand regarding the use of the Design System. Unfortunately, we are facing budget issues and we can’t continue our activity in the same way. We have to focus on projects that are securing cash in the short term. We are doing our part.

Β 

It doesn’t mean that it’s the end of the Design System, it’s the beginning of a new period for us, we will be distributed among projects that have enough resources to continue and we will use the platform we built.

Β 

We are turning a page, we are not closing the book. πŸ“•

Β 

Activities that will continue

While we'll have to delay the development of the new capabilities we planned for 2020 (DataViz, Motion Guidelines, theme & brand switcher, more components...), we will continue to:

  • We will continue to give the access to the platform
  • We will continue to monitor the use of the platforms (manually)
  • We will do our best to continue answering questions through emails
  • Bug Fixes and improvements (Design + Code) will continue at a slower rate
Release note
Design

Make sure to use the design guidelines on the documentation: brand.airbus.com/design-system

  • Data Table documentation: Page structure reshapedΒ 
  • Data Visualisation documentation: New page + Principles
  • Best practices section added to the documentation pages: Banner, Breadcrumb, Chat, Checkbox, Combo box, Date & time Picker, Empty state, Modal, Pagination, Progress bar, Radio button, Select

Β 

  • New components variants or items: Chip 32px variant, Radio button mobile, Checkbox mobile, Cover mobile, Header transparent mobile, Transferlist items, Overlay, Dropdown in Header, Accordion reverse, Group Button reverse, Range slider reverse, Date & time picker reverse, Combo Box reverse
  • Smart layout improved: Input, Combobox, Data Table, Banner, Footer
  • Naming: Header changed for Blue B2B, White B2E, Transparent B2C+ global harmonization
  • States: Input field + Combo box + Select Active and Focus states replaced by Active Focus, New disable state without transparency, Avatar hover state.
  • Layer styles: Naming improvements.
  • Text styles: Naming improvements.
  • Skywise UI kit available: Please note Skywise UI kit is not as advanced as Airbus’.
Development

We decided to publish this beta in accordance with the priorities gathered on several projects, and the accomplishment of the following steps.

  • New CSS architecture based on CSSinJS approach, with the long term vision that it could evolve to a framework agnostic component architecture.
  • Consistent CSS, React and Angular components, based on the same design tokens, and evolving in the same code base.
  • Storybook as a unified documentation system and development environment.
  • Retro compatibility for React v0.x components (@horizon/component-react.

Β 

You can see the updated list of available components down below ⬇️  

Components status
Component Brand Center UI kit CSS React Angular
Accordion βœ… βœ…
❌ ❌ ❌
Avatar βœ… βœ… ❌ ❌ ❌
Badge ❌ ❌ ❌ ❌ ❌
Banner βœ… βœ… βœ… βœ… ❌
Bottom sheet βœ… βœ… ❌ ❌ ❌
Breadcrumb βœ… βœ… ❌ ❌ ❌
Button βœ… βœ… βœ… βœ… βœ…
Card βœ… βœ… βœ… βœ… βœ…
Chat βœ… βœ… ❌ ❌ ❌
Checkbox βœ… βœ… βœ… βœ… βœ…
Chip βœ… βœ… βœ… βœ… βœ…
Combo box βœ… βœ… ❌ ❌ ❌
Container βœ… βœ… βœ… βœ… βœ…
Cover βœ… βœ… ❌ ❌ ❌
Data table* βœ… βœ… βœ… βœ… βœ…
Data visualisation βœ… βœ… ❌ ❌ ❌
Date & time picker βœ… βœ… ❌ ❌ ❌
Empty state βœ… βœ… ❌ ❌ ❌
Footer βœ… βœ… ❌ ❌ ❌
Header βœ… βœ… βœ… βœ… βœ…
Input field βœ… βœ… βœ… βœ… βœ…
Link βœ… βœ… βœ… βœ… βœ…
Loading βœ… βœ… βœ… βœ… βœ…
Media βœ… βœ… ❌ ❌ ❌
Modal βœ… βœ… βœ… βœ… ❌
Pagination βœ… βœ… βœ… βœ… ❌
Panel βœ… βœ… βœ… βœ… ❌
Popover βœ… βœ… βœ… βœ… ❌
Progress bar βœ… βœ… ❌ ❌ ❌
Radio button βœ… βœ… βœ… βœ… βœ…
Range slider βœ… βœ… ❌ ❌ ❌
Rating βœ… βœ… ❌ ❌ ❌
Select βœ… βœ… βœ… βœ… βœ…
Skeleton βœ… βœ… ❌ ❌ ❌
Stepper βœ… βœ… ❌ ❌ ❌
Tab βœ… βœ… βœ… βœ… βœ…
Textarea βœ… βœ… βœ… βœ… βœ…
Toggle βœ… βœ… βœ… βœ… βœ…
Tooltip βœ… βœ… βœ… βœ… βœ…
Transfer list ❌ βœ… ❌ ❌ ❌

*Function available according to current technology for the data table.

React: Sorting and pagination

Angular: Sorting

How to adopt it?
V1 Release Plan
Code & Design assets

Request code and design assets for creating user interfaces.

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top