Figma Design Tokens: The Complete Guide for UI/UX Designers

Design tokens are the atomic building blocks of any design system. They are named, reusable values — colors, font sizes, spacing amounts, border radii, shadows — that store your design decisions in a single place. Instead of hardcoding '#FF2D87' in every button, you define a token called 'Interactive/Primary' and reference it everywhere. When the brand color changes, you update one token and every component that uses it updates automatically. In Figma, design tokens are implemented through Figma Variables — a powerful native feature that brings token-first design to your entire workflow.

What Are Design Tokens?

The term 'design token' was coined by the Salesforce design team when building the Lightning Design System. The core idea is simple: instead of embedding raw values (hex codes, pixel numbers) directly into components, you give each value a meaningful name and reference the name everywhere. The value behind the name can change — the name never does.

This indirection has enormous practical benefits. Want to launch a dark mode? Change the values behind your semantic color tokens. Want to increase spacing on mobile? Override your spacing tokens in a compact mode. Want to rebrand? Update your primitive color palette and all semantic tokens pointing to it update automatically.

Types of Design Tokens

Color Tokens

Color is the most common token type. A well-structured color token system has two tiers: primitive color tokens (the raw palette) and semantic color tokens (the meaning-based layer).

• Primitive: Gray/50, Gray/100, Gray/200 ... Blue/500, Blue/600 ... Pink/600
• Semantic: Background/Default → Gray/50, Background/Subtle → Gray/100, Text/Primary → Gray/950, Interactive/Default → Blue/500, Interactive/Destructive → Red/600

Assigning semantic tokens to components means you never hard-code a primitive color in a component. A button's fill is 'Interactive/Default', not '#3B82F6'. This makes theming trivially easy.

Typography Tokens

Typography tokens cover font family, font size, font weight, line height, and letter spacing. Like colors, typography benefits from a two-tier structure. Define size primitives (Font/Size/12, Font/Size/14, Font/Size/16...) and semantic presets (Text/Body/Regular uses Size/14, Weight/Normal, LineHeight/140%; Text/Heading/Large uses Size/32, Weight/Bold, LineHeight/110%).

Spacing Tokens

Spacing tokens define your layout rhythm. A base-4 or base-8 scale is standard: Space/1 = 4px, Space/2 = 8px, Space/3 = 12px, Space/4 = 16px, Space/6 = 24px, Space/8 = 32px, Space/12 = 48px, Space/16 = 64px. Using spacing tokens in auto-layout padding and gap values ensures your layouts are always on-grid.

Other Token Types

• Border radius: Radius/None = 0, Radius/Sm = 4px, Radius/Md = 8px, Radius/Lg = 12px, Radius/Full = 9999px
• Border width: Border/Thin = 1px, Border/Medium = 2px
• Shadow / Elevation: Shadow/Sm, Shadow/Md, Shadow/Lg (box-shadow values)
• Opacity: Opacity/Disabled = 0.4, Opacity/Overlay = 0.6
• Motion / Duration: Duration/Fast = 150ms, Duration/Base = 250ms, Duration/Slow = 400ms

Figma Variables: Tokens Natively in Figma

Figma Variables, launched in 2023 and continuously improved, are Figma's native implementation of design tokens. They support four data types: Color, Number, String, and Boolean. Variables can be organized into collections, and each collection can have multiple modes — which is how you implement themes, breakpoints, and localized number formats.

Creating Variables in Figma

1. Open the Variables panel from the Design panel or via the shortcut.
2. Create a new collection (e.g., 'Primitives — Color').
3. Add variables: click '+' and set the name and value.
4. Create a second collection (e.g., 'Semantic — Color') and add variables whose values reference primitive variables (click the cube icon when setting a value to pick a variable alias instead of a raw value).
5. Apply variables to components by selecting a fill, stroke, or text layer and clicking the style link in the color picker to assign a variable.

Modes for Theming

Each variable collection can have multiple modes. For a light/dark theme, add a 'Light' mode and a 'Dark' mode to your Semantic color collection. Define the light-mode values (e.g., Background/Default = white) and the dark-mode values (Background/Default = dark gray). Then, at the frame level, switch the mode with one click to see your entire design shift to the other theme.

Naming Conventions for Design Tokens

Good token naming is one of the most important and most debated topics in design systems. A few principles that stand the test of time:

• Use category/property/variant structure: Color/Background/Default, Spacing/Padding/Sm
• Semantic names for components, primitive names for the raw palette
• Avoid color words in semantic names: 'Text/Subdued' is better than 'Text/Gray' because it stays accurate in dark mode
• Use Title Case or kebab-case consistently — pick one and stick to it
• Avoid abbreviations that are not universally understood: 'bg' might mean 'background' or 'Bulgarian'

Exporting Figma Tokens to Code

The real power of design tokens is that they live in both design and code. When a token value changes in Figma, the same change should propagate to the CSS variables or JavaScript constants developers use. This is the design-to-code bridge that design systems teams have been chasing for years.

Atomize is a Figma plugin built exactly for this purpose. It reads your Figma Variables, maps them to a code-friendly token format, and exports them as JSON, CSS custom properties, or TypeScript constants. Developers add the exported file to their codebase, and the values stay in sync with your Figma design system. No more 'which shade of blue is the right one?' — the answer is always in the token.

Design tokens are only as valuable as their reach. A token that lives in Figma but not in code is a note to self, not a shared contract.

Design Token Best Practices

• Define primitives before semantics — never skip the two-tier structure.
• Keep primitive collections read-only for most designers; semantic collections are what gets applied to components.
• Document the purpose of each semantic token in the variable description field.
• Version your token exports alongside your code: when the design system updates, the token file updates.
• Avoid creating tokens for every possible one-off value; tokens should reflect intentional design decisions, not accident.
• Review tokens periodically and deprecate unused ones to prevent bloat.

The Future of Design Tokens

The W3C Design Tokens Community Group is working to standardize the design token format (DTCG specification), making it possible for any tool to read and write tokens in a universal JSON format. Figma has committed to alignment with this standard. For UI/UX designers, this means the token workflows you build today will become even more interoperable with developer tools, CMS systems, and multi-platform design in the future.

Conclusion

Design tokens in Figma are not an advanced topic reserved for large teams — they are the practical foundation that makes any design system maintainable. Start with colors and spacing, use Figma Variables to implement them natively, apply the two-tier primitive/semantic structure, and export to code to close the design-development loop. The investment in a well-structured token system pays dividends every time you ship a feature, update a theme, or onboard a new designer.