设计工具

Figma

它是谁

在浏览器中运行的界面设计工具,内置 AI 能力,让你在写代码之前就能看到产品长什么样。

负责哪一段

负责"设计应用的界面外观和交互原型"这一视觉设计环节,并能将设计直接桥接到代码开发流程中。

什么时候用到

当你想在动手写代码之前先画出页面的草图,或者需要准确地告诉 AI"我想要的界面长什么样"时。

它是什么?

Figma 是一个专门用来设计数字界面的工具。你可以在里面画出网站或 App 每一个页面的样子——按钮放在哪里、文字用多大的字号、背景是什么颜色——一切都在动手写代码之前确定好。

它完全在浏览器中运行,不需要安装任何软件,也支持多人同时编辑同一个设计文件。

它能帮你做什么?

对于使用 AI 来构建产品的人来说,Figma 有一个很实用的价值:它能帮你把脑海中模糊的想法变成具体的视觉参考。与其用文字向 AI 描述"我想要一个漂亮的登录页面"(这太模糊了),不如先在 Figma 中画一个大致的布局草图,再把截图给 AI 参考——AI 生成的结果会精准得多。

Figma 本身也内置了 AI 功能——你可以用自然语言描述想要的界面,它会帮你生成设计初稿。此外,Figma 提供了 MCP 服务,让 AI 编程工具(如 Cursor、VS Code、Claude Code)能直接读取你的 Figma 设计文件作为上下文来生成代码,大幅缩短从设计到代码的距离。

什么时候会用到它?

如果你只是在做一个功能性的小工具,可能不需要 Figma——直接让 AI 边写边调就行。但如果你在做一个面向用户的产品,先用 Figma 把主要页面的设计定下来,会让后续的开发工作事半功倍——你和 AI 都有了一个明确的"设计图"可以参照。

类似替代品

SketchPenpot