Figma To Code — 设计稿转生产代码

概述

Figma To Code 解决的是前端开发中最耗时的问题：把设计师的视觉意图精确还原到代码中。 传统流程中，设计师在 Figma 里画好界面，前端开发者对着截图逐像素比对——间距差几个像素、颜色不够准确、字体大小偏差，反复调整，浪费大量时间。

本技能让 WorkBuddy 直接读取 Figma 设计稿的结构化数据，提取设计令牌（色彩、间距、字体），映射到组件模式，生成接近生产水准的前端代码——设计还原精度从手动实现的 70-80% 提升到 95%+。

> 建议与 frontend-design-pro 配合使用：Figma To Code 负责设计还原精度，Frontend Design Pro 负责整体视觉质量。两者互补效果显著。

工作原理

Figma 设计稿
    ↓
1. Figma API 读取节点结构和属性
    ↓
2. 提取设计令牌（色彩、间距、字体、圆角、阴影）
    ↓
3. 语义化映射（识别按钮、卡片、表单等组件模式）
    ↓
4. 生成响应式代码（React/Tailwind/Vue/Svelte）
    ↓
5. 设计还原度验证（关键视觉属性逐项比对）
    ↓
生产级前端代码

快速上手

配置 Figma API 访问

# 设置 Figma Personal Access Token
export FIGMA_ACCESS_TOKEN=figd_your_token_here

# 或者写入配置文件
# .figma-to-code.yaml
figma:
  access_token: figd_your_token_here
  default_framework: "react-tailwind"
  design_token_output: "src/styles/design-tokens.json"

获取 Token：在 Figma 中点击 Settings → Personal access tokens → Generate new token

从 Figma 链接生成代码

# 提供 Figma 文件链接
"帮我根据这个 Figma 设计实现登录页面：
https://www.figma.com/design/ABC123/MyProject?node-id=456-789"

# WorkBuddy 自动：
# 1. 调用 Figma API 获取设计数据
# 2. 提取设计令牌
# 3. 语义化分析组件结构
# 4. 生成完整前端代码

从本地设计文件生成代码

如果已有导出的 Figma 数据：

"基于 design-data/ 目录下的 Figma JSON 数据实现组件"

设计令牌提取

色彩系统

WorkBuddy 从 Figma 中提取所有使用的颜色，自动归类并生成设计令牌：

// src/styles/design-tokens.json
{
  "colors": {
    "primary": {
      "50": "#eff6ff",
      "100": "#dbeafe",
      "500": "#3b82f6",
      "600": "#2563eb",
      "700": "#1d4ed8",
      "900": "#1e3a8a"
    },
    "semantic": {
      "success": "#10b981",
      "warning": "#f59e0b",
      "error": "#ef4444",
      "info": "#3b82f6"
    },
    "neutral": {
      "50": "#f9fafb",
      "100": "#f3f4f6",
      "500": "#6b7280",
      "700": "#374151",
      "900": "#111827"
    }
  }
}

自动补色：如果 Figma 中只用了 primary-500，WorkBuddy 会自动补全完整的色阶（50-900），确保后续扩展有足够的色彩层级。

间距系统

从 Figma 中提取的间距值会自动归入 8px 基准网格：

不规则值处理：如果 Figma 中有 13px 或 7px 等不规则间距，WorkBuddy 会提示并建议归入最近的网格值（如 13px → 12px 或 16px），保持间距系统的整洁。

字体排版

{
  "typography": {
    "fontFamily": {
      "primary": "Inter",
      "display": "Inter Tight"
    },
    "heading": {
      "h1": { "size": "36px", "weight": 700, "lineHeight": 1.2 },
      "h2": { "size": "30px", "weight": 700, "lineHeight": 1.25 },
      "h3": { "size": "20px", "weight": 600, "lineHeight": 1.4 },
      "body": { "size": "16px", "weight": 400, "lineHeight": 1.6 },
      "small": { "size": "14px", "weight": 400, "lineHeight": 1.5 },
      "caption": { "size": "12px", "weight": 500, "lineHeight": 1.4 }
    }
  }
}

圆角和阴影

{
  "borderRadius": {
    "sm": "4px",
    "default": "8px",
    "lg": "12px",
    "xl": "16px",
    "full": "9999px"
  },
  "shadows": {
    "sm": "0 1px 2px rgba(0,0,0,0.05)",
    "default": "0 1px 3px rgba(0,0,0,0.1)",
    "md": "0 4px 6px rgba(0,0,0,0.1)",
    "lg": "0 10px 15px rgba(0,0,0,0.1)"
  }
}

组件映射

语义化识别

WorkBuddy 自动将 Figma 节点映射为语义化组件：

映射配置

# .figma-to-code.yaml
mapping:
  # 自定义组件映射
  components:
    - figma_name: "CustomButton"
      component: "Button"
      variants:
        - figma_name: "CustomButton/Primary"
          variant: "primary"
        - figma_name: "CustomButton/Secondary"
          variant: "secondary"

  # 强制映射（当自动识别不准确时）
  force:
    - figma_name: "HeroBanner"
      component: "HeroSection"

