Building a Design System in Figma

A quick-start guide, with Auto layout and Variants

  • Provide consistent user experiences
  • Eliminate repetitive design work
  • Design at scale in an iterative manner
  • Improve designer-developer handoffs

Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.

— Therese Fessenden (NN/g)

I experienced a design inconsistency problem while working with an existing color palette. I was trying to find the “right” shade of green for a new button, and this color was supposed to work with the existing palette. I spent a whole afternoon trying out different shades of green and eventually ended up with a blue. This wasn’t sustainable for a start-up that was trying to deliver a feature as fast as possible. In order to avoid this situation, I decided to create a design system for colors when I started working on another project called Goody app.



After creating a set of wireframes, I got an overview of the pages that I need to work on and the elements that I need to include.

  • Home Page
  • Services
  • Contact Us
  • About Us
  • Our Work
  • Sitemap
Wireframes for website project

Style Guide:

Color Palette

When you create a new team in Figma, it comes with an existing design system project, and inside is a default file with ‘Color Styles’. This is a great place to start exploring and tinkering with an actual design system, and it’s quite fun! However, when trying to work with an existing color palette, it’s good to start in a spreadsheet before implementing the color palette in Figma.

Generated colors in an Excel sheet
Generated colors in Figma


By the time I was exploring type sizes and weights, I applied these color styles to backgrounds and texts. There were several iterations using Helvetica, I recently updated it by applying Figma Variants.

Typography, with Variants
  • Header (Header Light Mode, Header Dark Mode)
  • Subheader (Subheader Light Mode, Subheader Dark Mode)
  • Text (Text Light Mode, Text Dark Mode)
Subheader, with Variants


List of Atomic Components

I initially grouped and identified the main components as the following:

  • CTA (Primary Buttons, Secondary Buttons, Text links Navigation, Text links Defaut, Text links Highlighted)
  • Form fields
  • Alerts
  • Icons
First iteration of Buttons, without Variants
  • Buttons
  • Links
  • Form fields
  • Tooltips
  • Alerts
  • Icons


Variant property setting: Variant Name/Type/Format/State/Size

Second iteration of Buttons, with Variants


Variant property setting: Variant Name/Type/Format/State/Size

Links with Variants

Form fields:

For the Form fields, I focused on the states. I identified 2 critical properties:

  • Empty Format
  • Active Format
First iteration of Form fields
Second iteration of Form fields


I decided to create another set of Variants for the Tooltips to better manage and incorporate them to other components in the design system.

Tooltips, with Variants


At first, I combined all Alert components. Although they are all alerts, the ‘Alert Messages’ did not function the same way as the ‘Alert Headlines’. So I regrouped based on their how they are used. Alert messages are in-line texts that could be found in the Form fields, while Alert banners could be found on top of a user screen.

  • Alert Messages/Alert 3 20px/Active
  • Alert Banners/Alert 1 14px/No Button
First iteration of Alerts
Second iteration of Alert Messages, with Variants
Second iteration of Alert Banners, with Variants


I used open-source icons from

Icons from

Complex Components

I applied Auto layout to the simpler components before applying it to more complex ones, termed as “Organisms” based on Brad Frost’s Atomic Design approach.

List of Organism Components

  • Navigation
  • Cards
  • Dialogs


Variant property setting: Variant Name/Type/Format

Navigations, with Variants
Horizontal Navigation, with Auto layout
Vertical Navigation, with Auto layout


Variant property setting: Variant Name/Type/State/Size

Cards, with Variants. Credits to Jignesh Gajjar for the image from LottieFiles plugin
Horizontal Card, with Auto layout and Aspect Ratio tool
Vertical Card, with Auto layout and Aspect Ratio tool


Variant property setting: Variant Name/Format/Size

Dialogs, with Variants
Small Dialog, with Auto layout
Small Information Dialog, with Auto layout and Aspect Ratio tool

Design Codes

The CSS codes are automatically generated under ‘Inspect’ tab in Figma as you design. If I’m not mistaken, these Inspect codes are only editable to owners or contributors. Here’s a peek at how codes are presented in Figma for a button:

Layers in Figma for a button
CSS codes when selecting ‘Primary/ No-icon/Active/ Small’ button
CSS code when selecting ‘Text 3' layer
html code from for buttons
Sample retrofitted CSS codes via Atom for ‘Primary/ No-icon/Active/ Small’ button


Thinking back, I spent a considerable amount of time picking a naming convention for each of the components, and it initially felt like it slowed me down. However, I found that naming and grouping is one of the most important things to decide on before working on the visual elements. By sticking with the naming conventions, awkward names were prevented, it also became apparent to me which components were still missing.

Naming components in an Excel sheet

Reflection about design systems

Kick-starting a design system empowered me early on to create different ways of designing. It has allowed me to fix unforeseen issues like a missing component state/format. This would reduce unnecessary workload and even panic in a team.



UX Designer. Visit me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store