Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 74

Creating Design Tokens in Figma

Recommended resources

Introduction

In our last lesson, we deconstructed the architecture of a design system into its three core layers: tokens, components, and patterns. We established that tokens are the fundamental building blocks—the single source of truth for all visual properties.

Today, we transition from theory to practice. We will roll up our sleeves and learn how to define a set of design tokens in Figma for colors, spacing,typography, and elevation. This is a hands-on session where you'll create the foundational assets for any future design system you build. Mastering this skill is a crucial step toward working more efficiently and professionally, which is essential for a successful freelance career.

Think of this process as creating a "chart of accounts" for your design work. Just as in accounting, where every entry is categorized for consistency and clarity, we will create a systematic library of values that will bring order and scalability to your designs.

This image provides an excellent overview of the types of design tokens we will be creating today: from color palettes and typography scales to spacing units and shadow effects.

The "Why" Behind Design Tokens: A Quick Recap

Before we start building, let's quickly reinforce why tokens are so important. They are essentially variables that store design decisions. Instead of using a static hex code like #007AFF repeatedly, you use a token named color-brand-primary.

The benefits are immense:

  • Consistency: The same value is used everywhere automatically.
  • Scalability: If the brand color changes, you update the token in one place, and the change propagates across your entire project.
  • Collaboration: They create a shared language between designers and developers.

To see this in action and understand the structure we'll be using, let's watch a short introductory clip.

Tokens, variables, and styles - Update: Introduction to design systems

This video from Figma's official channel provides a concise explanation of what design tokens are and the common tiered structure used to organize them.

Please watch these two segments: First, watch the introduction to what design tokens are. This will serve as a great refresher. Next, pay close attention to the concept of aliasing. This is the core idea behind creating a flexible system: having tokens that reference other tokens.

Setting Up Tokens in Figma: Variables and Styles

In Figma, we primarily use Variables to create design tokens. Variables are the modern, powerful way to manage reusable values. They can hold color, number, or text values, and crucially, they can reference each other and support different "modes" (like light/dark themes).

However, Styles still play a role. They are needed for properties that variables don't yet support, such as gradients or complex effects like multiple shadows. For this lesson, we will use:

  • Variables for Color, Spacing, and Typography.
  • Effect Styles for Elevation (shadows).

1. Defining Color Tokens

We will use a two-tiered structure for our colors, which separates the raw values from their purpose.

  • Primitive (or Base) Tokens: These are the raw, approved hex codes of your color palette. We'll name them generically, like blue-500 or gray-900.
  • Semantic (or Alias) Tokens: These tokens have contextual names that describe their job, like color-background-button-primary. They don't contain a hex code themselves; instead, they reference a primitive token.

Let's see how to build this in Figma.

Tokens, variables, and styles - Update: Introduction to design systems

Continuing with the same Figma video, we'll now watch the practical demonstration of creating color tokens.

Watch the following segments to understand the structure and the step-by-step process in Figma: First, understand the common token structure of Primitive, Semantic, and Component-specific tokens. For our purposes, we'll focus on the Primitive and Semantic layers. Then, follow the practical walkthrough of migrating colors to variables. Pay attention to how they create a "Primitives" collection for the raw hex codes and a "Tokens" collection for the semantic, purpose-driven names that reference the primitives.

Your Turn: Create Color Tokens

  1. Open a new Figma file.
  2. Open the Local variables panel by clicking an empty space on the canvas and finding it in the right sidebar.
  3. Create a collection named "Primitives". Inside it, create Color variables for a basic palette. For example:
    • blue/500: #007AFF
    • gray/900: #1C1C1E
    • gray/100: #F2F2F7
  4. Create a second collection named "Tokens". Inside it, create Color variables that reference your primitives. To reference another variable, simply start typing its name in the value field.
    • color/text/default: Link it to gray/900
    • color/background/primary: Link it to gray/100
    • color/brand/primary: Link it to blue/500

2. Defining Spacing Tokens

For spacing and sizing, we'll use the 8-point grid system. This means every spacing value (margins, padding) and most size values will be a multiple of 8 (e.g., 8, 16, 24, 32px). This creates a consistent visual rhythm. Your analytical background in structured systems like accounting will make this rule-based approach feel very natural.

Figma Design Tokens: How to Build a Scalable Design System

This article by Sergei Chyrkov provides a clear, practical guide to setting up spacing tokens based on a numeric scale.

Read the section titled "Step 3: Setting Up Variables for Spacing and Scale." Focus on how a base scale of numbers is defined and then aliased for specific uses like spacing (SP), radius (RD), and borders (BR).

