Figma Design Handoff

What it does

When your agent uses it

• Converting Figma designs to code
• Documenting component specs
• Setting up design-dev workflows
• Comparing production UI against Figma designs

Example prompts

• “/figma-design-handoff”

Requirements

• Node.js
• A credential in FIGMA_ACCESS_TOKEN
• A credential in FIGMA_TOKEN
• Compatibility (from SKILL.md): Claude Code 2.1.277+.
• Pre-approved tools (allowed-tools): Read, Glob, Grep, WebFetch, WebSearch

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Design in Figma — Designer creates components with Variables, Auto Layout, and proper naming
2. 2Extract Specs — Use Dev Mode to inspect spacing, typography, colors, and export assets
3. 3Export Tokens — Figma Variables → W3C tokens JSON via REST API or plugin
4. 4Build Components — Map Auto Layout to CSS Flexbox/Grid, apply tokens, implement variants
5. 5Visual QA — Compare production screenshots against Figma frames with Applitools

What it can do on your machine

Read from SKILL.md and the folder at commit e4ff8d9. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Glob
  • Grep
  • WebFetch
  • WebSearch

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • curl
  • npx

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • api.figma.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names these keys or tokens, usually read from environment variables:

  • FIGMA_TOKEN
  • FIGMA_ACCESS_TOKEN
  • FILE_KEY

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Claude Code 2.1.277+.

  From compatibility in the SKILL.md frontmatter.

Context cost

Figma Design Handoff loads about 2.7k tokens when it runs, and up to ~5.9k if it reads all its reference files. Until then it costs about 99 tokens; SKILL.md has 732 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~99

When it runs · the whole SKILL.md, loaded when a task matches

~2.7k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~5.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from yonatangross/orchestkit at commit e4ff8d9, republished under its MIT licence (© yonatangross). 732 words, ~2,701 tokens.

name

figma-design-handoff

description

Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping, and visual regression with Applitools. Use when converting Figma designs to code, documenting component specs, setting up design-dev workflows, or comparing production UI against Figma designs.

allowed-tools

Read, Glob, Grep, WebFetch, WebSearch

compatibility

Claude Code 2.1.277+.

license

MIT

user-invocable

false

disable-model-invocation

true

metadata.owner-agent

frontend-ui-developer

metadata.category

document-asset-creation

metadata.figma-mcp-tool-count

16

metadata.version

1.1.0

metadata.author

OrchestKit

metadata.complexity

medium

metadata.tags

figma, design-handoff, design-to-code, figma-variables, dev-mode, auto-layout, component-specs, visual-regression, applitools, design-tokens

// .claude/mcp-servers/figma.json — sample config
{
  "figma": {
    "command": "figma-mcp",
    "args": ["--mode=dev"],
    "env": { "FIGMA_ACCESS_TOKEN": "${FIGMA_TOKEN}" }
  }
}

# 1. Export Figma Variables (Figma REST API)
curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/variables/local" \
  > tokens/figma-local.json

# 2. Convert that response to W3C Design Tokens. This skill does NOT ship a
#    converter — the mapping (variables, modes, aliases, and the $value/$type
#    shape) is specified in rules/figma-variables-tokens.md, and the right
#    implementation depends on which collections and modes your file uses.
#    Earlier revisions of this Quick Start piped into a
#    `scripts/figma-to-w3c-tokens.js` that has never existed in this skill.
#    Result: tokens/figma-raw.json

# 3. Transform with Style Dictionary
npx style-dictionary build --config sd.config.js

# 4. Output: CSS custom properties + Tailwind theme
# tokens/
#   figma-raw.json        ← W3C Design Tokens format
#   css/variables.css     ← --color-primary: oklch(0.65 0.15 250);
#   tailwind/theme.js     ← module.exports = { colors: { primary: ... } }

// W3C Design Tokens Format (DTCG)
{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "{color.blue.600}",
      "$description": "Primary brand color"
    },
    "surface": {
      "$type": "color",
      "$value": "{color.neutral.50}",
      "$extensions": {
        "mode": {
          "dark": "{color.neutral.900}"
        }
      }
    }
  }
}

// Style Dictionary config for Figma Variables
import StyleDictionary from 'style-dictionary';

export default {
  source: ['tokens/figma-raw.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'tokens/css/',
      files: [{ destination: 'variables.css', format: 'css/variables' }],
    },
    tailwind: {
      transformGroup: 'js',
      buildPath: 'tokens/tailwind/',
      files: [{ destination: 'theme.js', format: 'javascript/module' }],
    },
  },
};

┌─────────────┐     ┌──────────────┐     ┌───────────────┐
│  Figma File  │────▶│  Dev Mode    │────▶│  tokens.json  │
│  (Variables, │     │  (Inspect,   │     │  (W3C DTCG    │
│  Auto Layout)│     │   Export)    │     │   format)     │
└─────────────┘     └──────────────┘     └───────┬───────┘
                                                  │
                                                  ▼
┌─────────────┐     ┌──────────────┐     ┌───────────────┐
│  Visual QA  │◀────│  Components  │◀────│ Style         │
│  (Applitools,│     │  (React +   │     │ Dictionary    │
│   Chromatic) │     │  Tailwind)   │     │ (CSS/Tailwind)│
└─────────────┘     └──────────────┘     └───────────────┘

<!-- load:rules/figma-variables-tokens.md -->

<!-- load:rules/figma-component-specs.md -->

<!-- load:rules/figma-dev-mode.md -->

<!-- load:rules/figma-auto-layout.md -->

<!-- load:rules/figma-visual-regression.md -->

// Applitools Eyes + Figma Plugin — CI integration
import { Eyes, Target } from '@applitools/eyes-playwright';

const eyes = new Eyes();

await eyes.open(page, 'MyApp', 'Homepage — Figma Comparison');

// Capture full page
await eyes.check('Full Page', Target.window().fully());

// Capture specific component
await eyes.check(
  'Hero Section',
  Target.region('#hero').ignoreDisplacements()
);

await eyes.close();

© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 11 other files (references) in src/skills/figma-design-handoff of yonatangross/orchestkit.

• SKILL.md
• references/applitools-figma-plugin.md
• references/design-dev-communication.md
• references/figma-to-code-workflow.md
• rules/_sections.md
• rules/_template.md
• rules/figma-auto-layout.md
• rules/figma-component-specs.md
• rules/figma-dev-mode.md
• rules/figma-variables-tokens.md
• rules/figma-visual-regression.md
• test-cases.json

Open the folder on GitHubat commit e4ff8d9