From ork
Facilitates Figma-to-code handoff with variables-to-tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping, and Applitools visual regression. Use for design-dev workflows and UI validation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ork:figma-design-handoffThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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 regr...
references/applitools-figma-plugin.mdreferences/design-dev-communication.mdreferences/figma-to-code-workflow.mdrules/_sections.mdrules/_template.mdrules/figma-auto-layout.mdrules/figma-component-specs.mdrules/figma-dev-mode.mdrules/figma-variables-tokens.mdrules/figma-visual-regression.mdtest-cases.jsonFigma 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.
| 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
# 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' }],
},
},
};
The design-to-code pipeline follows five stages:
┌─────────────┐ ┌──────────────┐ ┌───────────────┐
│ 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)│
└─────────────┘ └──────────────┘ └───────────────┘
Each rule is loaded on-demand from the rules/ directory:
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 |
// 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:
| 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 |
| 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 |
ork:design-system-tokens — W3C token architecture and Style Dictionary transformsork:ui-components — shadcn/ui and Radix component patternsork:accessibility — WCAG compliance for components extracted from Figmanpx claudepluginhub yonatangross/orchestkit --plugin orkSyncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.
Automates design handoff from Figma to code: extracts tokens, maps components, detects drift, and generates implementation plans. Reduces handoff time from hours to minutes.
Export Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Works on any Figma plan via Plugin API.