A design systems publication by Figma
Article

5 tips from an Airbnb designer on maintaining a design system

Author
Jeremy Dizon@jeremydizon
Jeremy maintains, evangelizes, and documents Airbnb’s Design Language System.

So, you’ve convinced your ececutive team of the company’s pressing need for a design system. Maybe you’ve even built it out, spending countless hours discussing and organizing components, icons, and font choices. But once you’ve laid down that framework, what are the best methods for preserving this airtight design system?

As a production designer at Airbnb it’s my job, along with a small team of designers and engineers, to make sure our six design templates are always up-to-date and accurate. Coming up with consistent and transparent processes was key, but arriving at this point was no easy feat.

You can start by asking several key questions:

  1. How will you maintain this system?
  2. How will you promote and encourage usage?
  3. How will you communicate updates?

Every company will need a different process for building their design system, in line with their own organization, culture and product. At Airbnb we grew our business first with Homes before adding Experiences (Trips), Airbnb Plus, and Beyond, the new end-to-end booking service set to launch this summer. Our design language system provides our product teams a starting point to create amazing user experiences with more efficiency than ever before. As we scale the business and design/engineering headcount, the system helps define the foundation of Airbnb design and allows us to solve complex user problems.

DLS Guide – Primitives

5 tricks of the trade

It’s safe to say I’ve learned a lot about how to maintain design systems while managing Airbnb’s. For those who would like a smoother ride than my trial by fire, below are 5 tried and true tips. In this article, I focus on technical advice rather than cultural for brevity’s sake.

1. Speak a common language

Develop a common language so everyone refers to components in the same way. It can be challenging to consistently name components, icons, etc across the various platforms, but doing so is crucial for communication. It’s also critical that the elements of your design system are communicated broadly. We’ve talked about our components beyond the point of exhaustion within our larger organization. But it’s worth it — engineers and designers alike can work through a problem together because they understand each other.

2. Keep priorities straight with a ticketing system

I honestly couldn’t do this job without JIRA’s ticketing system. Each week I prioritize the request tickets that have been approved by the design lead, update the templates affected, and then deliver to the larger design organization via Box.

Once those tasks are taken care of, I create individual subtasks for each engineering partner, relaying all necessary information through a single paragraph or a screenshot (if the work is simple like updating a component) or by providing a spec (if the work is a bit more complex like adding a whole new component).

DLS Guide – Libraries

3. Avoid duplicate components by auditing

Auditing your system keeps the focus on “less is more.” We strive for the smallest amount of robust components possible that can be applied to a large amount of use cases. However, we do not prevent the creation of new components. Each product team can build "team components" for their feature. After testing them, these can be added to the core system. The key vetting criteria is whether other teams can apply it to their designs.

On occasion, a team component replaces an existing component because the new component offers a more robust option to many teams. Continuously auditing will help keep your system lean and filled with Swiss Army knife like design options.

4. Safeguard lost work with a “master” folder

As a production designer, I keep a “master” folder of anything I work on locally on my laptop. The goal with this “masters” folder is to safeguard against someone altering the files. Therefore, I’m the only one who manages the folder. It’s built into my workflow so when I deliver a new template of components, I also include the same file in the “master” folder. Not only does it help with version control, but it allows a quick way to fix any issues with your delivered file.

DLS Core - Navigation

5. Document new principles every step of the way

Keeping comprehensive documentation is necessary when evangelizing your system. Whether as a website or presentation slide deck, documenting the principles of your design system and how it fundamentally works for all who use it will pay off in the long run.

Our documentation has gone through a few iterations. Currently we have a searchable site that allows users to browse components with visual screenshots rendered from live production code showing what they look like on each platform. Each component links to the actual code in Git and allows engineers to quickly reference them when building. And a future version will include a quick way for designers to pull these components into their mockups, making this documentation site a single source for both designers and engineers.

DLS Core - Action Footers

Assume your design system will evolve

The sign of a working design system is constant change. With the number of teams using our system, evolving a growing system is only natural. It’s essential to have a resource between engineering and design (like me) so your design system remains useful, relevant, and up-to-date.

Learn more about Airbnb DLS
If you’d like to learn more about how our system is defined and what decisions go into designing components, patterns, and rules, I encourage you to visit Airbnb’s ongoing series on our Design Language System.

Operations

Design Operations

Lessons in process and management
Daniel O'Connor

How Thumbtack structures their design system

Staff Software Engineer Daniel O'Connor peels back the layers of the home service platform's design system, Thumbprint, to show how they built it for flexibility and efficiency.

Wart Burggraaf

Keeping design system contributions in check

Is your design system suffering from a lack of compliance? Learn how one team established a self-governing contribution process that grows with them.

Wart Burggraaf

A collaborative approach to defining components and their features

Aligning designers, developers, and maintainers around a component’s purpose is the key to creating a system that can be easily extended and governed.

Read all articles

Ready to Contribute?

The team at designsystems.com is always looking for interesting content. Share your ideas with us — we’d love to hear from you.

Subscribe for Updates

We will be rolling out new articles and guides on a regular basis. Sign up to get the latest delivered to you.

Design Systems

version 2.0.0
Terms of ServicePrivacy Policy