Your Turn: Create Spacing Tokens

  1. In your Figma file, go back to the Local variables panel.
  2. Inside your "Primitives" collection, create a new group for Number variables called "scale".
  3. Define your base spacing values. It's common practice to start with 4 for smaller increments.
    • scale/1: 4
    • scale/2: 8
    • scale/3: 12
    • scale/4: 16
    • scale/5: 20
    • scale/6: 24
  4. In your "Tokens" collection, create a Number variable group called "spacing".
  5. Create semantic spacing tokens that reference your scale. You can use t-shirt sizes for intuitive naming.
    • spacing/xs: Link to scale/1 (4)
    • spacing/sm: Link to scale/2 (8)
    • spacing/md: Link to scale/4 (16)
    • spacing/lg: Link to scale/6 (24)

Now you can apply these spacing tokens to Auto Layout padding and gap values.

3. Defining Typography Tokens

Typography can also be broken down into tokens for font family, size, weight, and line height. We will use a combination of String variables (for text-based values like font names) and Number variables (for sizes).

Figma tutorial: Variables for typography

This official Figma tutorial is the perfect guide to creating a full set of typography variables.

Watch these three sections to build out your type system: Creating Font Family Variables: Learn how to use String variables to define your font families. Creating Font Weight Variables: See how to manage font weights using either strings (e.g., "Bold") or numbers (e.g., 700). Creating Font Size & Line Height Variables: Learn how to use Number variables for sizes, linking them to a scale.

Your Turn: Create Typography Tokens

  1. In the Local variables panel, create a new collection named "Typography".
  2. Create String variables for font family:
    • font/family/body: "Inter" (or another sans-serif font you have)
    • font/family/display: "Space Grotesk" (or another display font)
  3. Create String variables for font weight:
    • font/weight/regular: "Regular"
    • font/weight/bold: "Bold"
  4. Create Number variables for font size, referencing your primitive scale where possible:
    • font/size/sm: 14
    • font/size/md: Link to scale/4 (16)
    • font/size/lg: Link to scale/5 (20)

These variables can now be applied to the properties of a Text Style, giving you a powerful, modular type system.

4. Defining Elevation Tokens

Elevation refers to the perceived distance of an element from the background, usually controlled with shadows. As mentioned, variables don't yet fully support complex effects, so we'll use Effect Styles. However, we can still use our spacing tokens to define the shadow's properties for consistency.

Lesson 3: Build your design system

This guide from Figma's help center provides a straightforward method for creating shadow styles.

Read the section on "Elevation". Focus on how they create three distinct shadow levels and save them as Effect styles. Note how the properties of the shadow (x, y offset) can be set to values from our spacing system (e.g., 4, 6, 8).

Your Turn: Create Elevation Styles

  1. Create a simple rectangle frame on your canvas.
  2. In the right sidebar, go to the Effects section and click the + icon.
  3. Click the sun icon to edit the shadow properties. Set the Blur to 0 and Opacity to 100% for a crisp, modern shadow.
  4. Set the Y value to one of your spacing tokens. You can type the name of your spacing token (e.g., spacing/sm) directly into the input field. Figma will substitute the value (e.g., 8).
  5. Click the Style icon (four dots) in the Effects section, then click the + icon to create a new style.
  6. Name it elevation/sm.
  7. Repeat the process to create an elevation/md style, perhaps using your spacing/md token for the Y value.

Conclusion

Congratulations! You've just created the foundational layer of a design system. By defining tokens for color, spacing, typography, and elevation, you've established a single source of truth that will make your future design work faster, more consistent, and infinitely more scalable.

Key Takeaways:

  • Design tokens are defined in Figma using Variables and Styles. Variables are the modern standard for colors, numbers, and strings. Styles are used for more complex properties like effects.
  • A two-tiered (Primitive/Semantic) structure is key. It separates raw values from their intended purpose, creating a flexible and understandable system.
  • The four pillars of visual design can be tokenized: We successfully created tokens for Color, Spacing (using an 8-point system), Typography, and Elevation.
  • Tokens reference other tokens. The real power comes from aliasing, like having a semantic token color-text-primary reference a primitive token gray-900.

Preview of the Next Lesson:

With our foundational tokens in place, we're ready to start building. In the next lesson, you will learn how to build versatile, multi-state button components using variants and Auto Layout. You will see firsthand how the tokens you created today are used to construct robust, reusable UI components, bringing your design system to life.