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)

Exploration

Wireframes

  • 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

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

Components:

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

Buttons:

Second iteration of Buttons, with Variants

Links:

Links with Variants

Form fields:

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

Tooltips:

Tooltips, with Variants

Alerts:

  • 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

Icons from feathericons.com

Complex Components

List of Organism Components

  • Navigation
  • Cards
  • Dialogs

Navigation:

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

Cards:

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:

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 w3schools.com for buttons
Sample retrofitted CSS codes via Atom for ‘Primary/ No-icon/Active/ Small’ button

Learnings

Naming components in an Excel sheet

Reflection about design systems

--

--

UX Designer. Visit me at www.checkeredpotato.com

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