别再在 Figma 里做设计了

你的 Figma 文件,是一张根本不存在的产品的静态照片。等工程师把它上线时,它早就错了。字体渲染不一样,你无视的断点冒了出来,你忘掉的空状态出现了,你在评论里随手画的悬停效果,被一个不是你的人自行解读。解决办法不是更好的 Figma 插件,而是别再把 Figma 当设计工具,开始用代码库。

这不是在围剿 Figma。Figma 在系统工作、品牌探索和 FigJam 图表上依然能赢。我的论点更窄,也更难接受。2026 年,产品设计发生在代码里。 v0、Cursor、Lovable 和 Vercel UI 注册表,已经取代画板,成为界面真正被设计出来的地方。那些仍在交付像素级完美的 Figma 画框、等工程师来「实现」的设计师,是在用一半的速度干两份活。

到底发生了什么变化

Figma 诞生于一个「生产」是瓶颈的年代。2018 年,工程师做一个能跑的 React 组件要三天,而同样的时间里,设计师能产出二十张高保真画框。把平面画板当作交付物,是理性的选择。画板是整条流水线里最快的一环。

到 2026 年,这笔账彻底倒过来了。v0 三十秒把一句话变成可运行的组件。Cursor 在真实仓库里做真实的 diff 编辑。Lovable 用一条提示词就能搭出可部署的应用。画板如今是流水线里最慢的一环,而不是最快的,而且差距每个季度都在拉大。关于交付物层面转变的深入拆解,见原型图之死。本文讲的是产出交付物的那个工具。

平面画框没有变差。是工作台变强了。

Figma 仍然值得留下的地方

说句实话。Figma 在四件事上非常出色,假装不是这样,只会让你后面的论证被人整个否掉。

Figma 依然胜出的场景,首先是**品牌识别探索**,在任何代码库出现之前,logo、字体研究和色彩系统都活在这里。其次是**设计系统清单**,一个文件列出每个 token、变体和状态,配上别处无法复制的多人协作模式。再次是 FigJam 图表与团队对齐,白板和用户旅程梳理,界面本身就是对话。最后,它依然适合真的读不懂代码的设计师,这类角色在 2026 年比行业假装的要少,但确实存在。

其余的一切,每一个会交付给真实用户的产品界面,都属于代码。

五个差异

在 Figma 里设计和在代码中设计,并不是同一份工作的快慢之分。它们是不同的工作。

保真度。 Figma 画框只能近似字体,忽略悬停,假装滚动,渲染出的字体和浏览器加载的并不一样。代码界面用的是真实字体、真实按钮组件、真实断点、真实的焦点环。近似和现实之间的差距,过去还能接受。但在加载、空状态和长内容状态占了设计一半的产品里,不行了。

速度。 Figma 的循环是:改画框,给工程师留评论,等待,评审构建,再评论,再等待。代码的循环是:改,刷新,看。前者以天计,后者以秒计。迭代速度决定了团队在上线前能测试多少想法。

协作模式。 Figma 评论和 PR 评论是不同的界面。Figma 评论是设计师对干系人、设计师对工程师的「规格说明」。PR 评论是设计师和工程师作为平等的同伴,围绕同一个产物协作。第二种模式正是设计工程团队的运作方式,而且结构上更快。

交接消失了。 交接是传统流水线里最昂贵的时刻。在代码中设计,直接把它删掉。没有翻译这一步,因为设计本身就是实现。

边缘情况立刻现形。 空状态、加载、长内容、移动端、错误、慢网络。在 Figma 里,只有设计师记得画才存在。在代码里,不管设计师记不记得,它们都存在,因为组件必须处理它们才能渲染。代码逼你诚实。

v0、Cursor、Lovable 和 Vercel UI 是新的设计界面

新的设计环境不是某一个工具,而是一整套同时达到临界规模的技术栈。每个工具承担了过去 Figma 独自完成的一层工作。

