★ FEATURED ARTICLE 1. 为什么“肉眼对齐”在 Figma 里其实是个大坑很多刚入行的设计师甚至不少做 UI 的开发同学都以为在 Figma 里看间距就是“用眼睛目测一下”。我见过太多团队设计稿上元素之间明明留了 24px开发还原到页面里却变成了 28px最后两边为了这 4 个像素来回扯皮。问题就出在最基础的一环你根本没搞清 Figma 的间距测量逻辑或者你宁愿用鼠标拖着框去猜也不愿意用原生工具去读。Figma 里面的“查看间距方法”其实是一套组合拳包含了原生检查器、智能参考线、快捷键微调、自动布局参数甚至还可以联动插件和脚本去核验。这套方法的核心价值在于它不仅告诉你“哪儿有多远”还能告诉你“这个数字是不是响应式的安全值”。我最近给团队做 UI 交付规范顺手整理了一下自己从接触 Figma 到现在踩过的坑、摸出来的技巧这篇就专门聊聊间距测量这件事。无论你是在做 2C 产品的高保真还原还是在跟 Unity 或者 HTML 前端做设计稿对接看完都能直接上手。1.1 两个对象之间到底在看什么很多人第一时间会打开右侧的检查器面板盯着一个长方形的 W/H/X/Y 看半天但那个叫“绝对坐标”。比如你选中一个按钮看 X 坐标是 120再看旁边另一个图片的 X 坐标是 144然后自己用计算器减一下得到 24。这个方法没错但效率极低而且一旦你选了组对象或者嵌套复杂的 Frame计算量就上来了非常容易出错。真正原生的距离查看方式其实藏在“单击选中 鼠标悬停”这个动作里。当你选中当前图层比如一个按钮然后把鼠标移动到旁边的另一个对象上停留一下Figma 会立刻在画布上生成一条红色的虚线测量框和数值提示。它会分别显示水平间距和垂直间距单位是像素px。注意这个悬停不需要按住任何修饰键只要选中的对象和鼠标悬停的对象不在同一个普通容器里它就会自动出现。这是 Figma 里查看间距的最基础姿势很多新手愣是没发现还在那儿拿计算器按。1.2 别忽略了检查器里的“空间感”除了画布上的红色虚线右侧检查器往下拉你会发现一个区域专门显示当前图层与其相邻图层的距离关系。选中一个元素检查器底部会出现类似“四个方向的箭头虚线指向图”并标注了上下左右的留白数值。这个数值是基于当前画布内所有图层自动计算的但有个前提它只能识别与你当前选中框有交集的元素。这里有个非常实用的操作细节如果你在检查器里直接点击那些数字Figma 会把对应的邻居图层高亮出来方便你确认“哦我看的是跟它之间的距离”。如果你改了画布尺寸或者移动了元素这个数值会实时刷新。我个人的习惯是在做完一个区块的排版后通过检查器把四个方向的间距全部扫一遍确保没有出现 1px、2px 这种带小数的异常值。别小看这一个动作它能帮你提前消灭超过一半的还原偏差。2. 快速上手实操原生手段查间距的四步法既然知道了基础原理那就该聊聊实际工作中我常用的四个步骤了。这套方法从出图到改稿全程不需要安装任何额外插件适合任何版本的新老 Figma。2.1 用智能参考线读“秒末”数字第一步就是利用智能参考线。当你在画布上新建一个图层或者拖动一个已有图层时只要它跟其他图层边缘发生接近Figma 会自动弹出几条红色或玫红色的虚线。这些线中间会带一个数字标签比如“24”或者“16”。很多人以为这只是个吸附辅助其实它就是实时的间距读值。举个例子我正在排一张卡片卡片里面有一张封面图和一个标题。我要把标题从左边缘往右移看着智能参考线弹出数值“16”同时上边缘对齐到图片下方“12”心里基本就能确定结构了。这不是靠猜而是因为 Figma 默认会用 8px 的 4 倍数网格作为参考所以当一次拖动出现整数时机制就会叮一声帮你吸过去。当然如果你想要更精准的奇数值比如 14px用鼠标直接拖很容易捞不到这时候就需要第二个步骤配合。2.2 方向键微调与坐标差值心算第二步是使用键盘方向键微调。选中图层后直接用键盘的左/右/上/下箭头移动。默认情况下每按一下移动 1px。如果按住 Shift 键再加方向键那就每次移动 10px这个数值如果你之前改过 nudge 设置另说。移动的同时眼睛盯住检查器面板的 X 或者 Y 坐标值再和旁边目标对象的坐标值做个减法就是一个精准的间距。这个方法特别适合追求像素级完美、又不喜欢安装插件的从业者。有一次我要把一个返回图标放在距离屏幕左边缘 20px 的位置但鼠标拖来拖去总在 19.8 或者 20.5 附近晃。我就直接把图标选中按 Shift左键一顿微调看到 X 坐标从 96 跳到 116再按四下方向键到 120完事。整个过程不到五秒钟没依赖任何魔法。2.3 用临时参考线画“标尺”第三步是我自己在复杂排版中摸索出来的习惯当你要反复确认多个元素之间的关系时比如一左一右两个卡片各自到屏幕中轴线的距离单靠悬停看单组数字还是太累。这时候我会直接把鼠标从画布顶部标尺拖出参考线分别放到左卡片的右侧边缘和中轴线位置然后看标尺上的刻度差。Figma 的标尺默认是像素刻度按住 Alt 键还能切换成百分比显示非常适合在有相对尺寸需求的场景里查间隙。而且参考线是永久存在于画布上的你可以同时拉出五六条来对比不同手机端的断点比来回移动鼠标更直接。2.4 利用自动布局面板反推间距第四步也是现代 UI 设计的最大红利自动布局Auto Layout。如果你的元素外面套了自动布局 Frame那间距根本不用你自己量。右侧检查器里会有两个关键参数一个叫水平间距Horizontal padding一个叫垂直间距Vertical padding还有元素与元素之间的 gap 设置。这个数字就是实实在在的间距来源。我强烈推荐在排列列表、按钮组、标签云时直接用自动布局。原因很简单自动布局能彻底消除手动看间距造成的误差。哪怕你后续改了内容文字长短元素会自动排布间距数值永远保持你设置的 16px 或 24px。这时候再讨论“查看间距”其实已经变成了“更新布局参数”容错率大大提升。3. 进阶玩法一套从设计稿到开发的间距校验闭环光会在画布上查数字还不够尤其是现在前端工程化越来越卷设计侧的标注早就不能只靠截图传阅了。我看到现在热搜里大把人在搜“figma mcp 可以直接切图吗”“如何将 Figma 里面的 UI 导入到 Unity 中”其实背后的核心诉求就是如何保证我在 Figma 里看到的间距到了真实的开发环境里依然准确3.1 把间距读成“变量”我在团队里推行了一个做法在 Figma 里尽量不写死 20、30 这种孤立数字而是把间距数值统一归纳为设计变量的语义化标签。比如卡片的水平内边距统一命名是 Spacing/SM值为 12px区块间距统一命名为 Spacing/MD值为 24px。这样在交付开发时要让开发去看间距数值其实看的是 token 名然后再对应到他们代码里的变量去彻底避免因为看错小数位或者单位导致还原错乱。既然很多人都在问“如何将 Figma 里面的 UI 导入到 Unity”我就多说一句Unity 里的 Canvas 坐标系统和 Figma 的不太一样Figma 的 Y 轴是往下为正而 Unity 的 Rect Transform 很多情况下是从中心锚点出发。所以当你需要查看 Unity 中的间距时不建议直接从 Figma 复制像素值去套而是应该先明确锚点和中心偏移。这时Figma 自身的检查器就很有用了你可以选中画板在右侧导出设置里把切图资源导出来同时在旁边框出标注用 Frame。但间距本身的准确移交还是要靠把数值翻译给开发让开发去 Unity 里用 Canvas Scaler 适配相对比例。3.2 借助 MCP 与插件能力自动生成间距报表最近火出圈的 “figma mcp” 我研究过一段时间。简单来说它允许外部 AI 助手或者脚本通过接口访问 Figma 当前文档的图层信息。我试过一次用很简单的代码脚本就能自动输出某一画板里所有图层之间的水平间距和垂直间距列表。这不等于拿它切图但非常适用于做交底和检查。比如设计稿里面有 30 个同样的卡片我可以通过 MCP 拉取全部数据快速找出哪个卡片的间距和其他的不一样避免人工一个个点过去。你可以把 MCP 理解成一个“数字留声机”它忠实记录设计稿中每个对象的坐标和尺寸。而组织到这里我们再来聊一个非常直接的插件方法打开 Figma 的社区插件库搜索 “Space” 或者 “Measure”很多工具支持选中多个图层后自动绘制测量标注线。虽然这些标注只是临时性的辅助线但它能让评审会上所有人都看懂间距关系特别是面对领导或者开发时展示效果比口头描述“大概 16dp 左右”要强得多。4. 中文汉化场景下的实用排查技巧最近很多人搜“figma汉化插件”“figma安装字体”特别是还想知道“figma make支持中文吗”。我先不评价第三方汉化包的利与弊单从测量间距这个功能的视觉认知来讲无论你的界面语言是英文还是中文面板布局是几乎不变的。中文状态的检查器里对应的名字会变成“宽”“高”“X”“Y”间距标注依然是直接显示数字。这个完全不影响测量。但有一个实操细节想提醒你如果你用了第三方汉化版有些版本会覆盖默认快捷键或者鼠标交互。我遇到过一位朋友的 Figma悬停看间距的红线莫名其妙不见了后来发现是汉化包改了他的工具栏选项他把“显示智能参考线”给关掉了。这时候不要慌直接点面板顶部的小扳手图标或者按快捷键macOS 是 Cmd;重新打开参考线可见即可。这属于功能隐藏原理和原生版完全一样。4.1 安装指定字体对间距的影响还有一个经常被忽略的环节字体的基线高度会直接影响你看到的“垂直间距”。比如在 Figma 里两个文本框之间设了 8px 间距但如果设计稿里安装的 PingFang SC 字体版本不对或者本地缺了字体Figma 会临时用一种默认的 Arial 代替渲染。替代字体和本应使用的字体在 line-height 上可能会有明显差异导致你量出来的间距值虽然在数值上是 8px但目视感受比参考稿松很多。所以在交付前我习惯先检查有没有缺字体提示。确保 PingFang、思源黑体等中文常用字体已经通过“设置-安装字体”统一配置好尤其是多人协作的时候每个人都要装同样的字体家族版本。你查间距的准确性至少有一半的隐性因素藏在字体基线里面。4.2 当组件变体出现时别漏掉 Combined 尺寸再来一个容易踩的坑Figma 新版的变体组件Variant保存了很多布局状态。你在组件内部查看间距时如果这个组件套了自动布局它内部的 padding 会跟着状态切换而变化。比如按钮在默认状态的间距是 12px在 hover 状态可能变成了 16px。这时候你虽然选中了同一个元素但右侧间距提示会因为当前激活的 variant 不同而显示不同的值。当你需要一整套精确的尺寸间距规范时建议把组件的所有 variant 都点开一遍检查里面对应的间距字段是否一致。如果不一致一定要在原型的标注说明里写明状态差异否则开发很容易默认为“通用布局”去做最后在 hover 高保真还原时被坑得体无完肤。这个结论不是危言耸听我实打实替同事收拾过这个烂摊子。5. 常见问题速查我亲自踩过的间距测不准现场为了让这篇更像实战手册我把这段时间高频遇到的问题整理成了一个速查逻辑方便你卡壳时直接对号入座。现象描述可能原因排查手段悬停在其他图层上不显示红色间距线检查器中关闭了图层可见性 或 选中对象被锁定了查看画布顶部“快速设置”确认智能参考线开关开启取消锁定图层测出来的间距带小数比如 16.5px缩放工具误开启画板设置了缩放倍率按 Shift0 重置缩放为 100%重新测量明明设定的 Auto Layout 深度为 16但视觉上不贴合元素内部存在隐藏的 padding 或嵌套的 Frame 优先级更高用右侧面板选中内层 Frame检查其内部间距覆盖率跟开发核对时数字对应不上 HTML 里的 margin你测量的是元素到你选中的外层 Frame 边缘但开发写的是外层 margin把鼠标指到真正的父容器上查看最外层 buffer想复制切图给 Unity但间距值怎么转都不对Unity 中的缩放模式与 Figma 画板尺寸不同使用“Figma 导出”功能同时导出 PNG 和坐标 Json用脚本换算为 Unity 的 Canvas Scaler 逻辑后再定位拿到这个表基本上日常遇到的间距查看问题都能找到一条出路。当然有一种更健康的方式就是在设计初期就约定好 4px 或 8px 的栅格系统。栅格系统定下来之后你几乎不需要刻意去查看间距因为所有的值都在“4、8、16、24、32”这些节奏里跑你在画布上拖动时智能吸附就会把你拉到整数上开发还原起来心情也会舒畅很多。最后分享一个我用了很久的小技巧。当你在一个复杂的项目里被老板要求“这里加个 2px 会更好”时千万别用鼠标推来推去。直接用键盘方向键微调然后看检查器数值到 2 的倍数。有时候你不小心多按了两下再按回来反而是最快的方式。毕竟测量间距不在于“量了一次准确”而在于每一次调整后都能立刻读出新值形成一种肌肉记忆。这就和练吉他发弦一个道理手上有了刻度心里就有了准星。
阅读完成 · 觉得有帮助？
