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)



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

Style Guide:

Color Palette

Generated colors in an Excel sheet
Generated colors in Figma


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

  • 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


Second iteration of Buttons, with Variants


Links with Variants

Form fields:

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


Tooltips, with Variants


  • 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


Icons from

Complex Components

List of Organism Components

  • Navigation
  • Cards
  • Dialogs


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


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


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

Design Codes

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


Naming components in an Excel sheet

Reflection about design systems



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