figma-design-handoff

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma Design Handoff

Figma设计交付

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.

在2026年，Figma主导了设计工具领域，大多数产品团队将其作为主要设计工具。结构化的交付工作流可以消除设计偏差——即设计师创作内容与开发人员实现内容之间的差距。本技能涵盖完整流水线：Figma Variables转设计令牌、组件规范提取、Dev Mode检查、Auto Layout转CSS映射，以及视觉回归测试。

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

规则	文件	影响级别	适用场景
Figma Variables & Tokens	`rules/figma-variables-tokens.md`	关键	将Figma Variables转换为W3C设计令牌JSON
组件规范	`rules/figma-component-specs.md`	高	从Figma提取组件属性、变体、状态
Dev Mode检查	`rules/figma-dev-mode.md`	高	测量、间距、排版、资源导出
Auto Layout → CSS	`rules/figma-auto-layout.md`	高	将Auto Layout映射到Flexbox/Grid
视觉回归测试	`rules/figma-visual-regression.md`	中	对比生产环境UI与Figma设计

总计：1个分类下的5条规则

Quick Start

快速开始

bash

undefined

bash

undefined

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

1. 导出Figma Variables → tokens.json（使用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

2. 使用Style Dictionary转换

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

3. Output: CSS custom properties + Tailwind theme

3. 输出结果：CSS自定义属性 + Tailwind主题

tokens/

figma-raw.json ← W3C Design Tokens format

figma-raw.json ← W3C设计令牌格式

css/variables.css ← --color-primary: oklch(0.65 0.15 250);

tailwind/theme.js ← module.exports = { colors: { primary: ... } }


```json
// 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}"
        }
      }
    }
  }
}

typescript

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


```json
// W3C设计令牌格式（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}"
        }
      }
    }
  }
}

typescript

// 适配Figma Variables的Style Dictionary配置
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)│
└─────────────┘     └──────────────┘     └───────────────┘

设计转代码流水线分为五个阶段：

在Figma中设计 — 设计师使用Variables、Auto Layout和规范命名创建组件
提取规范 — 使用Dev Mode检查间距、排版、颜色，并导出资源
导出令牌 — 通过REST API或插件将Figma Variables转换为W3C令牌JSON
构建组件 — 将Auto Layout映射到CSS Flexbox/Grid，应用令牌，实现变体
视觉QA — 使用Applitools对比生产环境截图与Figma帧

┌─────────────┐     ┌──────────────┐     ┌───────────────┐
│  Figma文件  │────▶│  Dev Mode    │────▶│  tokens.json  │
│  (Variables,│     │  (检查、导出) │     │  (W3C DTCG格式)│
│  Auto Layout)│     │              │     │               │
└─────────────┘     └──────────────┘     └───────┬───────┘
                                                  │
                                                  ▼
┌─────────────┐     ┌──────────────┐     ┌───────────────┐
│  视觉QA     │◀────│  组件实现    │◀────│ Style         │
│  (Applitools,│     │  (React +    │     │ Dictionary    │
│   Chromatic) │     │  Tailwind)   │     │ (CSS/Tailwind)│
└─────────────┘     └──────────────┘     └───────────────┘

Rules

规则

Each rule is loaded on-demand from the

rules/

directory:

每条规则按需从

rules/

目录加载：

Auto Layout to CSS Mapping

Auto Layout转CSS映射

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`

最常用映射的快速参考：

Figma Auto Layout	CSS等效写法	Tailwind类
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

视觉QA循环

typescript

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

typescript

// Applitools Eyes + Figma插件 — CI集成
import { Eyes, Target } from '@applitools/eyes-playwright';

const eyes = new Eyes();

await eyes.open(page, 'MyApp', '首页 — Figma对比');

// 捕获全页
await eyes.check('完整页面', Target.window().fully());

// 捕获特定组件
await eyes.check(
  'Hero区域',
  Target.region('#hero').ignoreDisplacements()
);

await eyes.close();

Applitools Figma插件将生产环境截图叠加在Figma帧上，可检测以下问题：

颜色不匹配（未应用令牌或模式错误）
间距偏差（内边距/外边距不一致）
排版不一致（字体大小、字重、行高）
缺失状态（未实现hover、focus、disabled状态）

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

决策	推荐方案
令牌格式	W3C设计令牌社区组（DTCG）JSON
令牌流水线	Figma REST API → Style Dictionary → CSS/Tailwind
颜色格式	使用OKLCH实现感知均匀的主题
布局映射	Auto Layout → CSS Flexbox（Grid用于二维布局）
视觉QA工具	Applitools Eyes + Figma插件进行设计-开发差异对比
规范格式	与Figma组件属性匹配的TypeScript接口
模式处理	Figma Variable模式 → CSS媒体查询 / 类切换

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

硬编码值：永远不要硬编码颜色、间距或排版——始终引用令牌
跳过Dev Mode：不要目测测量——使用Dev Mode获取精确值
手动同步令牌：不要从Figma手动复制值——使用REST API自动化
忽略模式：带有明暗模式的Variables必须映射到主题切换，而非单独文件
仅截图QA：仅视觉对比而无结构化回归测试会遗漏细微偏差
扁平令牌结构：使用嵌套的W3C DTCG格式，而非扁平键值对

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

资源	描述
references/figma-to-code-workflow.md	端到端工作流、工具链选项
references/design-dev-communication.md	PR模板、组件状态跟踪
references/applitools-figma-plugin.md	配置、CI集成、对比设置

figma-design-handoff

Original

Translation

Figma Design Handoff

Figma设计交付

Quick Reference

快速参考

Quick Start

快速开始

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

1. 导出Figma Variables → tokens.json（使用Figma REST API）

2. Transform with Style Dictionary

2. 使用Style Dictionary转换

3. Output: CSS custom properties + Tailwind theme

3. 输出结果：CSS自定义属性 + Tailwind主题

tokens/

tokens/

figma-raw.json ← W3C Design Tokens format

figma-raw.json ← W3C设计令牌格式

css/variables.css ← --color-primary: oklch(0.65 0.15 250);

css/variables.css ← --color-primary: oklch(0.65 0.15 250);

tailwind/theme.js ← module.exports = { colors: { primary: ... } }

tailwind/theme.js ← module.exports = { colors: { primary: ... } }

Handoff Workflow

交付工作流

Rules

规则

Auto Layout to CSS Mapping

Auto Layout转CSS映射

Visual QA Loop

视觉QA循环

Key Decisions

关键决策

Anti-Patterns (FORBIDDEN)

反模式（禁止）

References

参考资料

Related Skills

相关技能