From Figma to Code: Design Token Workflows

The handoff between design and development is notoriously painful. Designers create beautiful systems in Figma; developers recreate them (imperfectly) in code. Design tokens promise to bridge this gap—but the reality is messy.

The Figma-to-Code Gap

Here's what typically happens:

1. Designer creates a design system in Figma with colors, typography, spacing
2. Designer documents it in a "Style Guide" page
3. Developer reads the guide and recreates everything in CSS
4. Values drift. Designer updates Figma. Developer doesn't know.
5. Months later, Figma and code are completely out of sync.

Sound familiar? This is the problem design tokens are supposed to solve.

Current Solutions

Tokens Studio (Figma Plugin)

The most popular approach is the Tokens Studio Figma plugin (formerly Figma Tokens). It lets you:

• Define tokens directly in Figma
• Sync tokens to GitHub/GitLab
• Transform tokens with Style Dictionary

Pros: Designer-controlled, version controlled, powerful

Cons: Complex setup, requires designer buy-in, transformation pipeline needed

Manual Export + Style Dictionary

Some teams export design values manually (or via Figma API) and use Style Dictionary to transform them:

// tokens.json (source)
{
  "color": {
    "primary": { "value": "#3b82f6" }
  }
}

// Generated CSS
:root {
  --color-primary: #3b82f6;
}

// Generated iOS Swift
enum Color {
  static let primary = UIColor(hex: "#3b82f6")
}

Pros: Platform-agnostic, highly customizable

Cons: Manual maintenance, developer-owned (designers don't see it)

Figma Variables (Native)

Figma's native Variables feature (released 2023) adds token-like functionality directly to Figma:

• Define color, number, string, and boolean variables
• Create modes (light/dark, brand variants)
• Export via Figma API or plugins

Pros: Native to Figma, no plugins needed

Cons: Limited to Figma ecosystem, export requires development

JSON Token Format Standards

The Design Tokens Community Group is working on a standard JSON format. It looks like this:

{
  "color": {
    "primary": {
      "$value": "#3b82f6",
      "$type": "color",
      "$description": "Primary brand color"
    },
    "background": {
      "$value": "{color.neutral.50}",
      "$type": "color"
    }
  },
  "spacing": {
    "md": {
      "$value": "16px",
      "$type": "dimension"
    }
  }
}

Key features: $value for values, $type for type info, references via {path.to.token}.

Developer vs Designer Perspectives

Designer Perspective

• "I need to see my changes reflected in the app"
• "Token naming should match how I think about design"
• "I don't want to learn Git or JSON"
• "The source of truth should be in Figma"

Developer Perspective

• "I need values in formats my code can use"
• "Token naming should match our CSS conventions"
• "I don't want to wait for design updates"
• "The source of truth should be in code"

The disconnect is real. Neither side is wrong—they have different needs and workflows.

tokens.json Compatibility

For teams using Tokens Studio or similar tools, here's what compatibility looks like:

// Tokens Studio format
{
  "global": {
    "colors": {
      "primary": {
        "value": "#3b82f6",
        "type": "color"
      }
    }
  }
}

// PickCSS tokens.json format
{
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#64748b"
  },
  "spacing": {
    "1": "0.25rem",
    "2": "0.5rem"
  }
}

Most tools can import either format. The key is consistency within your team.

An Alternative Workflow: Developer-First

Here's a controversial take: maybe Figma shouldn't be the source of truth.

For many teams, especially small ones or developer-heavy teams, a developer-first workflow makes more sense:

1. Developer creates tokens (via PickCSS or manually)
2. Tokens are the source of truth (in code)
3. Designer uses tokens as reference (or imports them to Figma)
4. Changes go code-first, Figma follows

This flips the traditional model but works better when:

• You don't have a dedicated design team
• Developers are making most design decisions
• Speed matters more than perfect designer workflows
• You're using AI coding assistants (they need code, not Figma)

PickCSS as Alternative Workflow

PickCSS takes the developer-first approach:

1. Create tokens visually - no Figma required
2. Export to code - CSS, Tailwind, TypeScript
3. Export to JSON - for Figma import if needed
4. AI-ready - includes skill files for Claude Code/Codex

You get design tokens without the Figma dependency or complex toolchain.

Which Approach Is Right?

Getting Started

Skip the Figma-to-code pipeline complexity. Create production-ready tokens directly, export to JSON for Figma if you need it.

Create your design tokens in minutes, not sprints.