☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
可借助ai辅助脚本或插件自动为按钮组件变体批量添加状态后缀，包括使用“rename it”插件按视觉规则匹配、python解析figma api json、variant属性联动命名模板，以及tinyyolov5图像识别四种方法。
如果您在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}`。
