Claude Code Design Token Automation from Figma Variables

Design tokens have become the backbone of modern design systems, enabling teams to maintain consistency across products. When combined with Claude Code’s powerful automation capabilities and Figma’s Variables feature, you can create a seamless pipeline that transforms design decisions into code automatically.

What Are Figma Variables?

Figma Variables (formerly Design Tokens) allow designers to define semantic values like colors, typography, spacing, and more that can be referenced throughout designs. These variables bridge the gap between design and development by providing a single source of truth.

Why Automate with Claude Code?

Claude Code excels at:

Reading and parsing JSON, YAML, and other data formats
Executing shell commands to run build tools
Generating code in multiple languages
Monitoring file changes for automated workflows

Setting Up the Workflow

Step 1: Export Figma Variables

First, install the Token Studio plugin in Figma to export your variables:

Open your Figma file with variables defined
Go to Plugins → Token Studio
Export tokens as JSON using the export option

Step 2: Create the Claude Code Project

Set up your project structure:

mkdir design-token-automation
cd design-token-automation
mkdir -p tokens scripts output

Step 3: Write the Token Processor Script

Create a Python script that transforms Figma tokens into usable code:

#!/usr/bin/env python3
import json
import os
from pathlib import Path

def load_tokens(token_file):
    """Load design tokens from JSON export"""
    with open(token_file, 'r') as f:
        return json.load(f)

def transform_to_css_variables(tokens):
    """Transform tokens to CSS custom properties"""
    css_output = ":root {\n"
    
    def process_token(obj, prefix=""):
        for key, value in obj.items():
            if isinstance(value, dict):
                if "value" in value:
                    var_name = f"--{prefix}-{key}".replace(".", "-")
                    css_output += f"  {var_name}: {value['value']};\n"
                else:
                    process_token(value, f"{prefix}-{key}")
    
    process_token(tokens)
    css_output += "}\n"
    return css_output

def transform_to_js_constants(tokens):
    """Transform tokens to JavaScript constants"""
    js_output = "export const tokens = "
    js_output += json.dumps(tokens, indent=2)
    return js_output

def main():
    tokens = load_tokens("tokens/design-tokens.json")
    
    css_vars = transform_to_css_variables(tokens)
    with open("output/tokens.css", "w") as f:
        f.write(css_vars)
    
    js_constants = transform_to_js_constants(tokens)
    with open("output/tokens.js", "w") as f:
        f.write(js_constants)
    
    print("Tokens transformed successfully!")

if __name__ == "__main__":
    main()

Step 4: Create the Claude Code Automation Script

Now create a script that Claude Code can run:

#!/bin/bash

# Design Token Automation Script
# Run with: bash process-tokens.sh  # then describe results to claude

echo "🔄 Starting design token automation..."

# Step 1: Check for new tokens
if [ -f "tokens/design-tokens.json" ]; then
    echo "📦 Found design tokens, processing..."
    
    # Run the transformation
    python3 scripts/transform_tokens.py
    
    # Check if output was generated
    if [ -f "output/tokens.css" ]; then
        echo "✅ CSS variables generated"
        git add output/tokens.css
    fi
    
    if [ -f "output/tokens.js" ]; then
        echo "✅ JavaScript constants generated"
        git add output/tokens.js
    fi
    
    # Commit changes
    git commit -m "Update design tokens $(date +%Y-%m-%d)"
    echo "✅ Token automation complete!"
else
    echo "⚠️ No tokens found at tokens/design-tokens.json"
fi

Step 5: Set Up File Watching

Use Claude Code’s ability to monitor file changes:

# Watch for changes in the tokens directory
while true; do
    inotifywait -e modify tokens/design-tokens.json 2>/dev/null || sleep 5
    
    echo "🔔 Detected token changes, re-processing..."
    python3 scripts/transform_tokens.py
    
    # Optionally auto-commit
    git add -A
    git commit -m "Auto-update: Design tokens modified" 2>/dev/null || true
done

Advanced: Type-Safe Token Generation

For TypeScript projects, generate type definitions:

// scripts/generate-types.ts
import { writeFileSync } from 'fs';

interface DesignToken {
  value: string;
  type: string;
}

interface TokenGroup {
  [key: string]: DesignToken | TokenGroup;
}

function generateTypeDefs(tokens: TokenGroup, prefix = ''): string {
  let output = 'export const tokens = {\n';
  
  for (const [key, value] of Object.entries(tokens)) {
    if ('value' in value) {
      output += `  ${key}: '${value.value}',\n`;
    } else {
      output += `  ${key}: {\n`;
      output += generateTypeDefs(value as TokenGroup, `${prefix}${key}-`);
      output += '  },\n';
    }
  }
  
  output += '};\n';
  return output;
}

// Usage with your token file
const tokens = require('../tokens/design-tokens.json');
const typeDefs = generateTypeDefs(tokens);
writeFileSync('output/tokens.ts', typeDefs);

Best Practices

Version Control Tokens: Store your raw Figma exports in Git
Semantic Naming: Use meaningful names like color-primary-500 instead of blue-5
Automate CI/CD: Integrate token processing into your build pipeline
Document Changes: Keep a CHANGELOG for token updates

Conclusion

By combining Claude Code’s automation capabilities with Figma Variables, you create a powerful design-to-code pipeline that reduces manual work and ensures consistency. The key is establishing clear workflows and using tools that bridge the design-development gap effectively.

Start small with basic color and typography tokens, then expand to spacing, shadows, and more complex token structures as your design system matures.

Built by theluckystrike — More at zovo.one