Figma设计稿自动化命名检查可通过四种方法实现:一、用rules-figma规则引擎扫描导出JSON;二、用JavaScript脚本调用API自定义Lint;三、用Naming Convention Checker等插件实时提示;四、在CI/CD中嵌入命名检查钩子。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在Figma中协作交付设计稿时频繁遭遇图层命名混乱、组件命名不一致或命名不符合团队规范的问题,则可能是由于缺乏自动化命名校验机制。以下是实现Figma设计稿自动化命名检查并应用Lint工具实时扫描的多种方法:
一、使用 rules-figma 规则引擎配置命名规范检查
rules-figma 是一个开源命令行工具,支持通过 YAML 或 JSON 定义命名规则,并可集成至本地脚本或 CI/CD 流程中,对导出的 Figma JSON 文件执行静态扫描,识别违反命名约定的图层与组件。
1、访问 https://github.com/radix-ui/rules-figma 克隆项目仓库。
2、在项目根目录下创建 rules.yml 配置文件,定义命名规则,例如要求所有按钮组件以 Btn/ 开头,所有图标图层必须包含 Icon 后缀。
3、使用 Figma 的 API 导出目标文件为 .fig 格式后,通过插件或脚本将其转换为可解析的 JSON 结构(如使用 figma-export 工具)。
4、运行命令 npx rules-figma check --config rules.yml --file design.json 执行扫描,输出所有命名违规项及具体路径。
二、基于 JavaScript 规则引擎编写自定义命名 Lint 脚本
该方法适用于已有成熟设计系统且需深度定制命名逻辑的团队,通过直接解析 Figma 文件结构(.fig 二进制或通过 Figma REST API 获取的 JSON 数据),在本地或 Node.js 环境中运行轻量级 Lint 检查。
1、启用 Figma 开发者模式,在设置中获取个人 Personal Access Token 并配置环境变量。
2、调用 Figma REST API 的 GET /v1/files/{file_key}/nodes 接口,传入节点 ID 列表,获取指定页面内全部图层的名称与类型数据。
3、编写 JavaScript 脚本,遍历返回的 name 字段,应用正则表达式匹配策略,例如:/^Icon\.[A-Z][a-z]+$/ 校验图标命名格式。
4、对每处不匹配项生成结构化报告,包括节点 ID、所在页面、原始名称与建议修正形式,并输出至控制台或 CSV 文件。
三、集成 Figma 插件实现实时命名提示
部分 Figma 插件可在设计过程中即时反馈命名问题,虽不替代后端 Lint,但能显著降低人工疏漏率,属于“设计即检查”的轻量级实践方式。
1、在 Figma 编辑器中点击左上角 Plugins → Search plugins,搜索并安装插件 Naming Convention Checker 或 Layer Name Linter。
2、安装完成后,在画布任意位置右键,选择 Plugins → Naming Convention Checker → Run。
3、在弹出面板中输入预设命名模板,例如 ComponentType/VariantName-State,并勾选启用实时高亮。
4、插件将自动遍历当前页面所有图层,对不符合模板的图层名称添加 红色波浪下划线,悬停即可查看具体不合规原因。
四、在 CI/CD 流程中嵌入命名检查钩子
将命名规范检查作为设计资产入库前的强制门禁,确保每次提交至设计系统仓库的 Figma 文件均通过命名一致性验证,防止不合规设计流入下游开发环节。
1、在团队使用的 Git 仓库(如 GitHub/GitLab)中配置 pre-push 或 pre-commit 钩子,触发本地检查脚本。
2、编写 Shell 脚本,调用 figma-cli 工具下载最新 Figma 文件版本,并提取其元数据 JSON。
3、将提取的数据传入 rules-figma 或自定义 Node.js Linter,执行命名规则校验。
4、若检测到命名错误,脚本返回非零退出码,中断推送流程,并在终端打印违规图层列表及修复指引。


















