How to Use Design Tokens in Figma: Simple Guide

In Figma, use Design Tokens by creating and managing styles for colors, text, and effects in the Assets panel. These styles act as tokens that you can reuse across your designs to keep consistency and easily update your UI elements.

Syntax

Design tokens in Figma are created as Styles for colors, text, and effects. You define these styles once and apply them to elements. The main types are:

• Color Styles: Define colors like primary, secondary, background.
• Text Styles: Define font family, size, weight, line height.
• Effect Styles: Define shadows or blurs.

These styles serve as tokens that can be updated globally.

text

/* Example of naming convention for design tokens in Figma styles */
Primary/Blue
Secondary/Gray
Text/Heading/Large
Effect/Shadow/Light

Example

This example shows how to create and apply a color design token in Figma:

1. Create a new Color Style named Primary/Blue with hex #0055FF.
2. Select a shape and apply the Primary/Blue style as its fill.
3. Change the color in the style, and all shapes using it update automatically.

text

1. Open Figma file.
2. Select a shape.
3. In the right panel, click the Fill color.
4. Click the four dots icon to open Styles.
5. Click '+' to create a new Color Style.
6. Name it 'Primary/Blue' and set color #0055FF.
7. Apply this style to other shapes by selecting them and choosing 'Primary/Blue' from Styles.
8. To update, edit the 'Primary/Blue' style color and watch all linked shapes update.

Output

All shapes using 'Primary/Blue' fill update their color automatically when the style changes.

Common Pitfalls

Common mistakes when using design tokens in Figma include:

• Not using styles and applying colors or fonts directly, which breaks consistency.
• Creating too many similar styles without clear naming, causing confusion.
• Forgetting to update styles, leading to outdated tokens in designs.

Always use clear, hierarchical naming and apply styles instead of manual formatting.

text

/* Wrong way: Applying color directly */
// Shape.fill = '#0055FF' // Manual color, no style

/* Right way: Using color style */
// Shape.fill = 'Primary/Blue' // Uses design token style

Quick Reference

Design Token Type	Purpose	Example Naming
Color Style	Reusable color values	Primary/Blue, Background/Light
Text Style	Font settings like size and weight	Text/Heading/Large, Text/Body/Regular
Effect Style	Shadows and blurs	Effect/Shadow/Light, Effect/Blur/Strong

Key Takeaways

Create and use Figma Styles as design tokens for colors, text, and effects.

Apply styles to elements instead of manual formatting for consistency.

Use clear, hierarchical naming for easy management of tokens.

Updating a style updates all elements using that token automatically.

Avoid creating redundant styles to keep your design system clean.