first draft是figma内置ai工具,需通过顶部闪电图标选择并严格按三要素写提示词(主体类型、关键组件、平台约束),生成后须检查图层命名与容器约束方可高效微调。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

想用一句话就让Figma自动生成可用的设计稿,而不是反复拖拽图层、调整间距、纠结配色?First Draft正是为此而生——它不依赖你画过多少线框,只认你写对不对的那句提示词。
启动First Draft并选择适用场景
打开Figma新文件或已有项目,在顶部工具栏找到AI图标(闪电符号),点击后从下拉菜单中选择“First Draft”。【必须选中此功能,而非“Make Designs”或“Galileo AI”插件入口】
弹出面板后,先确认右上角平台下拉菜单已设为目标终端:iOS、Android或Web Dashboard。选错会导致生成元素尺寸/字体/安全区全部失准。
若当前页面已有内容,First Draft仍可运行,但会新建一个Frame插入画布右侧——它不会覆盖原有图层,也不会自动删掉旧稿。
写好提示词的三个硬性要求
在描述框中输入自然语言指令时,必须同时满足以下三点,否则AI大概率输出自由散装布局:
① 明确主体类型:写清是“登录页”“产品列表页”“后台仪表盘”等,避免用“一个界面”“某种页面”等模糊表述。
② 锁定关键组件:直接写出你想要的模块名称,例如“顶部导航栏+搜索框+三张横向卡片+底部Tab Bar”,比“放几个模块”更有效。
③ 植入平台约束:加入一句如“严格遵循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键删除即可,相邻元素自动重排。











