How to create a Design System using Variables in Figma

Please note design systems such as the one laid out in this article are only available on education, professional or organization Figma accounts.

The first step towards creating a Figma Variables design system is to create the Atoms.

This Atoms (or Primitives as Figma calls it) collection should hold:

• Colors
  • Create a variable for each of the colors used in your design system.
• Numerical values that are used in your design system. Name each of these variables under its relevant category (i.e. breakpoint-0-margin, or margin-xs).
  • Gutter
  • Padding
  • Margin
  • Shadow Offset

We recommend that you group color variables under Colors and numerical values under Grid Data, Typographic Data or Breakpoint Data.

Please note that Typographic Data is a suggestion for when Figma implements variable typography. To create a responsive type system, you must create different styles for each breakpoint.

Additional variables that could be of use are numbers and variables such as:

• Breakpoint Specific Minimum Widths
• Breakpoint Specific Maximum Widths
• Is Landscape/is Portrait Booleans

Create a new collection called Styleguide and create tokens for all the relevant color variables.

Additionally, create modes for each of the relevant color style (i.e. Light Mode and Dark Mode).

Please note that this styleguide collection should be used exclusively for colors for Light and Dark mode (or other color modes). A separate BreakPoint Manager collection will be created in the next step to handle numerical values.

Create a new collection called Layout Manager and create 3 modes - one for each breakpoint (Please note that Figma currently only allows you to create 4 Modes per collection on a professional account and 40 on an enterprise account - if you have an enterprise account we suggest you create 5 breakpoints).

Group tokens under relevant groups such as Typographic Data, Grid Data or Breakpoint Data.

Subsequently, create modes for each of the relevant numerical variables (i.e. padding, margin, header-font-size).

We recommend you check out our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.