Figma 设计到代码：高效 UI 交付完全指南

为什么你需要关注“设计到代码”这一步？

将一份精美的 Figma 设计稿转化为生产环境中的代码，并不是把截图丢给开发那么简单。真正的挑战在于：保持间距、色彩、字体、响应式逻辑与设计稿像素级一致，同时还要兼顾可维护性和迭代效率。

这份教程专为刚接触 UI 交付流程的设计师和前端开发者准备，帮助你建立一个「设计到代码」的标准化协作工作流——从 Figma 文件准备开始，一直到组件化代码实现与走查验证。

一、Figma 端的准备工作：让设计稿本身成为“说明书”

1.1 结构化图层与命名规范

开发需要快速理解设计稿的结构，混乱的图层会让协作成本陡增。

• 页面分组：将不同功能模块放到独立的 Page（如 登录页、仪表盘、设置页）。
• Frame 命名：使用能反映页面/组件名称的命名，例如 Home / Hero Banner，而非 Frame 12038。
• 组件与变体：将按钮、输入框、卡片等做成 Figma Component 并整理变体（Variant），开发可以直接看到状态变化。
• 图层扁平化：删除未经使用的隐藏图层，合并仅用于装饰的空分组。

1.2 建立统一的设计系统

像素级还原的基础是共享一套设计语言。

• 颜色样式（Color Styles）：将主色、辅色、灰度、语义色（成功/错误）定义为可复用的样式。命名使用语义化名称，如 primary/default、text/secondary，避免直接使用 Hex 值命名。
• 文本样式（Text Styles）：定义标题、正文、说明文字的字号、字重、行高、字间距，并用明确名称（如 heading/h1、body/large）组织。
• 效果与布局网格：将常用的阴影、模糊、Layout Grid 也保存为样式，方便开发直接用代码映射。

1.3 为组件添加开发必备的标注与说明

用 Figma 内置功能直接减轻沟通成本。

• 使用 Auto Layout：这不仅方便设计调整，还能让开发直观理解元素的 Flexbox/Grid 行为——间距、内边距、对齐方式、换行规则都能在 Inspect 面板中读取。
• 添加开发说明（Dev Notes）：在图层右侧属性区域直接写入关键说明，如“该按钮在移动端变为全宽”“此处无数据时显示 N/A”。
• 将链接状态标注出来：如果一个卡片是可点击的，不仅在设计稿上展示悬停状态，还要用文字写出交互期望。

二、设计到代码的协作核心：交付物与工具

2.1 用好 Figma 的 Inspect 面板（开发第一视角）

前端开发在 Figma 查看模式下可以直接获取代码。

1. 选中任意元素 → 右侧面板切换到 Inspect。
2. 即可看到 CSS、iOS（SwiftUI）、Android（Compose）代码片段。虽然这些代码并不直接可用，但可以从中获取准确的尺寸、颜色值、字体参数。
3. 关键字段解读：
   • width / height：需关注是否包含边框。
   • padding + gap：通过 Auto Layout 会清晰展示。
   • color & opacity：注意 Figma 中颜色显示的是 sRGB 值，可直接复制。
   • border-radius：区分独立圆角设置。
4. 导出资源：图标和图片在 Inspect 中可以直接导出为 SVG、PNG、PDF 等格式。建议图标统一使用 SVG。

2.2 常用协作工具对比与选择

除了 Figma 自身的功能，专业的交付工具能进一步优化流程。

无论使用哪种工具，最终目标是把设计稿转化为一份「开发可以执行的数据」：间距表、颜色表、字体表、组件状态表。

三、从设计到代码的逐层还原方法论

3.1 设计令牌（Design Tokens）——代码与设计的统一词典

设计令牌是存储视觉属性的平台无关变量，让任何平台（Web、iOS、Android）都能复用同一套设计决策。

常见令牌命名示例（JSON 格式）：

{
  "color": {
    "primary": { "value": "#3B82F6" },
    "background": { "value": "#F9FAFB" },
    "text": { "secondary": { "value": "#6B7280" } }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" }
  },
  "fontSize": {
    "body": { "value": "16px" },
    "h3": { "value": "24px" }
  }
}

实践建议：将 Figma 的 Colors 和 Text Styles 与设计令牌对齐，开发直接通过代码引用令牌变量，做到“一处修改，全局生效”。

3.2 布局还原：从 Auto Layout 到 CSS Flexbox / Grid

Figma 的 Auto Layout 与 CSS Flexbox 几乎一一对应：

• direction：水平 ↔ flex-direction: row，垂直 ↔ flex-direction: column。
• gap 直接对应 CSS 的 gap 属性。
• padding ↔ padding，需要区分上下左右。
• alignment ↔ justify-content 和 align-items（注意主轴与交叉轴方向）。
• resizing（固定/填充/适应内容）对应 flex-grow、flex-shrink、width/height 等。

像素级还原的布局前提：

• 使用 CSS Reset 或 Normalize.css 消除浏览器默认样式。
• 全局设置 box-sizing: border-box;，与 Figma 默认行为保持一致。
• 注意 line-height 带来的上下空白，需要与设计稿中的行高严格匹配。

3.3 间距与大小：遵循 8 像素网格系统

Figma 设计稿通常构建在 4px 或 8px 基数上。开发中应该定义一套间距变量来映射：

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

