Claude Code Design Token Automation (2026)

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 smooth pipeline that transforms design decisions into code automatically. This guide walks through the full setup: exporting tokens from Figma, transforming them into CSS, JavaScript, and TypeScript, and wiring everything into a CI/CD pipeline so your codebase stays in sync with your design file without manual work.

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.

Variables in Figma are organized into collections and can hold four types of values: color, number, string, and boolean. You can define multiple modes per collection. for example, a “Theme” collection with a “light” mode and a “dark” mode. When exported as JSON, these map cleanly to token structures that your build tools can consume.

Token Naming Conventions Matter

Before you export anything, naming consistency in Figma is the most important investment you can make. Token names become CSS variable names and TypeScript identifiers, so ambiguous or inconsistent names in Figma become ambiguous or inconsistent code.

Figma variable name Resulting CSS variable Quality
blue-5 --blue-5 Poor. not semantic
Brand/Primary --brand-primary Good. semantic namespace
color/text/primary --color-text-primary Best. full intent expressed
spacing/4 --spacing-4 Poor. ambiguous unit
spacing/base-4 --spacing-base-4 Better. but still no unit
spacing/16px --spacing-16px Good. explicit unit

Establish a naming convention before your design system grows. Renaming tokens after they are referenced across hundreds of components is expensive on both the design and engineering sides.

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

Beyond those raw capabilities, the real value of using Claude Code in a token pipeline is the ability to handle edge cases in natural language. When Token Studio exports a malformed JSON structure because a designer renamed a collection mid-sprint, you can describe the problem to Claude Code and get a corrected transform script without hunting through documentation. Claude Code becomes the glue between your design tooling and your build system.

Setting Up the Workflow

Step 1: Export Figma Variables

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

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

The exported JSON follows the W3C Design Token Community Group (DTCG) spec format, which looks like this:

{
 "color": {
 "brand": {
 "primary": { "value": "#0066CC", "type": "color" },
 "secondary": { "value": "#FF6B35", "type": "color" }
 },
 "text": {
 "primary": { "value": "#1A1A1A", "type": "color" },
 "secondary": { "value": "#6B6B6B", "type": "color" },
 "inverse": { "value": "#FFFFFF", "type": "color" }
 }
 },
 "spacing": {
 "xs": { "value": "4", "type": "dimension" },
 "sm": { "value": "8", "type": "dimension" },
 "md": { "value": "16", "type": "dimension" },
 "lg": { "value": "24", "type": "dimension" },
 "xl": { "value": "40", "type": "dimension" }
 },
 "typography": {
 "size": {
 "body": { "value": "16", "type": "dimension" },
 "heading-lg": { "value": "32", "type": "dimension" }
 }
 }
}

Save this file as tokens/design-tokens.json in your project.

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

Your output directory will hold the generated artifacts: CSS custom properties, JavaScript constants, TypeScript definitions, and optionally Tailwind config extensions. You commit the tokens/ directory (the source of truth from Figma) and also commit output/ (the generated artifacts), so your application code can import from output/ directly without running the build step at runtime.

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"
 lines = []
 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(".", "-").strip("-")
 token_type = value.get("type", "")
 raw_value = value["value"]
 # Add px unit for dimension tokens
 if token_type == "dimension" and str(raw_value).isdigit():
 formatted_value = f"{raw_value}px"
 else:
 formatted_value = raw_value
 lines.append(f" {var_name}: {formatted_value};")
 else:
 process_token(value, f"{prefix}-{key}" if prefix else key)
 process_token(tokens)
 css_output += "\n".join(lines)
 css_output += "\n}\n"
 return css_output
def transform_to_js_constants(tokens):
 """Transform tokens to JavaScript constants"""
 js_output = "// Auto-generated from Figma Variables. do not edit manually\n"
 js_output += "export const tokens = "
 js_output += json.dumps(tokens, indent=2)
 js_output += ";\n"
 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)
 print("Generated output/tokens.css")
 js_constants = transform_to_js_constants(tokens)
 with open("output/tokens.js", "w") as f:
 f.write(js_constants)
 print("Generated output/tokens.js")
 print("Tokens transformed successfully!")
if __name__ == "__main__":
 main()

The key improvement over a naive transformer is the dimension type handling. Without it, spacing values like 16 become --spacing-md: 16; which is invalid CSS. The script checks the token type and appends px for raw numeric dimension values.

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
 if [ -f "output/tokens.ts" ]; then
 echo "TypeScript definitions generated"
 git add output/tokens.ts
 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"
 exit 1
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

On macOS, replace inotifywait with fswatch:

fswatch -o tokens/design-tokens.json | while read; do
 echo "Token file changed, regenerating..."
 python3 scripts/transform_tokens.py
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);