v0(Vercel 出品)大约三十秒就能把提示词变成可运行的 React 和 Tailwind 组件。fork 结果,用提示词或手动迭代,再合入代码库。「fork 并迭代」的模式取代了 Figma 里的「复制再微调」,区别在于复制出来的是真正的代码。

Cursor 是会读代码的产品设计师的设计界面。打开真实仓库,看真实渲染,用提示词或手动编辑组件,同一分钟就能在浏览器里看到变化。

Lovable 是创始人和独立设计师的界面。一条提示词得到一个可运行的 Web 应用,然后在运行中的东西上迭代。从意图到线上 URL 的最快路径,不需要任何 Figma 文件。

Vercel UI 和 shadcn 注册表是组件货架。取一个真实组件,在代码库里定制,上线。shadcn 把组件作为你自己拥有的代码交付,这意味着设计系统和设计可以在同一个界面里编辑。

这些工具形态各异,但核心理念相同。运行中的界面才是产物。画板只是草稿,甚至可以不存在。想了解更深入的从业者模式,见设计师的 vibe coding和设计师的 Claude Code。

Linear、Stripe 和 Anthropic 到底怎么运作

2026 年交付最佳产品 UI 的团队,工作流形态如出一辙,而且没有一家把 Figma 当作最终交付物。

Linear 把代码库当作唯一的事实来源。他们的设计工程团队以针对运行中应用的 pull request 来落地设计,而不是 Figma 画框。Stripe 的设计系统从代码构建并发布。Figma 只是代码下游的文档,而不是上游的源头。编辑系统,就是编辑代码。Anthropic 在 React 组件和 Claude artifacts 里直接设计 Claude 的产品界面,每次发布,设计师都在读、在改真实的应用。

这个模式在每一个以顶级速度交付的产品团队里不断重复。Tokens 上游化,代码即画布,AI 作为生产层,设计师在 diff 里。平面画框的流水线不是他们任何一家的工作方式,而这笔账已经让行业里的其他人追了上来。

在代码里设计之前,先问五个问题

不是每个设计师明天就该扔掉 Figma。诚实的测试是五个问题。如果有三个或以上答案是「是」,那么下一个项目就该在代码里设计。

1. 你是在交付作品,还是把它交接出去? 如果你负责交付,代码胜出。如果你负责交接,代码依然胜出,只是文化落差更大。
2. 你能读懂代码库吗? 不是要你从零写生产级 React,只是能读组件、理解 props、认出设计 token,并在不弄坏构建的前提下修改数值。
3. 设计是静态规格,还是交互界面? 规格属于 Figma。带有悬停、焦点、滚动、动效和边缘状态的界面,属于代码。
4. 团队有可以扩展的设计系统吗? 一个真正的组件库,哪怕只是 shadcn 基线,也能让代码优先设计比 Figma 快两个数量级。
5. 迭代速度是你的瓶颈吗? 如果你的冲刺都耗在交接循环上,代码优先能干掉瓶颈。如果你的冲刺耗在品牌策略上,代码优先毫无帮助。解决对的问题。

五项中命中四项的团队,生活在代码里。五项中命中两项的团队,仍应在 Figma 和代码之间分配工作,并让每个新项目略微偏向代码。

该扔掉的反模式

有四种模式,毁掉的已上线产品 UI 比任何工具选择都多。如果团队正在做其中任何一种,换工具的意义远小于换工作流。

把 Dev Mode 当交接的幻想。 设计师交付一个标满红线的 Figma 文件。工程师「用 Dev Mode」去翻译。双方都假装翻译是忠实的。从来不是。Dev Mode 有用,但它只是同一个交接幻想换了层新包装。真正的解法是让工程师和设计师编辑同一个产物,这正是代码界面所能实现的。关于连接层,见 Figma MCP 指南。