所有内边距、外边距、组件间隔均引用这些变量，禁止“差不多就行”的硬编码。

3.4 字体与排版还原：精确到像素

字体的细微差异是界面“不对劲”的主要原因。

• Web Font 加载：确保 Figma 中使用的字体在网页端可用，或通过 @font-face 引入许可字体。
• 字号与行高：严格使用设计稿中的 font-size 和 line-height。注意 line-height 可以用无单位数值（如 1.5 相对字号）或 px 固定值，推荐使用设计稿中的绝对值。
• 字重映射：Figma 的字重数值（100-900）直接对应 CSS 的 font-weight，确保引入了不同字重的字体文件。
• 字母间距：Figma 的 Letter-spacing 数值若以百分比显示，需要转换为 em 或 px。默认 0% 对应 letter-spacing: 0。

3.5 颜色与阴影：透明度陷阱

• Figma 中许多颜色带有 Alpha 通道，CSS 中建议使用 rgba() 或 #RRGGBBAA 格式，避免直接用不透明的 Hex 值再叠加 opacity（会改变效果）。
• 阴影还原：Figma 可一次性设置多层阴影，且包含 blur、spread。开发时需将每一层逐一转换为 box-shadow 列表，并处理好 inset 内阴影情况。

3.6 组件化开发：让代码与设计同步演进

高效 UI 交付的关键在于开发实现与设计组件一一对应。

1. 原子设计思想：从基础元素（Button、Input、Icon）到组合体（Card、Modal），再到页面模板。
2. 组件状态覆盖：每个组件至少实现设计稿中存在的所有状态（default、hover、active、disabled、loading、error），并使用 props 进行切换。
3. 命名统一：开发组件名与 Figma 中的 Component 名称保持同步，例如 Button/Primary/Small → <Button variant="primary" size="small" />。

四、协作流程与质量验证：从交付到落地

4.1 设计交付前的 Checklist（设计师版）

在把设计稿交给开发之前，请确认：

• 所有文字样式、颜色样式已定义且名称可理解。
• 组件状态覆盖（悬停、按下、禁用、空态等）。
• 使用 Auto Layout，且检查各断点下的布局是否合理（移动/平板/桌面）。
• 图片和图标资源可导出，复杂图形留有 SVG 源。
• 交互关键路径有原型或说明注释。
• 开发说明（Dev Notes）已写在关键图层上。

4.2 开发实现后的走查（像素级还原检验）

开发完成页面后，进行设计走查（Design QA）：

1. 叠图对比：将实现的界面截图，在 Figma 中将其作为半透明图层叠加在原设计稿之上，按像素逐一核对。
2. 浏览器开发工具测量：使用开发者工具检查元素的边距、字体、颜色值，是否与设计稿一致。
3. 专项核查列表：
   • 文本是否有截断、溢出，行高是否正确。
   • 栅格断点变化时布局是否符预期（响应式检查）。
   • 可交互元素的 hover/active 效果。
   • 交互动效的缓动、时长是否符合原型。

4.3 持续迭代与版本联动

设计系统是动态的。建议：

• 使用 Git 对设计令牌文件进行版本控制。
• 将 Figma 的 Library 更新通过插件或手动方式通知开发，代码中使用自动生成样式文件（如 Style Dictionary）。
• 定期进行设计与代码的同步 review，避免“代码和最新设计稿跑偏”。

五、常见问题排查与高效技巧

5.1 为什么实现出来的间距比设计稿大？

• 原因：可能是行高造成的空白区域、外边距合并、或者浏览器默认样式未重置。
• 解决：使用 * { margin: 0; padding: 0; } 或 Normalize.css；检查行高数值，必要时用 line-height: 1 重置。

5.2 图标在网页上看起来比设计稿粗/细？

• 原因：Figma 渲染 SVG 时与浏览器抗锯齿方式不同，且笔触宽度不一致。
• 解决：图标尽量用 fill 而非 stroke；导出 SVG 时保留原尺寸，并用 CSS 控制缩放；统一图标库（如 Feather、Material Icons）避免手绘差异。

5.3 移动端字体大小与设计稿不符？

• 原因：Figma 的 1x 设计稿可能基于 360px 或 375px 宽度，而开发使用固定 px 或 rem 没有做响应式转换。
• 建议：采用相对单位（rem、vw）结合 clamp() 函数，或依据基准宽度计算出 rem 比例，保持与设计稿在不同宽度下视觉一致。

六、模板工具箱速查（直接复制使用）

设计令牌 CSS 变量模板

:root {
  /* 颜色 */
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-bg: #FFFFFF;
  --color-surface: #F3F4F6;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 字号/行高 */
  --text-xs: 12px/16px;
  --text-sm: 14px/20px;
  --text-base: 16px/24px;
  --text-lg: 18px/28px;
  --text-xl: 20px/28px;
  --text-2xl: 24px/32px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
}

按钮组件映射示例（React + CSS）

<button className={`btn btn--${variant} btn--${size}`}>
  {children}
</button>

.btn {
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn--primary {
  background-color: var(--color-primary);
  color: white;
}
.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

最后一步：将这份协作流程固化到团队的 Wiki 或项目 README 中，新成员也能快速上手，真正做到“设计稿到代码”的高效、精准、可迭代。