Figma 设计协作

Figma 是云端协作设计工具，已成为设计与开发协同交付的事实标准。对开发者而言，看懂 Figma 不只是「看图」，而是能直接拿到尺寸、间距、颜色、动效与可复用组件。这篇笔记从基础操作、组件系统、自动布局、设计规范、开发交付五块，帮开发者把设计稿还原到位。

一、基础操作

开发者拿到 Figma 链接，常用操作比设计师少得多，掌握下面这些就够用：

• Frame 与 Group：Frame 是带约束的容器（类似 div），Group 是单纯分组。布局还原时优先关注 Frame。
• 左侧图层树：展开 Frame 查看嵌套层级，对应前端的组件嵌套结构。
• 右侧检查面板：选中元素查看 W/H/X/Y、颜色、字体、圆角、阴影——开发交付的尺寸来源。
• 缩放与平移：空格 + 拖动 平移，Cmd/Ctrl + 滚轮 缩放。
• 测量间距：按住 Alt（Windows）或 Option（Mac）悬停目标，显示元素间距。

二、组件系统

Figma 组件（Component）类似前端的可复用组件，主组件改动，所有实例同步更新。理解下面三个概念能让你和设计师对齐口径：

• 主组件与实例：主组件定义在组件库里，实例可覆盖文字、图标，但继承布局与样式。
• Variants 变体：把一组状态（默认/悬停/禁用）合并为一个组件，对应前端的 status props。
• 组件属性 Properties：布尔、文本、实例切换属性，等价于组件的 props，决定显示哪些子元素。

开发建议：还原 UI 时，先对照主组件搭出可复用组件，再用 props 驱动变体，避免重复实现多个相似组件。

三、自动布局 Auto Layout

Auto Layout 是 Figma 里的 Flexbox——让 Frame 根据内容自适应尺寸。开发者读懂 Auto Layout，就能直接写出对应的 CSS：

• 方向：水平 / 垂直堆叠，对应 flex-direction: row / column。
• 间距 Gap：子元素间距，对应 gap。
• 内边距 Padding：Frame 与内容的留白，对应 padding。
• 对齐：水平 / 垂直对齐方式，对应 justify-content 与 align-items。
• Resize：Hug（紧贴内容）/ Fill（填满容器）/ Fixed（固定），对应自适应或固定尺寸。

一个典型按钮：垂直堆叠、Padding 12/24、Gap 8、圆角 8、Hug——基本能一行不差地翻译成 CSS。

四、设计规范

Figma 的设计规范通过 Styles 与 Variables 沉淀，开发者拿到设计稿前先确认规范文档：

• 颜色样式 Color Styles：主色、辅色、中性色、语义色（success/warning/error），对应主题变量。
• 文字样式 Text Styles：标题、正文、辅助文字的字号/字重/行高，对应 typography 体系。
• 变量 Variables：Figma 新版支持变量，可定义颜色、数值、间距 token，直接映射到 CSS 变量。
• Effect Styles：阴影、模糊等效果样式，统一调用避免散落硬编码。

五、开发交付

Figma 的 Dev Mode 是为开发者专门设计的视图，切到 Dev Mode 后可以：

• 查看代码片段：直接生成 CSS / iOS / Android 代码，复制即可参考（注意尺寸单位换算）。
• 测量与对比：选中元素查看与相邻元素的间距，hover 显示对齐参考线。
• 导出切图：选中图标/图片设置导出格式（SVG/PNG/WebP）与倍率，导出到本地。
• 链接定位：选中元素复制链接，可直接发给设计师提问，避免「在哪个画板哪个图层」的沟通成本。

协作建议：开发与设计师约定一份「交付 checklist」——命名规范、Auto Layout 必填、变量绑定、状态完整，能省下大量返工时间。

小结

对开发者来说，Figma 不只是看图工具，而是设计的「源码」。读懂 Frame、组件、Auto Layout、规范与 Dev Mode，设计与开发的鸿沟就能填平大半，还原度与效率都会明显提升。