Figma图标命名技巧：分类前缀提升切图效率

在Figma中高效管理海量图标资源，关键在于统一、可读、结构化的图层命名——本文揭秘四种主流插件（Iconify、Rename It、Anima、Figmify）如何一键批量添加分类前缀，从插入自动补全、选中批量追加，到按模板生成结构化名称、依嵌套路径智能继承层级前缀，彻底解决命名混乱导致的切图识别难、导出易出错、团队协作低效等痛点，让图标资产真正“即用即找、所导即所见”。

如果您在Figma中管理大量图标资源，但图层命名混乱、缺乏统一前缀，将导致切图导出时难以识别归属与用途。以下是让图标命名更利于切图的多种实操方法，全部基于Figma插件实现批量添加Icon分类前缀：

一、使用Iconify插件自动补全并标准化命名

Iconify插件不仅可插入矢量图标，还能在插入瞬间为图层自动添加预设分类前缀（如“ic-”“icon-”），避免手动逐个重命名。

1、在Figma桌面端点击右上角“Plugins” → “Search plugins”，输入“Iconify”并安装。

2、打开插件面板，选择任一图标（例如Material Icons中的“home”），点击插入。

3、插入后，该图层名称默认显示为ic-home，前缀“ic-”由插件全局设置决定。

4、点击插件右上角齿轮图标，进入设置页，在“Layer prefix”字段中修改为icon-或ui-icon-等符合团队规范的格式。

二、通过Rename It插件批量添加分类前缀

Rename It支持按图层类型、选中范围或正则匹配条件，对现有图标图层执行批量重命名，适用于已存在但未加前缀的图标集合。

1、安装“Rename It”插件，并选中所有需处理的图标图层（建议先放入同一页面或Frame中便于批量选取）。

2、运行插件，在主界面选择“Add Prefix”模式。

3、在“Prefix”输入框中填入分类标识，例如：nav-icon-（用于导航类）、action-icon-（用于操作类）。

4、勾选“Only selected layers”，点击“Apply”完成批量添加。

三、利用Anima插件结合命名规则模板自动同步

Anima支持将Figma图层命名与前端CSS类名/React组件名双向绑定，其“Naming Rules”功能可为图标图层注入带分类前缀的结构化名称，同时保障切图导出时文件名一致。

1、安装Anima插件并登录账号，在右侧Anima面板中点击“Settings” → “Naming Rules”。

2、新建规则，类型选择“Icon”，触发条件设为“Layer name contains ‘/’ or ‘-icon’”，匹配已有图标图层。

3、在“Output format”中输入模板：icon-{category}-{name}，其中{category}可手动指定为“menu”“status”“social”等。

4、点击“Apply to selected”，插件将遍历所选图层，将原名“bell”重写为icon-status-bell，并同步更新导出资产文件名。

四、借助Figmify插件按文件夹结构生成层级前缀

Figmify允许将图层所在页面/帧/组的嵌套路径转化为命名前缀，特别适合已用文件夹逻辑组织图标的项目，实现“所见即所得”的切图命名。

1、确保图标已按分类存放于不同Frame中，例如：Frame名为“Social Icons”“Form Icons”“System Icons”。

2、安装Figmify插件，选中全部图标Frame，运行插件。

3、在配置项中启用“Use parent frame name as prefix”，并设置分隔符为“-”。

4、执行后，原图层“twitter”将被重命名为social-icons-twitter，原图层“search”变为form-icons-search。

今天关于《Figma图标命名技巧：分类前缀提升切图效率》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！