一、什么是 Figma Make
Figma Make 是 Figma 于 2025 年在 Config 大会上推出的 AI 驱动的 Prompt-to-App 工具，可将自然语言描述或现有 Figma 设计稿转换为可交互原型、网页或 Web App，支持通过聊天式界面进行迭代修改。 它基于 Anthropic 的 Claude 3.7 模型，能结合设计稿元数据生成代码，并允许逐元素编辑样式与交互逻辑。
二、主要功能与用法亮点
- 对话式 AI 聊天界面：可以直接对话让 AI 根据提示生成 UI，附加已有 Figma 设计稿以控制视觉风格。
- 导入设计稿生成代码：支持将 Figma 框架粘贴进聊天窗口，AI 基于这些设计自动生成对应的 React/Vue/Flutter 或标准前端代码。
- 元素级迭代控制：点击画布中的元素，即可针对该元素提出修改如字体、颜色、交互动效等提示进行调整。
- 互动原型与代码预览：AI 生成预览界面可测试 hover、弹窗等交互效果，同时可查看后端可用代码。
- 发布功能（仅全座席订阅用户）：部分订阅用户能够将原型发布成 URL 访问的 Web App。
- AI 积分系统：开放给所有用户试用，但完整功能与无限使用权仅限 Full-Seat 用户；其他用户有 AI 积分限制。
三、优点分析
- 高效原型生成：极大节省了传统提案与原型制作时间，尤其适合快速验证想法。
- 设计稿还原较高：在结构清晰的设计系统下，生成结果与原始设计对齐度较高，甚至能捕捉 hover 状态等互动逻辑。
- 团队协作便捷：设计师与开发者可在同一对话/文件中共同编辑和查看生成结果，实现边设计边编码的协作流程。
- 未来愿景明确：Figma 致力于将 Make 打造成设计与开发打通的枢纽工具，未来还可能整合可访问性检查、分析反馈、设计系统同步等能力。
四、局限与挑战
- 不稳定的视觉质量：对于未使用 auto-layout 的快速草图设计稿，生成效果可能混乱，字体样式、布局常常不准确。
- 决策逻辑偏差：AI 有时会替换设计元素（如将 radio 改为 select），甚至未询问便擅自决定，需更多交互与确认机制。
- 复杂交互与业务逻辑局限：当前还不能生成支付流程或复杂状态管理等业务逻辑，需要人工干预完善代码。
- 生成代码需优化：自动生成的代码偶有冗余样式、性能问题和可访问性短板，需额外优化处理。
五、适用人群与场景推荐
| 场景 | 适合人群 | 说明 |
|---|---|---|
| 快速原型 & 概念验证 | UI/UX 设计师，产品经理 | 快速把草图或想法转为可交互原型 |
| 简单交互页面生成 | 设计者／非技术人员 | 比如登录页、展示页、促销页等 |
| 团队协作与设计系统校验 | 跨职能设计＋开发团队 | 可提升设计一致性并减少交接误差 |
| AI-assisted 可访问性／QA 自动化 | 未来潜在场景 | 当前仍在预研，实现机制尚未完善 |
六、发展前景 & 建议
- 模型与流程优化需加强：增强对复杂 UI 结构和状态逻辑的理解，加入选择确认机制以避免 AI 擅自改动设计意图。
- 开放插件与集成能力：未来可与代码仓库、设计系统管理工具、分析平台深度联动，实现一边设计一边上线的闭环流程。
- 提升可访问性与质量检测能力：若能集成自动 W.C.A.G 检测与性能优化建议，将大大增强生产可用性。
