Figma从设计稿提取间距与颜色标注的实现方法

把设计稿交给开发时，最容易遗漏的不是大结构，而是卡片内外的间距、填充色和文字颜色。Figma 的 Dev Mode 可以把这些信息集中到选中图层的 Inspect 面板中，再用 Measure 和 Annotation 补上跨图层的距离与说明。下面按一次开发检查的顺序操作，重点是读数和标注，不涉及设计绘制。

官方帮助地址：https://help.figma.com/hc/en-us/articles/22012921621015-Guide-to-inspecting

先确认文件权限和检查入口

打开设计文件后，先看顶部是否有 Dev Mode 切换入口。Figma 官方文档说明，也可以使用 Shift+D 进入开发检查视图；不同方案、席位和文件权限会影响可见能力。如果看不到 Dev Mode，不要把缺少的面板当成设计稿没有标注，先确认文件访问权限。

这次要提取的是开发需要的三类信息：选中图层自身的布局和颜色属性、两个图层之间的间距、以及需要额外提醒的特殊规则。把范围限定清楚，后面不容易把设计面板中的装饰信息误当成开发参数。

进入 Dev Mode，先锁定正确图层

1. 点击顶部的 Dev Mode，或按 Shift+D。
2. 在左侧图层列表或中间画布中点击目标对象，例如登录卡片、按钮或标题文字。
3. 观察右侧面板，确认当前图层名称与画布上的蓝色高亮对象一致，再展开 Inspect。

可见状态是：左侧只有一个目标图层处于选中状态，右侧出现该图层的属性，而不是整个页面或父级 Frame 的信息。若数值明显偏大，先退一步选择真正承载颜色或间距的子图层。

从 Inspect 面板提取间距和颜色

1. 在右侧 Inspect 面板查看 Layout 和 Spacing，记录尺寸、内边距或对象间距。
2. 继续查看 Color、Typography、Styles 或 Variables 区域，确认颜色来自填充、文字还是已绑定的样式。
3. 如果面板提供 Code/List 切换，优先切到 List 逐项核对；官方说明中，属性值可以直接点击复制。

这里的关键是保留“对象—属性”的对应关系。例如按钮背景是蓝色，不代表卡片背景也使用同一个蓝色；应该分别选中按钮和卡片，再各自读取 Color。颜色要记录为面板给出的值或变量名，不能凭截图中的近似色重新取样。

如果开发只需要一个明确结论，可以整理成“按钮内边距 16 px、按钮填充色为某个变量、标题文字使用另一组颜色”的短交接记录。这样比把整个 Inspect 面板全部复制过去更容易复核。

用 Measure 补齐两个对象之间的距离

1. 点击顶部工具栏的 Measure，或按 Shift+M。
2. 从第一个图层拖到第二个图层，例如从按钮边缘拖到卡片内边缘。
3. 查看画布上的红色水平、垂直测量线；如果线覆盖内容，拖动测量线到空白处。

测量结果应描述两个具体对象之间的关系，例如“按钮底部到卡片底部为 24 px”，而不是孤立写一个 24。对 Auto Layout、嵌套 Frame 或文字图层尤其要先确认边界对象，因为文字的测量会受文本边界影响。

完成测量后，再选中对应图层回到 Inspect 面板核对颜色。间距线回答“离多远”，Color 属性回答“用什么颜色”，两者不要互相替代。

用 Annotation 固定特殊颜色规则

当某个颜色不是普通填充，而是状态色、无障碍对比要求或主题变量时，点击顶部的 Annotate，或按 Shift+T，选中目标图层并补一条短说明。标注内容应直接说明使用条件，例如“错误状态沿用语义色变量”，不要只写“这里注意颜色”。

最终确认可以按三项复查：一是图层名称和属性对象一致；二是间距线两端指向了正确边界；三是颜色值、变量和特殊状态都有可复制或可阅读的说明。Figma 的测量和标注会显示在开发检查视图中，但它们仍是设计交接信息，不能代替前端实现后的像素或可访问性测试。

常见问题

为什么 Inspect 面板没有 Code 区域？

先确认当前确实处于 Dev Mode，再检查文件是否关闭了复制和分享能力。官方检查指南说明，这类文件设置会影响 Code 区域的显示；即使没有 Code，也可以使用 List 读取可见属性。

为什么读到的间距和预期不一样？

最常见原因是选中了父级 Frame、Auto Layout 容器或文字边界。沿图层树逐级选择，并用 Measure 直接连接两个目标对象，再把测量线两端的对象名称写进交接记录。

如果只做开发检查，推荐保持“Dev Mode 选图层 → Inspect 读属性 → Measure 量关系 → Annotation 固规则”的顺序。这样间距和颜色都有来源、有对象、有可见确认点，交接时也更不容易把估算值带进代码。