Figma 转代码

把 Figma 画板转成 React 组件而不丢失设计意图。

为什么

Figma 文件与已发布代码之间的鸿沟是设计细节死亡的地方——间距被四舍五入到最近 4px、hover 状态被忘、响应式行为被猜。有纪律的 figma-to-code 流水线用两界相同的 token（颜色、间距、圆角）保留设计师意图，设计变更即 token 变更自动传播到代码。没有它，每个组件是有损翻译，每个 PR 都离设计更远，设计师不再信任产品。目标不是从 Figma 自动生成代码（那产出不可维护输出）而是让交接成机械可评审步骤。

何时使用

设计师交第一屏时。搭 token 桥约 1-2 小时。开发者自设计的内部工具可跳过。

如何做

1. 装 Figma Dev Mode / Figma Tokens 插件，导出 token 为 JSON
   - 把 Figma 样式映射到 CSS 自定义属性或 Tailwind config
   - 用 Style Dictionary 或 token-transformer 转你的格式

2. 建立组件映射：Figma 组件 → React 组件
   - 在共享表格或 Figma 页文档化："Button" → <Button>
   - Figma 组件名与 React 组件名相同

3. 从 Figma Dev Mode 拷结构，再重构为你的组件
   - Dev Mode 给布局（flex、gap、padding）——粘贴为起点
   - 用设计系统组件（Button、Card、Input）替换原始 div

4. 并排验证：一窗 Figma，一窗 Storybook
   - 像素 diff 间距、颜色和排版；修差异
   - 用 Figma "Dev Mode" 测量，非目测

5. 加视觉回归测试（Chromatic、Percy）抓漂移
   - Storybook 里快照组件；无 PR 变更则 CI 失败

示例

// tokens.json（来自 Figma Tokens 插件）
{ "color": { "primary": { "500": "#6366f1" } }, "spacing": { "4": "1rem" } }

// tailwind.config.ts——token 流入 Tailwind
import tokens from "./tokens.json";
export default {
  theme: {
    extend: {
      colors: { spark: { 500: tokens.color.primary[500] } },
      spacing: { 4: tokens.spacing[4] },
    },
  },
};

// 组件——用 token，非硬编码值
export function Button({ children }: { children: React.ReactNode }) {
  return <button className="bg-spark-500 px-4 py-2 rounded-lg text-white">{children}</button>;
}

常见问题

⚠从 Figma 硬编码 hex 值而非用 token，品牌色变更要改 200 文件。
⚠目测间距而非用 Figma 测量，一切差 1-2px 看起来'差不多对'。
⚠从零搭 auto-layout 而非拷 Figma flex 属性，响应式行为不同。
⚠无视觉回归测试，重构'意外'改按钮圆角，一个月没人注意。

最佳实践

✓token 保持单一事实源（Figma 或 tokens.json），从它生成所有其他格式。
✓IDE 里用 Figma Dev Mode MCP server 拉测量无需切换上下文。
✓设计师在场评审设计转代码 PR——他们抓开发者评审者漏的意图丢失。
✓Storybook 里快照每组件变体，视觉回归覆盖所有状态非仅默认。