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。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于科技周边的相关知识，也可关注golang学习网公众号。