Figma 能帮助独立开发者做什么？
简单介绍 Figma 软件，并描述在 AI 编程时代，Figma 能帮助非设计师的独立开发做什么，未来的设计和开发的协同会是什么。
本文偏向于 Figma 的基础介绍，对于 Figma 目前的各种功能场景做了简要介绍。
Figma 一直都是设计领域的宠儿，它开创了设计协作的新范式，包括在国内也有多家公司竞相模仿。 但很多人不知道，现在 Figma 的活跃用户中有 2/3 都不是设计师，而是覆盖了产品经理、开发者、运营、市场等更广泛的产品团队成员。这也代表着 Figma 从“设计工具”转型为“全流程产品协作平台”的一种标志。
今天想跟大家讨论的，是在 AI 编程盛行的当下，作为一名非技术背景的独立产品开发者，Figma 对于我们来说意味着什么？是否还有必要去使用这样的一款工具呢？
我想介绍这款工具，是因为很多朋友对设计工具不了解，但日常生活中又有不少
今天的分享围绕 Figma 的一些玩法，不会深入到如何做好设计与如何使用 Figma 操作的细节上，会围绕在 SCAI 的小伙伴可以用 Figma 做什么的角度上。 如果大家希望听到如何做好设计和用户体验，下次我再梳理分享。
内容大纲：
- Figma 的基础概念
- Figma 的基本操作演示
- Figma 的画板功能用法
- 竞品分析
- 图片收藏
- Figma 的模板介绍
- Figma 和 AI 编程的协同
- 官方开发模式
- 插件查看代码
- 与 Cursor 的协同
- 与 Stitch 的协同
一、Figma 基础概念
可以理解为“设计师的在线画板”，是一款让大家在网页上就能用的设计工具。它最大的特点是——不需要安装软件，打开浏览器就能用，而且可以多人一起协作，就像用在线文档一样方便。
1.1 Figma 能做什么？
- 画界面：比如手机App、网站的页面长什么样，设计师都可以用 Figma 画出来。
- 团队协作：多个人可以同时在同一个设计稿上工作，实时看到对方的修改，像一起编辑一份文档一样。
- 随时随地访问：只要有网络、有浏览器，Windows、Mac、甚至 Linux 都能用。
- 评论和反馈：产品经理、开发、老板都能直接在设计稿上留言，沟通更高效。
- 开发对接：进入Dev Mode后，变量、组件、切图、CSS/Swift 代码一键复制，无需第三方工具。
1.2 为什么 Figma 受欢迎？
- 简单易用：不用下载，注册就能用，界面直观，容易上手。
- 省时省力：设计师不用反复发文件，团队成员随时能看到最新版本。
- 适合远程办公：疫情期间，大家在家也能一起做设计，效率不打折
- 丰富的生态圈：插件、模板、组件库生态丰富
1.3 与 Photoshop 和 Sketch 的差别
Photoshop
- 面向图像编辑与视觉合成，像素级精细处理无可替代；做 UI 时反而累赘。
Sketch
- Mac 专属、专注产品界面 UI，与插件生态配合良好；但协作、版本管理要靠额外服务。
Figma
- 从诞生第一天就把“浏览器协作”写进 DNA，随后又把 AI、Dev Mode、原型、版本控制全部拉到同一张画布上，把“设计”从单机软件变成团队操作系统。
1.4 Figma 现在的定位是什么
在互联网公司里，它是把设计、原型、评审、文案和前端对接捏合到一起的一站式空间。
但是在 AI 编程能力强大的今天而言，对于独立开发者而言，并不建议使用其 Dev 模式，有如下原因：
- 付费价格不低：20刀一个月的 full 模式，开通 dev 模式席位也要5~10美元一个
- 官方 MCP 功能尚不完善
- Dev 模式被 AI 编程替代，用一张图或者网址链接，AI编程就容易复刻效果；且有免费插件替代
- 独立开发的流程，不再是从设计到开发，而是从对话到开发
二、Figma 基础操作演示
1.1 核心界面
主界面介绍（以客户端版本为例）
- 左侧导航栏，默认文件都在 Drafts 内
- 新建文档：右上角按钮区域
- 默认显示最近打开的页面
设计界面，这是我们用到接触最多的页面，可以大概了解基础操作，不必要深入到具体功能细节
自己最常用功能示意：
2.2 其他界面
Figma 现在已经拓展到多条产品线，这些功能部分免费，部分需要付费使用，但大部分都有其他产品替代或开源的解决方案，可酌情使用。
FigJam 白板
FigmaSlides
Figma Make 付费功能，通过对话生成代码，可在后台进行简单设置（SEO信息、Google分析代码、域名设置）即可上线，无需部署。
Figma Site 付费功能，有很多社区模板可使用，默认网站三端界面都有。
三、Figma 的画板功能用法
3.1 做竞品分析
得益于可以无限画布的自由排版，可以用来收集竞品截图，按照一定的流程或信息结构关系排布。
3.2 做图片收藏
你可以收藏图片，或存放要使用的图片素材，方便团队共享。 team 版本免费版可协作 3 个项目。
注：案例来自其他工具，但用法类似。
四、Figma 模板介绍
不建议大家使用 Figma 从零开始设计，可以从社群的模版开始，建议使用付费模版和组件库。 高质量的模板文件通常包含页面模板、组件和代码，可以方便在 Figma 中通过拖拽的方式修改设计。
举例：Shadcn UI Pro 模版 https://www.shadcndesign.com/
内容非常丰富，价格不友好，建议边学习边用。
五、Figma 和 AI 编程的协同
在 AI 时代，如何使用 Figma 这类设计工具与 AI 编程工具进行协同，提升设计质量，需要总整体上衡量，大部分产品设计已经可以通过对话、网站模板等方式生成高质量的设计，这时候再插入设计流程性价比并不高。 但如果产品对设计要求较高，对细节追求较多，可以接入设计流程，更直观的进行设计呈现后，再通过 AI 编程工具进行还原，可达到更高的还原度。
5.1 官方 Dev mode
注意：该功能为付费功能。
专为开发者打造的界面和功能区，让开发人员更高效地查看、理解和还原设计稿，将设计无缝转化为代码。 支持一键复制 CSS、iOS、Android 等平台的代码片段，还能通过插件自定义生成适合不同框架的代码。
5.2 插件查看代码
Figma to code
第三方开源插件，多种代码格式可查看，目前 Github 4.3k start：FigmaToCode 使用：在 Figma 插件中搜索即可，选中 Frame 或 Layer 即可查看对应代码。
实际测试效果，原始设计稿：
使用 Figma to Code 导出代码，让 Bolt 复刻：
- 完美还原的容器规则，卡片间距细节都是100%还原
- 额外增加了很多 icon
使用截图参考，让 Bolt 复刻，效果：
- 错误的容器规则
- 给卡片增加了错误的圆角、间距
5.3 与 Cursor 的协同
① 官方 MCP 服务
注意：当前仅支持付费会员才能使用（20刀/月）
为 AI 编程工具提供设计文件的上下文信息，包含详细的图层样式和交互信息，方便更高质量的进行开发还原。 目前仅能从设计稿到代码的传递，需要从代码到设计 需用到第三方插件，下文会讲到。 官方文档：Guide to the Dev Mode MCP Server
当前使用 MCP 希望效果好，还是有不少要求，以下内容来自官方 best practices：
- 设计稿结构规范
- 语义化命名
- 尽量使用组件
- 使用变量来设计间距、颜色、圆角和文字排版
- 使用自动布局来传递响应式要求
② Cursor Talk To Figma MCP
Cursor Talk To Figma MCP 为第三方插件，免费版本可用，更新频率较低。
“talk → design → dev” 的模式 这是个人目前看好的未来方向，如果通过对话生成的页面效果不好，那么继续通过对话修改，没办法直观获得较好的结果。
当前的 AI 编程模式：
- 反复的对话调试，可能效果达不到预期，需要抽卡
如果加入“设计调试”流程：
- 局部细节不满意，可以手动调试修改，减少返工提高确定性 But，理想很美好，现实很残酷！ 理论上该插件能实现很多功能，可以通过对话生成设计稿，
该功能在 Cursor 1.2 版本中有 bug，服务跑通但是 Cursor 始终无法读取 Figma 中内容，测试失败。 目前的 talk 到 design 的效果也不太友好，需要依赖大模型对设计模板、组件和最佳实践的学习。
5.4 与 Stitch 的协同
Google Stitch 中生成的设计稿，可以直接复制到 Figma 中，并且是源文件所有图层都可以修改，这给了我们更大的设计调整空间，方便想要先确认设计细节的场景使用。
建议流程：
- 先在其他地方梳理好自己的产品界面内容，越能清晰的描述产品内容和布局，Stitch 给出的效果才越好
- 在 Stitch 描述产品需求（注意要使用 standard 模式）
- 生成的界面不满意，则让 Stitch 先改到大体上满意
- Copy 到 Figma 中修改细节
修改好细节的设计文件，可以导出 png，也可以使用 Figma Dev mode（付费功能）拿到相关代码再去还原界面。
到 Figma 中编辑
以上是本文的所有内容，旨在给非设计师朋友们普及 Figma 的使用，但对于独立开发而言，在偏向于工具型的产品很大程度上已经能够在前期跳过设计完成产品开发，也许当大家的产品在满足用户需求的能力上已经趋同，市场已经充分竞争，也许这时候精细化的设计质感、流畅丝滑的交互体验以及情感化的细节设计会是更好的竞争力。