Practical Guide to Building a Design System from Scratch

When I joined Hygraph as the first designer 3 years ago, one of my jobs was to build a design system.

I'd only built component libraries in Sketch until then. So this was going to be a new challenge, which gets me excited.

Here's the approach and the resources I used to build our first design system ↓

Figma was relatively new in 2020 and many design teams were going through a phase of moving their systems from Sketch. I found some useful articles about their transition to get inspired…

? Upgrade Pack 's migration to Figma by Luis Ouriach

Thorough write-up on their 3-part process. Not only it helped me understand the composition of the design system but also gave me some ideas to organize our files & projects in Figma.

Link to the article ↗

I've written about how we at Hygraph organize our files & projects in Figma in this article, in case you're curious.

? Help Scout 's migration by Buzz Usborne

Step-by-step case study on moving systems from Sketch to Figma.

Link to the article ↗

? How Lucid Software built a DS in 3 months by Taylor Palmer

For a team of one, time was always going to be of the essence. So I found the tips shared here quite useful for building things quickly.

Link to the article ↗

? ? ?

The articles were great for an overview but I wanted to get up close to the components. So I downloaded some well-crafted DS files from Figma community and started dissecting them. This helped me understand the inner workings of the components.

Look for these files in the Figma community:

Shopify Polaris GitHub Primer Atlassian DS Segment Evergreen 微软 Teams IBM DS Ant Design System for Figma

Play with them to get a feel for the components.

? ? ?

The links were getting out of hand, so I also started documenting them in Notion . At this point, my brain automatically thinks in systems and creates wikis in Notion to stay organized.

At some stage of consuming all the gold, I also started creating the design system in Figma. To keep track of all the foundational elements & components that we wanted to add to the DS, I created a running checklist in Notion.

Speaking of checklists, this website by Arda Kara?izmeli , Dmitry Belyaev & Steven Baguley also came in handy in making a list of essential design system components and their anatomy.

Link to the website ↗

Naming the components can be tricky and can quickly turn into a rabbit hole, so I used UI Guideline to keep things simple. They've got a massive repo of components with references to how other systems are naming them. Use this to get started and customize it later if needed.

Another rabbit hole in design systems is creating a color palette. I referenced this article by Jeeyoung Jung for designing systematic colors. It was great to begin with but of course, we've gone through many iterations since.

Link to the article ↗

? ? ?

I also had help from my friends & the design community, without whom it would have taken me much longer to figure stuff out. Special shoutout to Arnob Mukherjee & Luis Ouriach for their support while building the first iteration.

? ? ?

Hope you found these resources useful. Share it with your friends that are still early in their design system journey.

Note: This was built in 2020, Figma has come a long way since. The fundamentals still remain but please refer to newer guides for the tool's technicalities.