Figma 是目前全球使用最广泛的 UI 设计工具,绝大多数互联网产品的设计工作都在 Figma 里进行。但 Figma 本身是设计工具,不是 AI 工具——画图层、拖组件、调样式,这些都要设计师手动完成。Diagram 改变了这个流程的一部分:把 AI 能力直接带进 Figma,让 AI 在设计师工作的地方帮忙,而不是要求设计师离开 Figma 去另一个工具里"借助 AI"再回来。
Diagram 是什么
Diagram 是一家专注于将 AI 能力整合进设计工具的公司,最核心的产品是 Magician——一个 Figma 插件,让设计师在 Figma 内部就能使用 AI 图标生成、AI 图片生成、AI 文案填充、图层自动重命名等功能。
2023 年,Figma 官方收购了 Diagram,将团队纳入 Figma。这个收购信号非常清晰:Figma 认为 AI 辅助设计是未来的核心方向,而 Diagram 正是这个方向上走得最早、技术积累最好的团队之一。收购后,Diagram 的技术能力开始逐步融入 Figma 的原生功能,也就是 Figma AI。
Magician 核心功能详解
AI 图标生成
传统的 Figma 工作流里,需要图标就去 Figma 社区找图标库,或者去 IconFinder、Flaticon 等网站搜索,找到了还要导入,找不到就卡住。Magician 的图标生成解决了这个问题:
直接在 Figma 里输入描述,比如"一个表示"数据同步"功能的细线风格图标",AI 生成对应的矢量图标,输出 SVG 格式,直接在 Figma 里可编辑。
这个功能的价值在于:消除了"出去找图标"这个打断设计思路的步骤。设计师在 Figma 里构建界面的时候,遇到需要图标的地方,不再需要暂停工作去另一个地方搜索,直接描述、生成、继续工作。
图标风格可以通过描述来控制——线性图标、实心图标、彩色图标、特定风格,AI 会理解并生成对应样式。
AI 图片生成(设计稿占位图)
在 Figma 设计稿里,有很多地方需要图片:用户头像占位区、产品图展示位、文章封面图……传统做法是放灰色占位框,或者找几张股票图片将就用,但这让设计稿演示效果很差,客户看不出真实的产品感受。
Magician 可以在 Figma 的图片框里直接生成 AI 图片。选中一个图片占位层,描述"户外运动场景,阳光,年轻人,积极氛围",AI 生成对应的图片并填充进去。设计稿里每个图片位置都有真实感的内容,整体 Mockup 的说服力大幅提升。
这对于向客户展示设计方向特别有价值——展示一个真实感强的 Mockup 和展示一个满是灰色占位框的线框图,客户的反应和反馈质量完全不同。
AI 文案填充
Figma 里的文字占位内容通常要么是"Lorem ipsum",要么是设计师临时随便打的文字,和真实产品文案差很多。Magician 可以根据当前的文字元素类型,生成更有意义的示例文案:
- 按钮文字:生成合适的 CTA 文案("立即开始"、"免费试用 14 天")
- 描述段落:生成符合产品调性的示例介绍文字
- 商品名称:生成符合品类的示例产品名
- 标题文案:生成适合相应页面位置的标题
有了更真实的文案,设计稿在展示时更接近真实产品的感受,文字排版的实际效果也能得到更准确的验证。
图层智能重命名
这是一个不起眼但每个 Figma 用户都需要的功能。在 Figma 里工作久了,图层面板里往往堆满了"Frame 1"、"Rectangle 47"、"Group 13"这样毫无意义的名字,交付设计稿时需要花大量时间手动整理。
Magician 可以分析图层内容,自动给出有语义的名字:一个包含导航菜单内容的 Frame 重命名为"导航栏",一个主要的 CTA 按钮重命名为"按钮_主要_橙色",以此类推。对于需要交付整洁设计稿给开发团队的设计师,这个功能节省的时间不少。
设计变体生成
在一个设计基础上,生成多个不同风格或内容的变体版本,快速探索设计方向。不需要手动一一复制修改,AI 帮助扩展可能性。
Figma 收购的意义
Figma 在 2023 年收购 Diagram 的决定背后有明确的战略考量:AI 辅助设计会成为设计工具的标准能力,就像今天的拼写检查和自动对齐一样基础。Figma 不想在这波变革里落后,而 Diagram 团队在"把 AI 用于设计工作流"这个方向上有最深的技术积累和最多的实践经验。
收购后的进展:
- Diagram 团队加入 Figma,开始深度参与 Figma AI 功能的开发
- Figma 在 2024 年推出了 Figma AI 功能集,里面有很多功能和 Magician 的功能高度重合
- Magician 作为独立插件的必要性在降低,但它的技术思路和功能设计深度影响了 Figma 的产品方向
对用户来说,这意味着很多原来需要安装插件才能用的 AI 功能,现在可能直接在 Figma 原生界面里就能找到,不再需要额外安装 Magician。
与其他设计 AI 工具的比较
对比 Creatie.ai:Creatie.ai 是 AI 从零生成 UI 的工具,从一句话描述直接输出完整界面;Magician/Diagram 是嵌入 Figma 的辅助工具,是帮助已经在 Figma 里工作的设计师提效,两者解决的问题阶段不同。
对比 Galileo AI:Galileo 同样从文字描述生成 UI 界面,不是 Figma 插件,适合从零开始生成界面的场景;Magician 更适合已经有 Figma 工作流的设计师,补充 AI 能力而不是替换整个工作流。
对比 Figma AI(原生):这两者的关系很特殊——Diagram 的技术正在融入 Figma AI,两者是从竞品关系变成了统一关系。对用户来说,意义在于 Figma 原生 AI 功能会越来越强,直接升级 Figma 就能用到这些能力。
对比 Adobe XD + Adobe Sensei:Adobe 在 XD 等设计工具里整合了 Adobe Sensei AI 能力,是 Figma 生态的竞争对手方向。选 Figma 还是 Adobe 生态本身是设计师工具选择的问题,两个方向都在积极整合 AI 能力。
谁适合用
Figma 重度用户:每天大量时间在 Figma 里工作,Magician 的各项功能都有直接的效率价值,特别是图标生成和重命名功能,节省的时间积累下来很可观。
需要快速制作演示 Mockup 的设计师:向客户或者投资人展示产品界面,AI 生成的占位图片和示例文案让 Mockup 更有说服力,提高演示效果。
跟进 Figma AI 发展的设计师:了解 Diagram/Magician,就是了解 Figma AI 的前身和技术方向,对于关注设计工具发展趋势的设计师有参考价值。
设计团队的效率优化:批量图层重命名、快速占位图生成,在大型设计项目里节省的时间很实际。
价格
Magician 插件有免费版,基础功能可以免费体验;完整功能需要订阅付费。由于 Diagram 已被 Figma 收购,价格策略和未来功能整合的方式可能有调整,建议以官网最新信息为准。
Diagram 的收购是设计工具 AI 化大趋势下的一个缩影:当设计工具越来越多地整合 AI 能力,设计师的日常工作会逐渐改变。不是 AI 替代设计师,而是那些善用 AI 工具的设计师,效率会比不用 AI 的设计师高出一大截。Diagram 和 Magician 代表的,正是这种融合的方向。