Figma AI新手指南:从生成起点到精修终点的完整流程
避免AI直接输出可交付设计
AI生成的图层默认处于扁平位图状态,或为未命名的组。若直接导出为PNG或提交给开发者,所有语义信息与响应逻辑将完全丢失。
第一步:生成后立即右键 → 【Convert to Component】,即便仅为临时占位,也应优先建立组件层级。
第二步:双击进入组件内部,清除所有标记为“Auto Layout off”的警告提示——AI常将文本框设为固定宽高,需手动启用Auto Layout并配置为Hug Contents + Padding。
第三步:重命名图层,采用“Icon/Primary/Button”等语义化命名,否则几分钟后便难以区分哪个是主按钮的变体。
文本内容需谨慎核对,尤其数字与单位
方法一:AI输出“间距8px、圆角4px、字号14px”,直接复制粘贴至Figma数值框会触发单位自动补全。若当前选中文本框而非容器,px可能被误转为em,造成尺寸混乱。
方法二:优先选中目标对象 → 按Ctrl/Cmd+Shift+Y调出“Constraints & Layout”面板 → 在Spacing字段手动输入“8” → 回车确认。此操作绕过文本解析,避免单位误判。
【注意:AI中“12px”在Figma内并不对应字体大小,而是行高值;真正控制字号的是Text Style中的Size字段】
图标生成后务必解构重组
AI生成的SVG图标常夹杂冗余路径、未合并的描边及错误的布尔运算层级。直接复制粘贴至Figma会导致缩放失真、导出模糊、无法填充颜色。
① 选中图标 → 右键 → Ungroup(重复执行2次,确保彻底解散嵌套组)
② 全选所有路径 → 顶部工具栏选择“Boolean Operations” → 选“Union”合并为单一路径
③ 检查描边:若图标含有描边,必须将Stroke Cap设为Round,否则转为组件后缩放时尖角会炸开
④ 拖入Assets面板前,先右键 → Rename → 填入“Icon/Outline/Stroke”等规范名称
用AI撰写文案?先锁定字体与段落样式
AI生成的正文常混用不同字体、行高和字间距,且无法继承当前文档的Type Scale。直接粘贴相当于为后续排版埋下隐患。
优先创建空白Text Frame → 应用已设好的Heading 2或Body Text样式 → 再将AI生成的文案粘贴至其中。
若AI返回带有粗体/斜体标记的Markdown(如**重点**),Figma不会自动识别——需手动选中对应文字 → 点击顶部加粗按钮,否则导出PDF时格式会丢失。