Figma AI的核心价值
Figma AI（2024-2025年逐步推出）让设计师从重复劳动中解放。最强大的两个功能：Make Designs（自然语言直接生成设计稿）和Auto Layout（自动布局响应式调整）。对UI设计师来说，AI不是替代创作而是替代机械操作。
第一步：开启Figma AI
- 访问 figma.com 登录账号
- 新建文件
- 检查账号是否支持AI——免费版每月有限次AI生成，专业版无限制
- 在工具栏找到AI图标
AI能力集成在Figma主线功能，不需要单独插件。
第二步：Auto Layout自动布局基础
Auto Layout是Figma 2019年的功能，AI时代更重要：
- 创建Frame
- 右键 → Add Auto Layout
- 设置方向（横向/纵向）、间距、内边距
- 向Frame拖元素，自动按规则排列
实例：做一个卡片
- Frame里放：图片+标题+描述+按钮
- Auto Layout Vertical，间距16，padding 20
- 修改任何元素大小，Frame自适应
第三步：嵌套Auto Layout
复杂UI用嵌套Auto Layout：
外层Frame（Vertical）
└ 头部Frame（Horizontal）
├ Logo
└ 菜单
└ 内容Frame（Horizontal）
├ 侧边栏（Vertical）
└ 主内容（Vertical）
这种结构响应式调整时所有元素跟着调整。
第四步：Make Designs——AI一句话出设计
Figma AI的核心能力。在画布空白处或菜单：
为健身App设计一个首页，包含：顶部导航（Logo+菜单）、首屏（标题+副标题+开始按钮）、功能介绍区（3列卡片）、底部CTA。
Figma AI会：
- 生成完整的Frame结构
- 填充占位文字和图片
- 应用现代设计风格
生成后可以基于此修改——这是设计师AI协作的起点而非终点。
第五步：Make Prototype交互
基础设计稿出来后，让AI加交互：
给首页的’开始’按钮加点击交互，跳转到注册页面。
Figma AI识别按钮和注册页frame，添加链接。
第六步：智能填充内容
占位文字替换为真实内容：
- 选中文字层
- 右键 → Replace with AI content
- 类型：长文/短文/数字/列表
- AI生成符合场景的真实文字
例：选中一个「健身App」按钮旁边描述，AI自动生成相关健身文案。
第七步：智能图片替换
占位图片替换：
- 选中图片层
- 右键 → Replace with AI image
- 输入描述（如：现代办公室的人在做瑜伽）
- Figma生成或调用外部模型（如DALL-E）
第八步：设计系统建立
把常用样式建成组件：
- 选中一个按钮
- 右键 → Create Component
- 主组件修改，全部实例同步更新
配合Variables（变量）和Styles（样式）：
- 改一处主色，全局生效
- 改一处文字大小，全组件生效
第九步：AI辅助设计审查
选中设计稿，让AI审查：
请检查这个App设计稿的可访问性问题（颜色对比度、字号、点击区域大小）和设计一致性（间距、对齐、配色）。
AI输出结构化问题清单，配合修复建议。
第十步：批量设计变体
为A/B测试生成多个版本：
为这个落地页生成3个变体：版本A用蓝色CTA，版本B绿色，版本C橘色。其余元素保持一致。
AI一次性出3版对比。
常用快捷键
- A——创建Frame
- T——文字
- O——椭圆
- R——矩形
- Shift+A——Auto Layout
- Cmd+K（Mac）/Ctrl+K（Win）——搜索命令
实战场景
快速原型
产品经理描述需求→AI生成初稿→设计师精修，2小时完成一天的原型工作。
批量营销图
用Variables定义颜色+文字，一次改主元素所有变体同步，10分钟出30张活动banner。
设计走查
设计师交付设计前用AI自检，发现明显问题再提交。
限制与替代
- Make Designs对复杂交互逻辑支持弱
- AI生成的视觉风格有限，独特品牌需要手动精调
- 免费版AI额度低，重度使用需付费版
- 替代：即时设计AI、MasterGo AI等国产工具