Learn how to build a design system with 7 tips
And how we used them to build Bold, our native DS
This is the second story of our Design System series. You can check our first and third story.
Design systems help us organize design patterns, making the work process more efficient. They function as a set of interconnected component patterns and shared practices that serve the purpose of a digital product — that’s what Alla Kholmatova tells us.
But beyond these standards, we base Bold, our open source system design, on the design principles and the principles of Bridge Lab itself. Its creation involved a team of designers, developers, and analysts. Today, our design system represents Bridge values and style to our users, and uniquely fits our reality.
To get the result we have today, we have had to go a long way — but with these tips and planning, it shortens a little.
Check out the 7 tips that helped us build our design system and will help you with yours:
1. Study and list usability standards
First, we listed everything we know, what we learned in the market, and everything we found related to usability. Listing these guidelines is essential to understanding why they exist, how to apply them correctly, what are the costs and the positive impact they have on user experience.
2. List components
We found several design systems references in free repositories of companies worldwide. With those and our needs, we created a list of components. This step is important for activity planning — from this list we could analyze quantity, complexity and variety of components.
The references we used most were the design system Carbon, created by IBM, and the design system of the company Atlassian, for the variety and complexity of the components. But searching these directories, you can find what best suits your needs :)
3. Find out what are your primary requirements
For this step, employee participation is essential. Here at Bridge we talked to designers, developers and analysts about the most important components in the products we make. We prioritized what we listed to meet the needs of component variation and development flexibility. Then, many different priorities arose.
Practical example: one component that we discussed was the table: we needed requirements such as pagination, a large column count, scrolling, filtering options, data entry and sorting. Meeting these needs would mean to develop a flexible table component that could be adapted to the complexity of product demand.
4. Search visual references
At Bridge, we look forward to a modern look, so we are always following design trends. Through sites like Dribbble, we could select several style-driven references that we would like to apply. If your style is more serious or fun, show it in the design system!
5. Remember accessibility requirements
As we started testing the look of some components, a very important subject came up: accessibility.
We wanted to make Bold accessible, and that’s why we turned all the accessibility guides upside down — do the same when building your design system.
Bold had its bases created considering accessibility criteria corresponding to AA level, ensuring barrier-free access for most users.
(Stay tuned: in our third article we talk about building an accessible design system!)
6. Hands-on: build the components
There are many ways to do this, but here we will explain the step-by-step we did — and that worked. To test and build the components, we use Sketch App, that allows us to use the design system linked to multiple files.
When we sent these specs to the developers, we imported the components into Zeplin. Thus, it was possible to perform the element inspection, ensuring fidelity between the visual aspect of the component built by the design team and the developed component by the front-end developers team.
7. Document everything
This is the stage that required most work and maintenance. The Bold documentation contains a compilation of best practices for the use of components related to code, accessibility, and language standards. In addition, it has our design principles, so it reflects Bridge values and the language used in our products.
As a result, this documentation works as a guide for people to apply the components in the most appropriate way. So it is very important to dedicate yourself to building (good) documentation. If you are curious, ours is available.
Oh, and one last tip! The technology of choice for Bold’s development was React, an open source, Facebook-maintained JavaScript library for interface building :)
Extra: continue searching
Beyond this seven steps, it is important to always keep on researching to create a design system that suits your organization. To kick-start this process, here are some articles that helped us:
- About design system itself, the articles by Audrey Hacq, Lara Tacito, Amilton Paglia and Mariah Muscatoo helped us
- About colors, check out these articles by Kevyn Arnott and Jeeyoung Jung
- If you want to know more about icons, we recommend the articles by Anthony Collurafici and Budi Tanrim
So, have you followed this tips to? Let us know how you did it!
This is a translated story. You can see the original story.
The Bridge Laboratory operates at the Technological Center of the Federal University of Santa Catarina (UFSC), with teams formed by graduate students, hired professionals and mentoring teachers.
Since 2013, we have developed systems and applications in partnership with the Ministry of Health and the National Health Surveillance Agency — Anvisa.
