Figma AI新手必看：First Draft自然语言出图指南

2026-06-12阅读 0热度 0

想让Figma瞬间生成可直接落地的设计稿，无需反复拖拽图层、微调间距或纠结配色？First Draft专为此场景设计——它不依赖你画过多少线框，只在乎提示词写得是否精准。

先定个基调：这个工具的真正门槛不在操作，而在于怎样写提示词。不少人折腾半天结果乱七八糟，根本原因就是“用自然语言”没踩对点。

启动First Draft并确定使用场景

在Figma中打开新文件或已有项目，顶部工具栏找到AI图标（闪电符号），点击后从下拉菜单选择“First Draft”。【务必选择此功能，不要错点“Make Designs”或“Galileo AI”插件入口】

弹出面板后，先确认右上角平台下拉菜单已设为目标终端：iOS、Android或Web Dashboard。这一步看似基础，但选错的话——字体、安全区、元素尺寸全部不匹配，后续修改非常麻烦。

如果当前页面已有内容，First Draft依然可用，但会新建一个Frame插入画布右侧——它不会覆盖原有图层，也不会自动删除旧稿。这点设计挺友好。

在描述框中输入自然语言指令时，必须同时满足三点，否则AI大概率输出散乱布局，结果像开盲盒一样不可控：

① 明确主体类型：写清楚是“登录页”“产品列表页”“后台仪表盘”等，避免“一个界面”“某种页面”这类模糊表述。你越含糊，它越自由发挥。

② 锁定关键组件：直接列出你想要的模块名称，例如“顶部导航栏+搜索框+三张横向卡片+底部Tab Bar”，这比“放几个模块”有效得多。越具体，AI越能理解需求。

③ 植入平台约束：加入一句“严格遵循Human Interface Guidelines”或“使用Ant Design 5.x视觉语言”——这是让AI放弃默认自由发挥的关键刹车。

示例合格提示词：“iOS App个人中心页，含顶部状态栏、头像横幅、4个带图标的功能卡片（设置、订单、收藏、客服）、底部Tab Bar高49pt，所有文字用PingFang SC。”

点击“Make it”后，AI会在几秒内插入1–3个可选方案Frame。别急着改颜色或换图，先做这两步：

方法一：双击进入新Frame，看图层面板左侧是否出现层级命名，如“Header / Avatar Banner / Card Group / Tab Bar”。没有语义化命名，说明提示词缺少结构关键词，需要重试。

方法二：选中整个Frame，在右侧Constraints面板检查主容器是否已设为“Top: Fixed, Left: Fixed, Width: Fixed, Height: Fixed”。【如果宽度显示“Stretch”或约束为空，手机预览时必然错位】

这一步操作很简单，直接点一下约束图标就能切回固定模式。

AI生成的内容默认不能直接交付，但二次编辑成本极低，改起来并不费事：

替换占位图：直接把本地图片拖进对应Image图层，Figma会自动缩放适配，无需调整。

改文案：双击文本图层，删掉“Lorem ipsum”填入真实内容，字体/字号/行高均继承原样式，省去从头设置。

调间距：选中Auto Layout容器（常见于卡片组、列表项），在右侧面板拖动“Gap”滑块，数值实时生效，所见即所得。

删冗余：有些方案会多塞一个“Banner CTA按钮”，如果不需要，直接Delete键删除即可，相邻元素自动重排，非常智能。