A design system records what your interfaces are built from. It contains the foundations, such as colours and type sizes. Smaller elements are built from these, like a button or an input field, and larger components are built from those, like a product card or a complete header. Every element comes with a description of when and how it can be used.
While a site is small, a design system can seem like a luxury. The problems appear when the product grows and more and more people work on it. That is when a slightly different button shows up on every new screen, and developers rebuild something that has already been made once.
What you gain
- New screens are ready sooner, because the designer works from finished elements
- The developer builds each component once and then reuses it
- The interface stays consistent everywhere, however many people work on it
- A change, for example a new brand colour, is made in one place and appears everywhere
A good design system also records the decisions. It says when to use a primary and when a secondary button, or how an error message appears. These rules let a new designer or developer work along the existing logic, without having to reinvent the same thing every time.
It is also useful when your product lives on several surfaces, for example a website and a mobile app. Thanks to the shared foundations, both feel like the same brand, and the differences appear only where the platform calls for them.
The design system is built in Figma, with the variants and states of the components, and ideally it lives on in the developers' code under the same names. It does not have to be finished all at once either. On a new product it grows together with the first screens, and on an existing one it is worth starting with the most frequently used elements.
Brand guidelines say how your brand looks, and a design system says how your digital interfaces are built. The two complement each other well, and if we make both, they rest on the same foundations.