无视真实字体和断点的像素级完美原型。 一个 1440px 的画框,里面是 Lorem Ipsum,字体还是生产环境根本不加载的那款。原型看起来像素级完美,上线后的产品却毫不相干,而所有人都在这个谎言上签了字。

活在 Figma 里、悄悄与代码分道扬镳的设计系统。 Figma 库说按钮内边距是 12px。代码说是 14px。没人更新任何一边。六个月后,Figma 文件成了虚构作品。只留一个事实来源,放在代码里,Figma 只是下游的渲染。

以 PDF 收场的六个月改版。 一次旗舰级改版,交付物是上百页的 Figma 导出,向高管层汇报,然后扔给工程团队去做「第二阶段」。第二阶段永远不会发生,因为等工程评估完重建的范围,公司已经改了两次战略。没能上线的改版,等于不存在。

代码优先设计审计

在下一个项目启动前,先做一次审计。七个问题,十分钟,答案要犀利。

1. 交付物是什么,是画框还是上线的界面?如果是上线的界面,交付物就是代码。别再假装画框就是产品。
2. 谁拥有运行中的应用,设计师在 diff 里吗?如果设计师不在 diff 里,先解决这个,再谈换工具。
3. Tokens 放在哪?如果答案是 Figma,把它们搬走。token 文件应该是 Figma 读取的事实来源,而不是反过来。AI 设计工作流的拆解讲了升级路径。
4. 迭代周期以小时计是多少?如果从修改到上线变更超过四小时,问题出在工作流,而不是设计。
5. 哪些界面仍在平面画板里设计,哪些已经迁到代码?把分布画出来。每个新项目都应该让这个分布偏向代码。
6. 团队靠哪些插件来伪造交接保真度?如果答案是「很多」,看看值得保留的 Figma 插件,然后砍掉其余的。
7. 团队下个季度交付什么来证明工作流有效?不是幻灯片,而是一个已部署的界面。如果答案含糊其辞,说明工作流其实还没有真正改变。

通过审计的工作流,交付产品。没通过审计的工作流,交付幻灯片。这个差距每个季度都在叠加,而当其他变量大致相当时,速度就是品牌。

常见问题

Figma 死了吗?

没有。Figma 没死,我的论点也不是「Figma 死了」。Figma 非常适合品牌识别工作、设计系统清单、FigJam 图表和向干系人演示。论点更窄:Figma 不再是产品设计发生的地方,因为代码库更快、保真度更高,而且交付的就是用户真正触摸到的那个产物。

不会读代码的设计师怎么办?

这位设计师应该学会读代码,而不是写代码。读组件、认 token、改数值、评审 diff,是一周就能掌握的技能,不是转行。2026 年,生产代码的重活由 AI 搞定。设计师带来的是构图、判断力和品味,作用于运行中的界面,而当生产层变得廉价时,这些价值只会更高,不会更低。

小团队真的应该完全跳过 Figma 吗?

不必完全跳过。小团队仍应把 Figma 用于品牌探索、系统清单和团队对齐。转变发生在产品界面上,在那里 v0、Cursor、Lovable 或 shadcn 注册表在每一项指标上都会胜过画板。诚实的划分是:品牌和系统放在 Figma,产品界面放在代码,新项目的倾向则偏向代码。

站到工作流正确的一边

「Figma 作为设计工具」的时代曾正确了十五年,如今已经结束。2026 年,代码库就是设计环境,而在代码里交付产品 UI 的团队,收费更高、学得更快,还赢下了过去属于 Figma 提案幻灯片工作室的项目。

如果你想要一个在代码里交付、设计师就在 diff 里的产品 UI,而不是一份从墙那边扔过来的 Figma 幻灯片,雇用 Brainy。Brainy 把品牌、产品工程和 AI 工作流作为一个项目交付,而不是三个。那些仍把 Figma 文件当作最终交付物来报价的工作室,下个季度不会再出现在项目名单上。你要在名单上。