Figma按钮图层命名规范指南：如何根据标签内容自动重命名

在Figma中管理大量按钮组件时，最常遇到的挑战之一就是图层名称与实际显示的文本标签不一致。手动逐一修改不仅效率低下，而且极易出错。幸运的是，我们可以借助自动化工具，根据按钮内部的Label文本内容，快速、准确地重命名Button图层。本文将介绍几种行之有效的自动化方案，帮助您选择最适合工作流的方法。

一、使用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”选项，这样可以有效避免因文本首尾空格或空的Label内容而导致命名结果异常。

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`属性值，即其文本内容，在去除首尾空格后，将其赋值给父Frame的`.name`属性。

4. 核心代码非常简洁：frame.name = labelText.trim()，对每一个匹配条件的按钮执行此操作即可。

5. 保存并在本地运行该插件。此后，只需选中目标图层并触发脚本，即可一键完成符合规范的命名。

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

当然，在某些情况下插件可能不可用，或者您需要保留部分历史命名以便追溯变更。此时，可以转换思路，利用Figma的变量功能来建立一套命名映射体系，为未来的全面自动化奠定基础。

这种方法更像是在构建设计系统的基础设施：

1. 在您的Button主组件中，为那个作为Label的Text图层创建一个变量。变量名可以设置为语义化的名称，例如“button_label_text”，类型选择String（字符串）。

2. 在组件的属性面板中，将此变量绑定到Text图层的`characters`字段上。这样，当您修改变量值时，按钮上显示的文本内容便会同步更新。

3. 当您通过修改变量值来更改按钮实例的显示文字后，再运行如Auto Rename这类插件。不过这次，在Pattern中您可以使用更具语义化的变量引用格式：{button_label_text}。

4. 关键在于，确保您设计系统中的所有按钮实例都继承并应用这套变量结构。如此一来，不仅重命名的结果能够保持高度一致和语义清晰，整个组件库的可维护性和可扩展性也将得到显著提升。

总而言之，选择哪种自动化方案，取决于您项目的复杂程度、团队协作习惯以及对自动化水平的具体要求。从开箱即用的便捷插件，到高度定制化的专用脚本，再到为未来铺路的变量体系，这条提升Figma按钮组件管理效率的自动化命名路径，已经相当清晰明了。