The generated tokens.ts file gives you autocomplete in your editor for every token path. When a designer removes a token from Figma, TypeScript will flag every usage site that breaks. your build fails loudly instead of silently shipping a missing CSS variable.

Advanced: Generating a Tailwind Config Extension

If your project uses Tailwind CSS, you can generate a tailwind.config.js extension directly from your tokens:

def transform_to_tailwind_config(tokens):
 """Generate a Tailwind CSS theme extension from tokens"""
 colors = {}
 spacing = {}
 def extract_colors(obj, prefix=""):
 for key, value in obj.items():
 if isinstance(value, dict):
 if "value" in value and value.get("type") == "color":
 path = f"{prefix}.{key}" if prefix else key
 # Set nested keys using dotted path
 parts = path.split(".")
 target = colors
 for part in parts[:-1]:
 target = target.setdefault(part, {})
 target[parts[-1]] = value["value"]
 elif isinstance(value, dict) and "value" not in value:
 extract_colors(value, f"{prefix}.{key}" if prefix else key)
 if "color" in tokens:
 extract_colors(tokens["color"])
 if "spacing" in tokens:
 for key, value in tokens["spacing"].items():
 if isinstance(value, dict) and "value" in value:
 spacing[key] = f"{value['value']}px"
 config = {
 "theme": {
 "extend": {
 "colors": colors,
 "spacing": spacing
 }
 }
 }
 output = "// Auto-generated from Figma Variables. do not edit manually\n"
 output += f"module.exports = {json.dumps(config, indent=2)};\n"
 return output

Save this as output/tailwind-tokens.config.js and import it from your main tailwind.config.js:

const tokenExtension = require('./output/tailwind-tokens.config.js');
module.exports = {
 content: ['./src//*.{js,ts,jsx,tsx}'],
 theme: {
 extend: {
 ...tokenExtension.theme.extend
 }
 }
};

Now text-brand-primary and bg-color-text-inverse are real Tailwind classes, derived directly from your Figma file.

Integrating into CI/CD

The full power of this pipeline emerges when you automate it in CI. Add a GitHub Actions workflow that runs on every PR:

name: Validate Design Tokens
on:
 pull_request:
 paths:
 - 'tokens/'
jobs:
 transform-tokens:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-python@v5
 with:
 python-version: '3.11'
 - name: Transform tokens
 run: python3 scripts/transform_tokens.py
 - name: Check for uncommitted changes
 run: |
 git diff --exit-code output/
 echo "Token outputs are up to date"

This workflow fails the PR if a designer exports new tokens from Figma and opens a PR without also running the transform script. It enforces the invariant that output/ always reflects tokens/ exactly.

Best Practices

  1. Version Control Tokens: Store your raw Figma exports in Git alongside the generated output. This gives you a clear history of every design decision and lets you git diff to see what changed when a designer exports a new version.
  2. Semantic Naming: Use meaningful names like color-primary-500 instead of blue-5. The semantic name survives a rebrand; blue-5 does not.
  3. Automate CI/CD: Integrate token processing into your build pipeline so stale generated files are caught before they reach production.
  4. Document Changes: Keep a CHANGELOG for token updates, especially breaking changes like token renames that require a find-and-replace across your component library.
  5. Separate raw values from semantic aliases: Define raw values (color-blue-500: #0066CC) separately from semantic uses (color-brand-primary: {color.blue.500}). This makes rebrand changes a single-line edit.

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. Once the pipeline is running, the real dividend is organizational: designers can make changes in Figma with confidence that they will land in code correctly, and engineers stop manually translating hex codes from Slack messages into CSS files.

The naming convention investment at the start of the project pays off every time you add a new token category. A well-named, consistently structured token file makes every downstream transform. CSS, TypeScript, Tailwind, iOS, Android. a simple traversal rather than a bespoke parsing problem.

I'm a solo developer in Vietnam. 50K Chrome extension users. $500K+ on Upwork. 5 Claude Max subscriptions running agent fleets in parallel. These are my actual CLAUDE.md templates, orchestration configs, and prompts. Not a course. Not theory. The files I copy into every project before I write a line of code. **[See what's inside →](https://zovo.one/lifetime?utm_source=ccg&utm_medium=cta-default&utm_campaign=claude-code-design-token-automation-from-figma-variables)** $99 once. Free forever. 47/500 founding spots left.

Related Reading

Built by theluckystrike. More at zovo.one

Find the right skill → Browse 155+ skills in our Skill Finder.

See Also

Configure MCP → Build your server config with our MCP Config Generator.

Try it: Estimate your monthly spend with our Cost Calculator.