可借助figma ai从现有画板自动识别、命名并提取原子级设计元素：一、启用插件并授权图层访问；二、运行ai自动命名与语义标注；三、批量创建主组件；四、用boolean属性压缩变体；五、同步design tokens至样式属性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您已完成初步界面设计，但尚未系统化组织为可复用的组件库，则可借助Figma AI的语义识别与图层理解能力，从现有画板中自动识别、命名并提取原子级设计元素。以下是实现该目标的具体操作路径：
一、启用Figma AI并授权访问当前文件
Figma AI需获得对当前文档图层结构的读取权限，才能执行语义分析与自动命名。该步骤是后续所有AI驱动操作的前提。
1、在Figma编辑器右上角点击“Plugins”按钮，选择“Figma AI”插件入口。
2、若首次使用，点击“Allow access”授予图层读取与元数据写入权限。
3、在弹出面板中确认当前文件为激活状态，并勾选“Analyze all pages for component candidates”选项。
二、运行AI图层自动命名与语义标注
该步骤利用Figma AI内置的视觉语言模型（GPT-4o + Titan联合推理），对未命名图层进行上下文感知式识别，生成符合BEM或Atomic Design规范的语义化名称，为后续原子提取提供结构依据。
1、在AI面板中选择“Auto-name layers”功能模块。
2、点击“Run analysis”，AI将扫描全部页面中的独立图层及嵌套组，识别其视觉特征与交互意图。
3、分析完成后，查看命名建议列表，对含“Button”“Icon”“Badge”“Input”等前缀的图层组重点标记为原子候选。
三、批量提取原子组件并创建主组件（Main Component）
基于已命名图层，Figma AI可自动识别具有相同结构与属性的图层组，将其转换为主组件，并保留原始尺寸、约束与填充逻辑。
1、按住Ctrl（Windows）或Cmd（Mac）键，多选所有被AI标注为同一类型（如“Button/Primary/Large”）的图层组。
2、右键菜单中选择“Create component from selection”。
3、在组件编辑模式下，进入Properties面板，手动设置变体属性（如state、size），并确认主组件命名为“Atom/Button”且存入“01-Atoms”页面。
四、使用Boolean属性压缩变体数量
避免为每个视觉组合创建独立图层副本，而是通过布尔开关控制子元素显隐，使单个原子组件承载全部状态逻辑，显著降低组件库体积与维护成本。
1、在已创建的原子组件内，选中需条件显示的图层（如加载图标、禁用遮罩）。
2、右侧面板点击“+ Add property” → 选择“Boolean” → 命名为“isLoading”或“isDisabled”。
3、为该Boolean属性添加两个变体值：true与false，并分别调整对应图层的可见性。
4、保存后验证：在实例中切换Boolean开关，确认所有状态响应准确且无图层错位。
五、同步Design Tokens至原子组件样式属性
将颜色、文字、间距等基础变量绑定至原子组件的样式字段，确保上游Token变更时，所有引用该原子的实例自动更新，实现设计系统真正意义上的单点控制。
1、打开“00-Design Tokens”页面，确认已定义“Color/Primary”“Text/Body/Small”等Token变量。
2、进入“Atom/Button”主组件编辑模式，在Fill属性旁点击“Link to variable”图标。
3、从变量树中选择“Color/Primary”作为背景色绑定源，并在Typography设置中绑定对应文字Token。
4、退出编辑，检查任意Button实例是否实时响应Token色值变更。
