Figma按钮命名规范：基于Label内容自动重命名指南

在Figma中维护按钮组件库时，图层名称与实际标签文本不一致是常见的协作痛点。逐一手动修改不仅耗时，更易引入人为错误。通过自动化流程，我们可以实现基于按钮内部Label文本的智能重命名，以下四种方案将为你提供从快速应用到深度定制的完整解决路径。

一、使用Figma插件Auto Rename

Auto Rename是处理批量图层命名的效率工具，尤其适用于结构简单的按钮组件——例如Frame内直接嵌套单一Text图层的场景。

操作流程如下：

1. 在Figma画布中，选中需要处理的单个或多个按钮图层。

2. 通过顶部菜单 Plugins → Search plugins 搜索并运行 “Auto Rename”。

3. 在插件面板内，将“Rename by”选项设置为“Text content”。务必勾选“Only rename if child text exists”，该选项可防止对无文本子图层的元素进行误操作。

4. 在“Pattern”字段中输入格式符：{text}。此指令将提取子图层中首个可见文本节点的内容作为新名称。

5. 点击“Apply”，所选按钮图层的名称将立即同步为其显示的文本内容。

二、使用Figma插件Rename It

对于结构更复杂的按钮组件——例如包含图标与文字的多层嵌套，或存在多个Text图层的组合——Rename It提供了更精细的控制逻辑，甚至支持正则表达式匹配。

具体实施步骤：

1. 安装并启动Rename It插件。

2. 选中目标按钮图层组（通常为Frame，且Label文本为其直接子图层）。

3. 在插件界面中，将“Mode”调整为“Text in children”，同时将“Search depth”设置为1，确保仅检索直接子层级的文本。

4. 保持“Replace pattern”为空，在“With pattern”中输入：{0}。此参数代表采用第一个匹配到的Text图层内容。

5. 建议同时启用“Trim whitespace”与“Skip empty text”选项，以消除文本首尾空格或空标签对命名结果造成的干扰。

6. 点击“Rename”执行操作。

三、通过Figma API + Figma Plugin Studio自定义脚本

在维护企业级设计系统或需要执行严格命名规范的场景中，通用插件可能无法满足特定结构识别需求。此时，基于Figma API编写轻量级自定义脚本能提供最高精度与可控性。

核心实现逻辑：

1. 于Figma Plugin Studio中创建新插件项目，编辑`manifest.json`文件并声明文件编辑权限（`"requiredPermissions": ["file-edit"]`）。

2. 在`code.ts`中编写脚本：遍历所有选中图层，筛选出Frame类型且包含唯一Text子节点的对象（可增加逻辑排除名为“Icon”或“Badge”的辅助文本节点）。

3. 提取该Text节点的`.characters`属性值（即文本内容），经`.trim()`方法处理去除首尾空格后，将其赋值给父Frame的`.name`属性。

4. 关键赋值语句为：frame.name = labelText.trim()，对每个符合条件的按钮循环执行即可。

5. 保存并在本地运行插件。此后，仅需选中目标图层并触发脚本，即可完成一键标准化命名。

四、利用Figma变量与命名约定辅助人工校验

当插件环境受限或需保留命名历史以追溯变更时，可转而借助Figma变量功能构建命名映射体系，为后续自动化奠定结构化基础。

此方法侧重于基础设施搭建：

1. 在Button主组件中，为作为Label的Text图层创建字符串类型变量。变量名建议采用语义化命名，如“button.label.text”。

2. 于组件属性面板中，将该变量绑定至Text图层的`characters`字段。此后，修改变量值即可同步更新文本内容。

3. 在组件实例中通过修改变量调整按钮文字后，可再次运行Auto Rename等插件。此时在Pattern中可使用语义化引用：{button.label.text}。

4. 确保设计系统内所有按钮实例均继承此变量结构。此举不仅能实现高度一致且语义清晰的命名，更将显著提升组件库的整体可维护性与迭代效率。

方案的选择应基于项目复杂度、团队协作习惯及自动化深度需求。从开箱即用的插件工具，到精准可控的自定义脚本，再到面向未来的变量体系，这套方法链已为你覆盖了从执行到规划的全周期命名管理需求。

来源：互联网