Figma变量绑定组件尺寸并保持设计令牌一致的方法

要让 Figma 组件尺寸跟着设计令牌统一变化，关键是把宽度和高度改成 number 类型变量，再用变量模式承载 Desktop、Mobile 等场景的值。不要只在实例上手动改数字：先在 Variables 面板建立尺寸集合，再绑定主组件，最后切换模式检查实例是否仍然引用变量。

官方地址：https://www.figma.com/

先建立尺寸变量和模式，再绑定组件

打开一个可编辑的 Figma Design 文件，先取消画布选中状态，在右侧找到 Local variables，进入 Variables 面板。新建一个名为 Size tokens 的集合，再创建两个 Number 变量：component/width 和 component/height。变量名用对象和属性表达，后续搜索、交接和批量调整都会更清楚。

如果文件支持变量模式，在集合中增加 Desktop 与 Mobile 两列。例如按钮宽度可以先填 320 和 280，高度填 48 和 44。这里的数字只是组件契约的示例，应该按你的布局网格、最小触控尺寸和内容长度决定，不要为了“响应式”把所有尺寸都做成任意缩放。

在主组件上绑定宽高变量

进入组件主件，选中需要统一管理尺寸的根容器。在右侧尺寸区域，将 Width 字段设为固定尺寸后，点击字段旁的变量入口，选择 component/width；Height 字段用同样方法选择 component/height。如果当前对象是 Hug contents，先确认你确实需要固定宽高，否则变量绑定会和内容自适应发生冲突。

绑定后，字段旁应显示变量标记或变量名称，而不是只有一个孤立数字。组件内部的 Auto layout 仍然可以使用变量控制 padding、gap 等数值，但建议先完成宽高绑定，再逐项替换间距，便于定位是哪一个令牌造成布局变化。

切换模式，检查实例和 Auto layout 的边界

选中组件、组件集或承载它的页面，在右侧找到变量模式选择器，切换到 Mobile。如果主组件宽度变窄、高度按设定值变化，且实例没有出现本地数字覆盖，说明模式链路生效。也可以选中一个实例，确认尺寸字段仍指向主组件的变量，而不是被手工输入的新值覆盖。

发布前的设计令牌核对清单

最后只保留一套可解释的尺寸来源：集合负责值，模式负责场景，主组件负责绑定，实例负责少量必要覆盖。变量名不要混用 button-width、btnW 等缩写；同一类组件的宽高、padding、gap 应有稳定前缀。修改变量值后，先在一个页面切换模式，再检查组件集和关键实例，确认没有文本溢出、按钮被压扁或 Auto layout 反向撑开。

这套方法的边界也很明确：变量能统一设计属性，但不能替代组件变体、内容策略或断点布局规则。遇到尺寸随文案变化的按钮，优先保留 Hug contents；遇到明确的容器契约，才绑定固定宽高。这样既能保持设计令牌一致，也不会把所有布局问题都推给一个数字变量。

相关问题

为什么 Width 字段看不到变量入口？

先确认对象支持该属性、变量类型是 Number，并检查当前宽度不是由 Hug contents 或其他布局约束接管。

一个组件可以同时使用多个模式吗？

可以在同一集合中保存多组模式值，再给组件或页面指定当前模式；同一个变量在当前模式下只取一列值。

实例手动改尺寸会破坏令牌吗？

不一定，但它会形成局部覆盖。若改动应长期复用，应回到主组件或变量集合修改，而不是让每个实例各自保存数字。