Building a Design System in Figma

A quick-start guide, with Auto layout and Variants

Apart from being one of the most talked about topic in the design field, the rising need for design systems could be attributed to the following goals:

  • 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.

Exploration

Wireframes

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.

  • 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

Typography

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
  • Subheader (Subheader Light Mode, Subheader Dark Mode)
  • Text (Text Light Mode, Text Dark Mode)
Subheader, with Variants

Components:

List of Atomic Components

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

  • Form fields
  • Alerts
  • Icons
First iteration of Buttons, without Variants
  • Links
  • Form fields
  • Tooltips
  • Alerts
  • Icons

Buttons:

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

Second iteration of Buttons, with Variants

Links:

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:

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

Tooltips:

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

Alerts:

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 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

I used open-source icons from feathericons.com.

Icons from feathericons.com

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

Navigation:

Variant property setting: Variant Name/Type/Format

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

Cards:

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

Dialogs:

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

Learnings

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 www.checkeredpotato.com