Ruiwen Tay writes about her practical experience of building a design system in 8 steps. Starting a design system in a start-up can be quite challenging and Ruiwen has articulated well in her article to provide some good insights with references for further readings.
Highlights of the article: She and her team clearly defines design system - a repository of reusable components with clear usage guidelines, shared among designers and developers.
Ruiwen describes her journey through 8 steps as follows:
1. Audit existing components 2. Research on other design systems 3. List out components 4. Plan a timeline 5. Research and discuss components 6. Create design symbols 7. “Design” design system 8. Implement design system
She rightfully comments that "Building a design system is a never-ending challenge as they continue to update and adapt it in order to better suit their organisational needs.
Interested? Read the full article below.
Design systems are all the rage now and you’ve probably seen this term being thrown around ever so frequently. I was first introduced to the world of *design systems* when we started on our web design system back in January 2019. Working in 99.co with only one other product designer, we had limited resources to dedicate to starting a new project. Still, we deemed a design system important to eliminate existing design inconsistencies and improve future workflows for both designers and developers as the company scales up. That being said, there was a lot we had to work around and get our hands dirty in order to push it forward. Just so you know what you’re getting yourself into, I’ll define what we mean by a design system — a repository of reusable components with clear usage guidelines, shared among designers and developers. It should showcase all existing components with guidelines as to when and how to use each component including ready-to-use code.
Our design system is still a work-in-progress but by documenting this journey, I hope to share our process as well as some useful tips and tools. :-)
Audit existing components
Research on other design systems
List out components
Plan a timeline
Research and discuss components
Create design symbols
“Design” design system
Implement design system
Step 1: Audit existing components
In order to get a bird’s eye view of all the use cases we need to cater to, it is important to audit existing components in our product. Yes, every single component on every page. This is a crucial step albeit a tedious one. For this, we took screenshots and used Trello to organise them.
Each list (top to bottom) represents a page on our website, e.g. Home page. Within each list, different sections of a page are captured as screenshots and organised into cards. Each card is tagged with labels (panel on the right) that represent each component present within the section of the page. The labels are colour coded based on the type of com