Figma按钮自动加后缀，AI识别状态更高效

在Figma设计工作中，为按钮组件的不同状态（如默认、悬停、禁用等）手动添加后缀不仅繁琐易错，还严重拖慢协作效率；本文系统梳理了四种高效自动化方案——从开箱即用的“Rename It”插件按视觉规则智能匹配，到基于Figma API与Python脚本的数据驱动重命名，再到依托Variant结构化属性的零误差模板同步，甚至进阶至集成TinyYOLOv5轻量图像识别模型实现像素级状态判别，无论你是追求快速上手的设计师，还是偏爱精准控制的前端工程师或自动化爱好者，都能找到适配自身工作流的技术路径，真正让AI成为UI组件命名的隐形助手。

如果您在Figma中需要为同一按钮组件的不同变体（如默认、悬停、禁用、点击等）批量添加状态后缀（例如“\_Default”“\_Hover”“\_Disabled”），但手动重命名耗时且易出错，则可借助AI辅助脚本或插件识别视觉差异并自动追加State标识。以下是实现该目标的多种可行路径：

一、使用Figma插件“Rename It”配合状态命名规则

该插件支持基于图层结构、填充色、不透明度、可见性等属性进行条件匹配，并执行批量重命名。您可预先定义按钮各状态的视觉特征，让插件自动识别并附加对应后缀。

1、在Figma社区插件库中搜索并安装“Rename It”插件。

2、选中包含所有按钮变体的Frame或Component Set。

3、打开插件面板，点击“Add Rule”，设置第一条规则：当图层不透明度为100%且无灰阶遮罩时，添加后缀“\_Default”。

4、新增第二条规则：当图层内含名为“Hover Overlay”的矩形且其不透明度＞0时，添加后缀“\_Hover”。

5、新增第三条规则：当图层内文本内容包含“Disabled”或填充色为#CCCCCC时，添加后缀“\_Disabled”。

6、点击“Apply Rules”，插件将逐个扫描子图层并按匹配顺序执行重命名。

二、运行本地Python脚本解析Figma API导出的JSON文件

Figma文件可通过API导出为JSON格式，其中包含每个节点的颜色值、文本内容、布尔运算状态等原始数据。通过编写轻量Python脚本分析这些字段，可精准区分状态并生成带后缀的新名称。

1、在Figma中复制文件ID（位于URL末尾斜杠后的一串字符）。

2、使用curl或requests调用Figma REST API，获取该文件的JSON导出结果（需提前申请Personal Access Token）。

3、在脚本中遍历所有component节点，检查其“fills”数组中主填充色是否为#007AFF（代表主态）、#0056B3（代表悬停）、#999999（代表禁用）。

4、若某component内存在子节点名称含“Icon”且其visible为false，则判定为加载态，附加“\_Loading”后缀。

5、将修改后的name字段写入新JSON，并通过Figma API的PATCH接口回传更新图层名称。

三、使用Figma内置Auto Layout+Variant功能结合命名模板

当按钮已构建为Variant组件时，Figma会自动在右侧属性栏显示“Variant Property”下拉项。利用此结构化元数据，可触发插件读取当前variant值并注入后缀，无需依赖视觉识别。

1、确保按钮组件已设置为Variant，并在Properties中定义名为“State”的属性，选项包括Default、Hover、Disabled、Pressed。

2、安装插件“Variant Name Sync”，启用后它会监听variant切换事件。

3、在插件设置中配置命名模板为“{originalName}\_{variantValue}”，例如原始名为“Button”，则自动变为“Button\_Hover”。

4、逐一点击各variant预览卡片，插件将实时刷新对应实例的图层名。

5、若某variant未被命名，插件会在控制台输出未映射的State值：Unknown，提示您补充属性选项。

四、部署自定义Figma插件调用TinyYOLOv5模型识别按钮状态

针对高保真设计稿中状态差异细微（如仅靠微弱阴影偏移或边框粗细变化区分）的场景，可嵌入轻量图像识别模型。插件截取每个按钮变体的渲染快照，送入本地ONNX运行时推理，输出最可能的状态标签。

1、下载已量化为ONNX格式的TinyYOLOv5模型权重文件（约3.2MB），放入插件assets目录。

2、在插件代码中调用figma.showUI()弹出界面，勾选“Enable State Detection via Canvas Snapshot”。

3、插件遍历选中组件的每个variant，调用figma.exportAsync(node, { format: 'PNG' })生成128×128像素截图。

4、将PNG字节流送入WebAssembly版ONNX Runtime，执行前向推理，获取置信度最高的类别ID。

5、查表映射ID至状态名：0→Default、1→Hover、2→Disabled、3→Focused，拼接后缀并调用node.name = `${baseName}\_${state}`。

理论要掌握，实操不能落！以上关于《Figma按钮自动加后缀，AI识别状态更高效》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！