figma

Figma Token Integration

Overview

Sync design tokens between code and Figma using Figma Variables, the Tokens Studio plugin, or Style Dictionary. Establish a single source of truth workflow for design-to-code handoff.

When to Use

• Setting up Figma Variables from code tokens
• Exporting Figma styles to code tokens
• Establishing a design token workflow
• Syncing colors, typography, and spacing with Figma

Quick Reference: Figma Token Types

Figma Type	Maps To	Example
Color Variable	--color-*	--color-primary-500
Number Variable	--spacing-*, --radius-*	--spacing-md
String Variable	Font family, mode names	--font-sans
Boolean Variable	Feature flags	Theme mode toggles

The Process

1. Choose workflow direction:
   • Code → Figma (tokens are source of truth in code)
   • Figma → Code (designers own tokens in Figma)
   • Bidirectional (sync both ways)
2. Select tooling: Native Variables, Tokens Studio, or custom
3. Define token structure: Categories, naming, modes
4. Set up sync mechanism: Plugin, API, or manual
5. Document workflow: Who updates what, when to sync

Workflow Options

Approach	Best For	Tools
Figma Variables (native)	Simple setups, color/number tokens	Figma UI, REST API
Tokens Studio	Complex tokens, multi-file	Tokens Studio plugin + GitHub
Style Dictionary	Enterprise, CI/CD integration	Style Dictionary + Figma API
Manual sync	Small teams, infrequent changes	Copy/paste with conventions

---

Figma Variables (Native)

Creating Variables from Code Tokens

Token structure for Figma:

{
  "color": {
    "primary": {
      "50": { "value": "#eff6ff", "type": "color" },
      "100": { "value": "#dbeafe", "type": "color" },
      "500": { "value": "#3b82f6", "type": "color" },
      "900": { "value": "#1e3a8a", "type": "color" }
    },
    "gray": {
      "50": { "value": "#f9fafb", "type": "color" },
      "900": { "value": "#111827", "type": "color" }
    }
  },
  "spacing": {
    "xs": { "value": 4, "type": "number" },
    "sm": { "value": 8, "type": "number" },
    "md": { "value": 16, "type": "number" },
    "lg": { "value": 24, "type": "number" }
  },
  "radius": {
    "sm": { "value": 4, "type": "number" },
    "md": { "value": 8, "type": "number" },
    "lg": { "value": 16, "type": "number" },
    "full": { "value": 9999, "type": "number" }
  }
}