Figma快速实现BEM命名规范，AI脚本自动重命名

在Figma中手动遵循BEM命名规范既耗时又容易出错，但如今借助AI驱动的三种高效方案——即开即用的“Rename It”插件、支持语义推断的开源脚本“figma-bem-renamer”，以及面向设计系统团队的Figma API+自托管AI服务集成——设计师和前端开发者可一键实现图层的智能、批量、标准化BEM重命名，大幅提升组件可维护性与开发协同效率，让命名不再成为设计落地的绊脚石。

如果您在Figma中手动为大量图层命名以符合BEM（Block-Element-Modifier）规范，将耗费大量时间且易出错。以下是通过AI驱动的重命名脚本自动实现BEM格式化的具体方法：

一、使用Figma插件“Rename It”配合BEM预设规则

该插件支持正则表达式与模板变量，可将选中图层按BEM结构批量重命名，无需编写代码，适合非技术人员快速上手。

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

2、选中需格式化的图层组（例如一个卡片组件的所有子图层）。

3、运行插件，在模板输入框中填入：card__header--large，其中双下划线表示Element，双短横表示Modifier。

4、勾选“Apply to children recursively”，点击“Rename”完成批量应用。

二、运行开源脚本“figma-bem-renamer”进行智能语义推断

该脚本基于图层层级关系与命名上下文，调用轻量级本地AI模型识别图层角色（Block/Element/Modifier），自动生成合规BEM名称。

1、从GitHub克隆仓库：https://github.com/figma-bem/figma-bem-renamer。

2、在Figma桌面端启用“Developer Mode”，打开Plugins → Development → Import plugin from manifest.json。

3、选择项目中manifest.json文件，加载后右键图层组，选择“BEM Renamer → Auto-detect & Rename”。

4、脚本将自动标注每个图层类型，并生成如button__label--disabled或form__input-field--required等名称。

三、集成Figma API + 自托管AI服务实现动态命名

适用于设计系统团队，通过Webhook将图层结构发送至内部部署的命名推理服务，返回标准化BEM名称并回写至Figma。

1、在Figma文档中创建自定义API token，并记录访问密钥。

2、搭建Python FastAPI服务，接收图层JSON（含type、parent、depth、text内容），调用微调后的BERT命名分类模型。

3、向Figma REST API发起PATCH请求，更新图层name字段，例如将原始名“Title”更新为hero-banner__title--centered。

4、在Figma插件中配置Webhook URL与请求头，触发时自动提交当前选中图层树。

理论要掌握，实操不能落！以上关于《Figma快速实现BEM命名规范，AI脚本自动重命名》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！