Figma
基于浏览器的协作式 UI 设计工具，支持矢量设计、原型交互、组件化设计系统和开发者交付，是当前产品设计团队最主流的设计协作平台之一；其 AI 功能 Figma Make 可按图片还原页面并保留自动布局
简介
Figma 是一款基于浏览器的协作式界面设计工具，由 Dylan Field 和 Evan Wallace 于 2012 年创立。它支持矢量设计、原型交互、组件化设计系统、版本管理和开发者交付等完整设计流程，是当前全球产品设计团队最主流的设计协作平台之一。
Figma 的核心优势在于实时多人协作（类似 Google Docs 的协作体验）、基于浏览器的跨平台访问（无需安装客户端）、强大的组件化设计系统（支持组件变体、自动布局、Design Token）以及丰富的插件生态。在 B 端产品设计领域，Figma 的自动布局（Auto Layout）能力尤为重要——它让设计稿像前端代码一样具备响应式特性，修改字段、调整模块后布局自动适配，大幅降低后续维护成本。
2025-2026 年，Figma 推出了 AI 功能 Figma Make，可以根据图片或描述自动生成可编辑的设计稿，并保留自动布局结构，进一步降低了从视觉稿到可交付设计稿的转换成本。
关键信息
- 类型：工具 / 设计平台
- 领域：UI/UX 设计、产品设计、设计协作
- 官方网站：https://www.figma.com
- 定价：免费版（最多 3 个项目）+ Professional / Organization / Enterprise 付费版
- AI 功能：Figma Make（按图片/描述生成可编辑设计稿，保留自动布局）
- 相关概念：GPT Image 2、A2UI、设计系统、组件化设计
核心特性
定义
Figma 是面向产品设计团队的云端协作设计平台，提供从线框图到高保真设计稿、从原型交互到开发者交付的全流程能力。
核心组成
- 矢量编辑引擎：钢笔工具、布尔运算、矢量网络，支持精确的 UI 元素绘制
- 自动布局（Auto Layout）：设计稿具备响应式特性，修改内容后布局自动适配，是 B 端设计的核心能力
- 组件化设计系统：支持主组件、实例组件、组件变体（Variants），可构建完整的设计系统
- 实时多人协作：多人同时编辑同一文件，光标实时可见，类似 Google Docs 体验
- 原型交互：支持页面跳转、组件交互、Smart Animate 动画，可直接在 Figma 内完成原型演示
- 版本历史：自动保存版本，支持回溯和分支管理
- 开发者交付（Dev Mode）：开发者可直接查看设计稿的 CSS/iOS/Android 代码片段、标注间距和尺寸
- 插件生态：超过 1000+ 插件，覆盖图标库、设计规范检查、数据填充等场景
- Figma Make（AI 功能）：根据图片或文字描述自动生成可编辑设计稿，保留自动布局结构
与 image2 的协作模式
在 B 端 UI 设计场景中，Figma 与 GPT Image 2 形成互补关系：
- image2 负责视觉探索：生成 Banner、卡片、图标、插画和整体氛围，快速打开视觉方向
- Figma 负责结构承接：把视觉稿转化为可编辑、可调整、可继续搭建的设计稿
- 两种回写路径：
- image2 直写 Figma：视觉质感保留好，但无自动布局，需人工修正
- Figma Make 按图还原：视觉效果稍弱，但保留自动布局，后续维护成本低
- 最佳实践：两种方式组合使用，先 image2 保视觉细节，再 Figma Make 保结构和自动布局，最后设计师合并
自动布局（Auto Layout）的价值
自动布局是 Figma 在 B 端设计场景中最关键的能力：
- 修改字段内容后，布局自动适配，无需手动调整间距
- 增删模块后，其他模块自动重排
- 设计稿更接近前端代码的响应式行为，减少设计到开发的还原误差
- 对于政企 B 端项目（业务逻辑稳定但视觉持续迭代），自动布局能显著降低修改成本
不同素材中的观点
- 2026-06-17-001354-tg-1b9f80：Figma 是 B 端 UI 设计工作流的核心结构承接工具。作者通过一个真实供电所工作台案例验证：1) image2 直写 Figma 适合保留视觉细节（小图标、装饰元素可能以 SVG 形式生成），但没有自动布局，页面细节仍需大量人工修正；2) Figma Make 按图还原的关键优势是自动布局，“对真实项目很关键，因为后面一定会改字段、改数据、改模块内容”；3) 最佳做法是两种方式组合——先 image2 保视觉，再 Figma Make 保结构，最后设计师合并。作者还强调了 Figma 连接前的准备：确认 AI credits 够用、登录 Figma 账号、浏览器授权。
实用信息
- 使用方式：浏览器访问 figma.com 或下载桌面客户端，注册后即可使用
- Figma Make 使用：在 Figma 文件侧边导航找到应用入口，搜索 Figma Make 插件，连接后可直接在 ChatGPT 对话中调用
- 自动布局设置：选中 Frame 后点击右侧面板的 Auto Layout 按钮，设置方向、间距、内边距
- 适用场景：B 端后台设计、移动端 UI 设计、设计系统搭建、设计到开发交付、原型演示
- 注意事项：Figma Make 需要 Figma 付费版的 AI credits，免费版额度有限；复制 Figma Make 生成的内容到 Figma 时建议把窗口拉大，让页面显示尽可能完整