Figma Design Handoff

Figma dominates design tooling in 2026, with the majority of product teams using it as their primary design tool. A structured handoff workflow eliminates design drift — the gap between what designers create and what developers build. This skill covers the full pipeline: Figma Variables to design tokens, component spec extraction, Dev Mode inspection, Auto Layout to CSS mapping, and visual regression testing.

Quick Reference

Rule File Impact When to Use

Figma Variables & Tokens rules/figma-variables-tokens.md

CRITICAL Converting Figma Variables to W3C design tokens JSON

Component Specs rules/figma-component-specs.md

HIGH Extracting component props, variants, states from Figma

Dev Mode Inspection rules/figma-dev-mode.md

HIGH Measurements, spacing, typography, asset export

Auto Layout → CSS rules/figma-auto-layout.md

HIGH Mapping Auto Layout to Flexbox/Grid

Visual Regression rules/figma-visual-regression.md

MEDIUM Comparing production UI against Figma designs

Total: 5 rules across 1 category

Quick Start

1. Export Figma Variables → tokens.json (using Figma REST API)

curl -s -H "X-Figma-Token: $FIGMA_TOKEN"
"https://api.figma.com/v1/files/$FILE_KEY/variables/local"
| node scripts/figma-to-w3c-tokens.js > tokens/figma-raw.json

2. Transform with Style Dictionary

npx style-dictionary build --config sd.config.js

3. 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' }], }, }, };

Handoff Workflow

The design-to-code pipeline follows five stages:

• Design in Figma — Designer creates components with Variables, Auto Layout, and proper naming

• Extract Specs — Use Dev Mode to inspect spacing, typography, colors, and export assets

• Export Tokens — Figma Variables → W3C tokens JSON via REST API or plugin

• Build Components — Map Auto Layout to CSS Flexbox/Grid, apply tokens, implement variants

• Visual QA — Compare production screenshots against Figma frames with Applitools

┌─────────────┐ ┌──────────────┐ ┌───────────────┐ │ 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)│ └─────────────┘ └──────────────┘ └───────────────┘

Rules

Each rule is loaded on-demand from the rules/ directory:

Auto Layout to CSS Mapping

Quick reference for the most common mappings:

Figma Auto Layout CSS Equivalent Tailwind Class

Direction: Horizontal flex-direction: row

flex-row

Direction: Vertical flex-direction: column

flex-col

Gap: 16 gap: 16px

gap-4

Padding: 16 padding: 16px

p-4

Padding: 16, 24 padding: 16px 24px

py-4 px-6

Align: Center align-items: center

items-center

Justify: Space between justify-content: space-between

justify-between

Fill container flex: 1 1 0%

flex-1

Hug contents width: fit-content

w-fit

Fixed width: 200 width: 200px

w-[200px]

Min width: 100 min-width: 100px

min-w-[100px]

Max width: 400 max-width: 400px

max-w-[400px]

Wrap flex-wrap: wrap

flex-wrap

Absolute position position: absolute

absolute

Visual QA Loop

// 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();

The Applitools Figma Plugin overlays production screenshots on Figma frames to catch:

• Color mismatches (token not applied or wrong mode)

• Spacing drift (padding/margin deviations)

• Typography inconsistencies (font size, weight, line height)

• Missing states (hover, focus, disabled not implemented)

Key Decisions

Decision Recommendation

Token format W3C Design Tokens Community Group (DTCG) JSON

Token pipeline Figma REST API → Style Dictionary → CSS/Tailwind

Color format OKLCH for perceptually uniform theming

Layout mapping Auto Layout → CSS Flexbox (Grid for 2D layouts)

Visual QA tool Applitools Eyes + Figma Plugin for design-dev diff

Spec format TypeScript interfaces matching Figma component props

Mode handling Figma Variable modes → CSS media queries / class toggles

Anti-Patterns (FORBIDDEN)

• Hardcoded values: Never hardcode colors, spacing, or typography — always reference tokens

• Skipping Dev Mode: Do not eyeball measurements — use Dev Mode for exact values

• Manual token sync: Do not manually copy values from Figma — automate with REST API

• Ignoring modes: Variables with light/dark modes must map to theme toggles, not separate files

• Screenshot-only QA: Visual comparison without structured regression testing misses subtle drift

• Flat token structure: Use nested W3C DTCG format, not flat key-value pairs

References

Resource Description

references/figma-to-code-workflow.md End-to-end workflow, toolchain options

references/design-dev-communication.md PR templates, component status tracking

references/applitools-figma-plugin.md Setup, CI integration, comparison config

Related Skills

• ork:design-system-tokens — W3C token architecture and Style Dictionary transforms

• ork:ui-components — shadcn/ui and Radix component patterns

• ork:accessibility — WCAG compliance for components extracted from Figma