想要用一句话就让 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 键删除即可，相邻元素会自动重新排列，操作非常智能。