Figma_AI高频组件Slots插槽绑定语义标题技巧【技巧】

Figma中AI生成标题需自动继承H1–H6语义层级，须先将含三文本的Frame转为启用Slots的组件，再为各文本分配小写无空格slot名并标注HTML heading语义描述，最后通过AI Slot Mapper插件或手动拖入验证绑定状态。

你需要让Figma中AI生成的标题自动继承语义层级（H1–H6），避免每次手动调整命名、字体、行高和结构绑定，同时确保后续AI优化或代码导出时能准确识别语义标签。

将标题图层封装为可复用Slots组件

这一步是基础，不执行后续所有语义绑定都会失效。必须用Frame包裹标题文本，再转为组件并启用Slots——直接对单个Text图层启用Slots会失败。

第一步：新建一个空白Frame，宽度设为320px（适配移动端最小视口），高度自适应；在内部按顺序放入三个文本图层，内容分别填“主标题”“章节标题”“段落标题”。

第二步：选中这三个文本图层，统一设置字体大小——h1设为28px、h2设为22px、h3设为16px；行高全部设为1.4，确保视觉层级差异肉眼可辨。

第三步：选中整个Frame → 右键 →「Create Component」→ 在右侧属性面板中点击「Enable Slots」开关，此时Frame图标右下角出现紫色插槽标记。

第四步：依次选中h1、h2、h3文本图层，在右侧Slots设置区分别点击「+ Add Slot」→ 输入slot name：default-slot、section-header-slot、paragraph-text-slot。注意：【slot name必须全小写、不含空格与特殊符号】，否则AI Slot Mapper插件无法匹配。

绑定语义标签并同步至资源库

仅启用Slots还不够，AI需要明确知道每个Slot对应什么语义角色，才能在填充或重命名时触发正确逻辑。

方法一：手动标注语义标签

选中刚创建的主组件实例 → 在右侧属性面板找到「Slot Settings」→ 点击每个Slot右侧的铅笔图标 → 分别输入语义描述：“HTML heading level 1, main page title”、“HTML heading level 2, section introduction”、“HTML heading level 3, content subheading”。这些描述会被AI重命名引擎读取，直接影响图层名生成质量。

方法二：使用AI Slot Mapper插件自动映射

在Figma Community中搜索安装“AI Slot Mapper” → 选中该主组件 → 点击右侧Slot Settings旁的AI图标 → 插件自动扫描资源库中已命名含“h1”“h2”“h3”的组件 → 若检测到名称为“Heading-H1-Primary”或“Text-H2-Section”的组件，会将其列为候选填充项。

注意：插件只识别组件名称中的关键词，不读取description字段。所以如果你的资源库组件没带h1/h2前缀，它就找不到匹配项。

在AI生成稿中插入并验证Slots绑定状态

AI生成的内容若未走Slots路径插入，就会解绑、失语义、退化为普通图层——这是高频翻车点。

第一步：选中AI生成的画板中某处空白区域（如卡片标题区），拖入你刚建好的Slots主组件实例。

第二步：将待填充的标题文本图层（比如AI刚生成的“用户设置”）拖进该实例内——当目标区域出现蓝色高亮边框且提示“Drop into default-slot”时松手。

第三步：立即检查右侧属性栏：若显示「Slot Content: Active」且下方有「default-slot」字段，说明绑定成功；若显示「Detached」或字段为空，则说明拖放位置错误或目标图层未被识别为可填充内容。

第四步：右键该Slot内容 → 选择“Rename with AI” → 观察图层名是否变为“Main Heading User Settings”而非“Text 12”——若成功，证明语义标签已穿透生效。