Figma AI自动生成语义化切图命名与导出配置指南

导出切图时，文件名还是“Slice 1”、“Frame 23”这类毫无意义的编号？开发同事每次都要靠猜来识别资源，效率自然大打折扣。这通常意味着两个环节没打通：一是Figma AI没有介入命名，二是导出设置没有与语义化名称联动。

其实，让Figma AI自动生成清晰、可读的切图名，并直接映射到最终的文件名上，整个过程并不复杂。下面就来拆解一下具体的操作路径。

一、启用Figma原生AI智能重命名功能

一切的基础，是让AI先看懂你的设计。Figma内置的AI能基于图层的视觉内容、位置关系以及常见的UI模式，自动推断出组件的语义，生成类似“主按钮悬停状态”、“个人头像圆形”这种结构清晰的图层名。这个名称，就是后续导出文件名的默认前缀。

操作很简单：在图层面板中，按住Ctrl（Windows）或Cmd（Mac），批量选中所有需要处理的切片、画板或组件实例。然后右键点击任意选中项，在菜单里找到并选择 “Rename with AI”（有些版本显示为“AI Rename Layers”）。稍等片刻，通常一两秒内，图层名称就会自动更新。完成后，记得检查一下图层列表，确保没有漏网之鱼，如果还有嵌套的子图层没被重命名，单独选中它们再操作一次即可。

二、将AI生成名称映射至导出文件名

AI重命名只是第一步，关键是要让导出设置“认”这个新名字。Figma默认会使用图层的原始名称作为导出文件名的基础，所以我们需要手动建立绑定。这个过程完全依赖属性面板，不需要任何插件。

选中一个已经完成AI重命名的切片或画板，在右侧属性面板底部的“Export”区域，点击“+”添加一个导出预设。接着，在新出现的导出条目里，点击格式下拉框旁边的 “Edit filename” 链接（图标是支铅笔）。在弹出的编辑框中，把默认内容删掉，直接输入 {name} 这个占位符——它会被自动替换为当前图层的AI语义化名称。如果需要添加缩放后缀或组织目录，可以扩展成类似 {name}@2x.png 或 assets/{name}.webp 这样的格式。

三、批量应用语义化导出命名规则

当一个页面里有几十个切图时，逐个配置显然太慢了。好在Figma支持批量操作，可以一次性将命名规则覆盖到所有选中的图层上。

首先，在图层面板顶部，点击页面名称旁边的展开箭头，展示出当前页面的所有画板和切片。然后，按住Shift键选中首尾两个已经AI重命名的切片，或者用Ctrl/Cmd键框选所有目标对象。接着，右键点击任意选中项，选择 “Export selection”。此时，右侧的“Export”区域会同时显示所有选中图层的导出条目。你只需要点击其中任意一条右侧的 “Edit filename”，统一输入如 {name}@1x.png 这样的规则，关闭编辑框后，所有已选切片的导出文件名就会同步更新。

四、使用“Semantic Slice Export”社区插件强化命名一致性

对于跨页面、深层嵌套的图层，或者非切片类的导出目标，原生功能可能有些力不从心。这时候，社区插件就能派上用场了。“Semantic Slice Export”这类插件可以扫描整个文件中所有启用了导出的图层，强制注入AI语义名，并按照预设规则生成带路径层级的文件结构，让管理更加清晰。

安装后，从顶部工具栏的“Plugins”菜单中启动它。插件会自动识别所有已启用导出的图层，如果发现还有图层没有语义化名称，它会提示你选择跳过或强制进行AI重命名。勾选“自动重命名”选项再继续，你还可以在导出配置界面中，设定像 “src/assets/icons” 这样的根目录，并启用“保持Figma页面结构中的文件夹层级”选项，让导出的文件结构与你设计稿的组织方式完全对应。