组件变体处理

Figma 的组件变体（Variants）会被映射为代码中的变体系统：

// Figma 变体：Button { Primary, Secondary, Danger }
// 代码映射
function Button({ variant = "primary", size = "md", children }) {
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "border border-gray-300 bg-white text-gray-700",
    danger: "bg-red-600 text-white hover:bg-red-700",
  };

  return (
    <button className={`${variants[variant]} rounded-lg px-4 py-2.5 ...`}>
      {children}
    </button>
  );
}

代码生成

框架选择

生成的代码结构

src/
├── styles/
│   ├── design-tokens.json       # 从 Figma 提取的设计令牌
│   └── globals.css              # 全局样式（基于令牌）
├── components/
│   ├── ui/
│   │   ├── Button.tsx           # 基础 UI 组件
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   └── Table.tsx
│   │   └── Navbar.tsx
│   ├── sections/
│   │   ├── HeroSection.tsx      # 页面区块组件
│   │   ├── FeatureSection.tsx
│   │   └── PricingSection.tsx
│   └── pages/
│       ├── LoginPage.tsx        # 页面组件
│       └── DashboardPage.tsx
├── hooks/
│   └── useDesignTokens.ts       # 设计令牌 Hook
└── App.tsx                      # 页面组装

设计还原度验证

WorkBuddy 生成代码后，会自动执行设计还原度验证：

$figma-verify

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 设计还原度报告：登录页面
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

## 关键视觉属性
✅ 主色 blue-600：Figma #2563eb → 代码 #2563eb（100% 匹配）
✅ 标题字号 36px：Figma 36 → 代码 text-4xl/36px（100% 匹配）
✅ 圆角 8px：Figma 8 → 代码 rounded-lg/8px（100% 匹配）
⚠️ 间距 card-padding：Figma 20px → 代码 p-5/20px（100% 匹配）
     建议：归入 24px（p-6）以保持间距网格一致性
✅ 阴影 card-shadow：Figma shadow-default → 代码 shadow-sm（95% 匹配）

## 总体还原度
精确匹配：92%
近似匹配：8%
不匹配：0%

## 建议
- 将 20px padding 调整为 24px 以对齐间距系统
- 深色模式缺少 Figma 变体映射

设计稿规范建议

Figma 设计稿越规范，生成的代码质量越高：

✅ 好的设计稿特征

• 组件使用了 Figma 的 Components 和 Variants 功能
• 使用了 Auto Layout（而非手动定位）
• 图层命名清晰（Button/Primary 而非 Rectangle 42）
• 设计令牌使用了 Figma Variables 或 Styles
• 所有文字节点都有明确的样式定义

❌ 常见问题

• 大量手动定位元素（WorkBuddy 会提示改为 Auto Layout）
• 图层命名混乱（WorkBuddy 会推断语义但精度降低）
• 未使用 Figma 组件（生成的代码可能有重复模式）
• 间距值不在网格系统上（WorkBuddy 会建议归入网格）

最佳实践

1. 先提取令牌再生成组件

不要直接从设计稿跳到代码。先提取设计令牌，确认令牌系统合理，再基于令牌生成组件——这样保证了全局一致性。

2. 逐步还原

先实现页面骨架和布局，再填充细节样式。一次性还原整个页面容易出错。

3. 保留设计意图

如果 Figma 中有不规则值（如 13px 间距），不要简单地"修正"为网格值。先确认设计师的意图——有时不规则值是有设计理由的。

4. 组件库优先

如果设计稿中有大量重复的组件模式，先构建组件库（Button, Card, Input...），再用组件库组装页面。

5. 交由设计师验证

代码生成后，邀请设计师在浏览器中对比 Figma 原稿。WorkBuddy 的还原度报告可以作为沟通依据。

常见问题

Q: 没有设计稿，只有截图怎么办？

A: 可以提供截图，WorkBuddy 会通过视觉分析推断设计意图并生成代码，但还原度会低于直接读取 Figma API 数据。建议优先使用 Figma 链接。

Q: 支持哪些框架？

A: 目前优先支持 React + Tailwind CSS。也支持 Vue + Tailwind、Svelte + Tailwind、React + CSS Modules。如有其他框架需求，告知 WorkBuddy 即可适配。

Q: 设计稿更新后如何同步代码？

A: 使用 $figma-sync 命令重新提取设计数据，WorkBuddy 会自动对比差异并更新代码。建议在 CI 中配置自动同步检查。

Q: 生成的代码能直接用于生产吗？

A: 接近生产水准，但建议在上线前：1）人工 Review 业务逻辑部分；2）补充缺失的交互状态（loading/error）；3）补充无障碍属性；4）运行设计还原度验证。

Q: 如何处理 Figma 中的动画？

A: WorkBuddy 会提取 Figma 中的 Smart Animate 信息，转化为 CSS transition 或 Framer Motion 配置。但复杂动画建议手动微调。

Figma To Code — 从设计稿到生产代码，精确还原每一像素的意图。