Figma AI新手必看：自然语言First Draft出图教程

想要用一句话就让 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 稿变成真正可用的设计稿

AI 生成的内容默认无法直接交付，但二次编辑成本极低，调整起来并不繁琐：

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

修改文案：双击文本图层，删除“Lorem ipsum”并填入真实内容，字体、字号、行高均继承原有样式，省去从头设置的麻烦。

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

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

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：Figma AI新手必看：自然语言First Draft出图教程要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题