Airbnb – System Design
Airbnb Design Language System
The since 2015, I’ve been working on designing and maintaining the Airbnb Design Language System.
The goal we set for the DLS was to create a more beautiful and accessible design language. We wanted our designs be unified to drive greater efficiency through well-defined, reusable and cross-platform components.
Components
Instead of relying on individual atoms (or atomic design), we started considering our components as elements of a living organism. They have a function and personality, are defined by a set of properties, can co-exists with others and can evolve (or die) independently. This is one the key points about the system compared to more atomic one – we don't have complicated network of interconnected parts and components.
Each component is defined by it’s required elements (such as title, text, icon and picture), and may sometimes contain optional elements. These elements are both defined in the Sketch document as well as in code. Instead having divider lines themselves, we require each component to have a divider, which is then visible or hidden based on on the view logic.
iOS vs. Android
The Airbnb design system is most parts platform agnostic. Most components work and look exactly the same on iOS and Android. We look for design solutions that feel at home across platforms and follow conventions on important elements like navigation, system iconography, contextual actions, and interactions. For example, the Android navigation bar is slightly different and uses different icon than the iOS one.
Phone & Tablet
We also built the design system so that the same code, components and designs can also work with different devices sizes. All components can be responsive, and with tablet, we create few layout rules to help transformation.
Adoption
Today DLS I used by the whole organization, by dozens of designers and engineers. You see in action in the Airbnb native apps (iOS, Android, Tablets) and on the homepage.
Articles & Resources about DLS
Creating the Airbnb Design Language System (DLS)
AMA: Karri Saarinen, Designer - Creating Design Systems at Airbnb
Spec.fm – Design Systems: So Hot Right Now (feat. Karri Saarinen)
The Way We Build – Airbnb Design
How Airbnb built a design system that could take on the world.