.jpg)
.webp)
.webp)
So you've persuaded your executive team that the organisation desperately needs a design system. Perhaps you've even developed it, devoting endless hours to debating and organising components, icons, and font options. So, once you've established that framework, what are the best ways to maintain this airtight design system?
It is my responsibility as a production designer at Airbnb, along with a small team of designers and engineers, to ensure that our six design templates are constantly up-to-date and accurate. Creating uniform and transparent processes was critical, but getting there wasn't simple.
You might begin by asking a few key questions:
- How will you keep this system running?
- How are you going to advertise and encourage usage?
- How will you distribute updates?
Every company will require a unique approach for developing their design system, based on their organisation, culture, and product. Airbnb began with Houses before expanding into Experiences (Trips), Airbnb Plus, and Beyond, a new end-to-end booking service planned to launch this summer.
Our design language framework provides a starting point for our product teams to develop exceptional user experiences more efficiently than ever before. The framework helps establish the foundation of Airbnb design and allows us to tackle complex user challenges as we increase the business and design/engineering personnel.
Table of Contents
Primitives DLS Guide
Below are 5 tried and true advice for individuals who want a smoother trip than trial by fire. For the purpose of brevity, we will concentrate on technical guidance rather than cultural advice in this post.
- Use a shared language
Create a shared language so that everyone refers to components in the same way. Consistently naming components, symbols, and so on across platforms might be difficult, but it is critical for communication. It is also vital that the aspects of your design system are widely shared. Within our bigger organisation, we've discussed our components to the point of weariness. Yet it's worth it since engineers and designers can work together to solve problems because they understand each other.
- A ticketing system can help you keep track of your priorities.
Without JIRA's ticketing system, I honestly couldn't accomplish this work. Each week, I prioritise the design lead-approved request tickets, update the templates affected, and then deliver to the larger design group via Box.
Once those tasks are completed, I establish specific subtasks for each technical partner, relaying the relevant information in a single paragraph or a screenshot (if the work is simple, such as component update) or by supplying a spec (if the work is a bit more complex like adding a whole new component).
- Through auditing, you may avoid having duplicate components.
Auditing your system preserves the emphasis on "less is more," as we seek for the fewest number of resilient components that can be used to a wide range of use cases. Nonetheless, we do not forbid the development of new components. Each product team is able to create "team components" for its feature. After testing, they can be integrated into the core system. The main vetting criterion is if it can be applied to other teams' designs.
A team component may occasionally replace an existing component because the new component provides a more robust choice to many teams. Frequent auditing will assist in keeping your system slim and full of Swiss Army knife design possibilities.
- Use a "master" folder to protect lost work.
As a production designer, I keep a "master" folder on my laptop for everything I work on locally. The objective of this "masters" folder is to prevent unauthorised changes to the data. As a result, I'm the only one in charge of the folder. It's part of my procedure, so whenever I submit a new component template, I also include the same file in the "master" folder. It not only aids in version management, but it also provides a rapid means to resolve any difficulties with your provided file.
- Record new principles along the route.
While evangelising your technology, thorough documentation is required. Documenting the ideas of your design system and how it essentially works for all who use it, whether as a website or presentation slide deck, will pay off in the long term.
Our documentation has gone through several revisions. We currently have a searchable website that allows users to browse components with visual screenshots rendered from live production code that show how they appear on each platform. Each component is linked to the real code in Git and may be rapidly referenced by engineers when building. In the future, a rapid mechanism for designers to pull these components into their mockups will be added, making this documentation site a one-stop shop for both designers and developers. This will further enhance our website design & development process by ensuring consistency across both design and code.
The Benefits of the Airbnb Design System
- Strong communication skills
One significant advantage of the Airbnb design system is that it facilitates communication. The product development team refers to it as an SSOT (single source of truth), which ensures that all members use the same information when making business decisions. This assists the entire team in product planning, development, and maintenance.
Using SSOT ensures that everyone is familiar with the vocabulary that will be used throughout the project. This reduces the likelihood of miscommunications and leads to more productive conversations and discussions between designers and developers.
- Improved Workflow
Airbnb's design approach simplifies the entire design process. Using this strategy enables development teams to iterate quickly. Airbnb DLS enables you to launch new designs with minimal resources. It keeps users up to know on all of the new design changes, which helps them organise everything better. This not only improves the work flow but also cuts down on time waste.
- More Clarity
Another significant benefit of the Airbnb design approach is that it offers developers with clarity. It aids them in maintaining their vision, which is to retain consistent styles while constructing the components. It provides them with a clear path and eliminates any doubt about the procedure and resources.
- Encourages Consistency
When you use the Airbnb design system, it collects and organizes all of the graphical components into a single product. This makes it very straightforward to track irregularities and aids teams in determining which features and components are crucial to the product.
How to Make Use of the Airbnb Design System
- The first step is to select the Create Design System option. You could use pre-existing resources or Airbnb design system sketch files, or you could start from scratch. Each design system is divided into sections in which you can include your resources. Color, patterns, typography, and UI patterns are all examples of this.
- To add colours, either directly paste the website address or link to a CSS file. If you want to change the text styles and formatting, you can do it directly in the editor. After you've gathered all of your supplies, you should open your prototype and test it out.
- Now, to import all of your materials, click the upload photos option. To upload UI patterns, you must first launch the editor. To gain a better notion, you can draw influence from various design systems. To update the library, use the add and modify elements button in the editor; it will immediately sync everything. This will allow you to incorporate design system aspects straight into your prototype.
- You can add textiles by first selecting an element and then clicking on add textiles. Now, select a symbol from the canvas and add it to the collection. You must go to the HMQ library to acquire documentation and descriptions on how to use colours. It includes extensive connections, code elements, and instructions for implementing the designs.
- In this section, you will find detailed descriptions of each category. You will find react codes for all text styles here. Now, categorise and explain all of the assets and UI elements. Go to the left panel and select the edit mode. Choose Add a New Category.
- After you've built the categories, simply drag and drop the pieces into them. When you start growing your Airbnb design language system, this makes designing really convenient. You might now include a description down below. It supports advanced formatting and allows you to insert codes.
- The main advantage of documenting your symbols is that it allows developers to read the documentation while working on the specification mode. It saves time and avoids misunderstandings. Return to the editor and click Preview to access the spec mode. Search properties such as CSS code are now available.
- That's it; you may now choose whether to keep your design system secret or public.
.webp)
.png)
.webp)
