Member-only story

How I Structured My Design System Using Figma’s New Variables

Melissa McArthur
Bootcamp
Published in
10 min readJul 15, 2023

I will walk you through how I used Figma’s new variables to create smart Design Tokens for a comprehensive design system in just a few days.

Announced in June 2023, Figma released a series of new features that greatly improves the way we build and use design systems, lowering our dependancy on third-party plugins.

Figma clearly understand the power and success of Design Tokens, and have now made it possible for us to create them using Variables. For a more comprehensive explanation, read Figma’s release notes here.

In this article, I will demonstrate how I’ve organised a design system using these Variables. I will also explain how these Variables will be used throughout my daily design process.

Variable Collections

Collections are Figma’s name for grouping Variables of the same type. This is the main way your Variables will be organised.

I created the following collections of Variables:

  • Base Colors
    (edit: Figma suggests naming these ‘Primitive Colors’ or ‘Primitive Tokens’)
  • Color Tokens
    (edit: Figma suggests naming these ‘Semantic Colors’ or ‘Semantic Tokens’)
  • Number Tokens
  • Devices

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Melissa McArthur
Melissa McArthur

Written by Melissa McArthur

Visionary Product Designer. Lead Product Designer at Klarna.

Responses (29)

What are your thoughts?