A design system gets adopted when designers and engineers pull from the same source and can see it change. At Outdoorsy that meant tokens that ran from Figma to production code, and one place for documentation.
What is a design system?
A design system is a shared set of components, design tokens and documentation that a company's products are built from. Tokens are the named values underneath, such as a color or a spacing step. They are stored once and used everywhere.
Why do design systems go unused?
Usually because the design library and the code drift apart. A designer updates a button in Figma, the engineers never hear about it, and within a few months each side trusts its own copy.
Once that happens the system is a reference nobody checks.
What made Bonfire stick?
Bonfire is the design system I led at Outdoorsy, through Stay Gold, with a four-person design team. It took nine months and covered five surfaces: web, iOS, Android, email and marketing.
A master set of Figma tokens published to Style Dictionary. Changes then reached both the Figma components and the production code through GitHub, so nobody had to remember to tell anyone.
The documentation gave designers, developers and product managers one place for guidelines and process notes. Every designer and engineer adopted the system. It was a finalist in the 2023 zeroheight Design System of the Year awards.
Does a system survive a second brand?
Bonfire did. A new set of tokens adapted the core system for Roamly, with component libraries for iOS, Android and web. It later extended to Outdoorsy's glamping offering.
Where does a design system audit start?
At the gap between the library and the code. Pick one component, compare the Figma version with what shipped, and count the differences. The count tells you how much the two sides trust each other.
Short answers
What are design tokens?
Design tokens are named design values, such as a brand color, a type size or a spacing step, stored in one place and published to every platform. Changing the token changes it everywhere the token is used.
How long does a design system take to build?
Bonfire took nine months across five surfaces with four designers. A smaller product on one platform can start with a core set of tokens and a handful of components, then grow from there.