Figma AI新手必学：Design Agent直接在画布设计教程

你刚打开Figma，客户的消息便弹了出来：“首页按钮再大一些，主图换三个版本，暗色模式也要出一版。”放在以前，得手动调整38次参数、复制粘贴27个页面、切换4套主题色——光是想想就让人头疼。但现在，Design Agent能在画布上直接完成这一切：无需切换窗口、不会丢失上下文、也无需重建整个设计系统。

启用Design Agent并确认权限

登录Figma后，打开任意现有文件或新建空白文件 → 点击左侧面板底部的【Agent】图标（注意：它不在插件栏的AI工具中，而是一个独立图标，形似悬浮对话气泡）→ 首次使用会弹出权限请求窗口，勾选“允许访问当前文件的设计系统、组件、变量和评论” → 点击“Allow”。这一步非常关键：如果不勾选，Agent就无法读取你的Token和组件库，所有生成内容都会脱离品牌规范。

右上角状态栏出现蓝色“Agent active”提示，表示已准备就绪。

用自然语言在画布上修改按钮尺寸

方法一：直接选中按钮图层 → 右键 → 选择“Ask Agent” → 输入“把按钮高度增加到64px，保持内边距一致” → 回车。

方法二：不选中任何图层 → 在画布空白处右键 → “Ask Agent” → 输入“将所有Primary Button组件的高度统一设为64px，并同步更新悬停和禁用状态” → Agent会自动识别组件变体并批量修改。但有一个前提：按钮必须是已经发布为“Main Component”的版本，否则它只会更改当前实例。

方法三：在左侧图层面板中找到按钮所在的Frame → 将Frame拖到Agent输入框上方 → 松手 → 输入“把这个区域里所有按钮放大1.5倍，保持圆角和阴影不变” → Agent会根据布局约束智能缩放，而不是简单生硬地拉伸。

批量生成暗色模式页面

第一步：确保你已经定义了Surface Dark、Text Inverse等暗色Token，并保存在Variables面板中。

第二步：在画布上框选首页所有主体内容的Frame（不包括导航栏和页脚）→ 右键 → “Ask Agent” → 输入“基于当前选区，生成一套暗色模式版本，使用已定义的Surface Dark和Text Inverse变量，保留所有交互状态”。

第三步：Agent会在原Frame右侧自动生成新Frame，命名为“Homepage_Dark_V1”，所有文本颜色、背景色、图标填充色会自动映射到对应的暗色Token，按钮的悬停态、加载态等交互逻辑也能完整继承下来。

第四步：点击新生成的Frame → 在右侧面板检查Fill、Stroke、Text Color属性，确认全部绑定的是Variables而非固定色值。如果出现#1E293B这类硬编码色值，说明Token没有被正确识别，此时需要返回Variables面板检查命名是否完全匹配——大小写、空格、下划线都敏感。

用Skill文件约束AI行为

在Figma项目根目录创建一个新页面，命名为“DESIGN.md” → 点击右上角“⋯” → “Export as Markdown” → 保存为本地文件 → 用文本编辑器打开，按以下结构填写：

```markdown
## Design System Constraints
- Primary Button must use Token: color/brand/primary
- All headings use Text Style: Heading 2
- No hex colors allowed in production frames
```

回到Figma → 左侧Assets → 点击“Upload Skill” → 选择刚编辑好的DESIGN.md → 上传成功后，Agent所有后续操作都会强制遵守该约束。比如生成新按钮时，即使你未提及Token，它也会自动绑定color/brand/primary。

需要特别提醒：Skill文件上传后不可编辑，如果需要调整，只能删除后重新上传。因此上传前请反复核对Token路径是否与Variables面板中的完全一致，否则后续修改会较为繁琐。

用ParallelPrompting并发生成三版主图方案

选中首页Banner Frame → 右键 → “Ask Agent” → 输入以下三行指令（每行一个独立请求，用换行分隔）：

“生成科技感渐变主图，配文案‘Accelerate Your Workflow’”
“生成极简留白主图，配文案‘Design, Delivered’”
“生成插画风主图，配文案‘Where Ideas Take Shape’”

Agent会在10秒内生成三个新Frame，分别命名为Banner_V1～V3，全部嵌入当前页面，位置紧挨着原Banner下方。每个Frame都自动应用了你定义的Typography Style和Spacing Token，无需手动对齐或调色。

生成完成后，直接拖动任一Banner Frame到原型面板设置交互跳转即可——Agent生成的内容天然支持Auto Layout和Constraints，可直接用于高保真演示。

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