聊聊 Figma：作为设计师，我怎么看待它的优点与边界

我第一次用 Figma 是 2023 年，当时刚从 Sketch 过渡，还不太适应浏览器里画图的感觉，总觉得浏览器作为设计工具感觉很奇怪，用的时间长了就发现它并不是“在线版 Sketch”，而是一种重新定义了设计流程和交付方式的工具。

这几年几乎所有设计相关的项目都离不开 Figma，它成了默认工作环境，但习惯归习惯，我始终觉得——Figma 的确足够优秀，但它也不是没有边界。在越用越多之后，它带来的便利、问题、错觉和新习惯，也值得被整理出来。

1. 是画图工具，也是结构语言

Figma 真正改变的，不是“设计”，而是“设计的结构性表达”。

Figma和PS的主要区别是不再单纯画图，而是用 Auto Layout、组件系统、Variants、样式变量等工具，构建可以复用、继承、迭代的视觉语言。从前设计师交付的是界面截图，现在交付的是结构、逻辑，库和规则。这个转变对团队协作的影响是深远的：

styles

• Auto Layout 是响应式布局的思维迁移：我们在视觉层面提前做了“开发约束”；
• Components + Variants 是设计系统的雏形：你不需要设计每一个按钮，而是定义状态和语义；
• Token、样式变量、Grid、Spacing 规范等，设计师自己规定的一套“样式系统”，本质上跟 CSS 很接近。

从这个角度看，Figma 更像是设计师专用的“界面 DSL（领域特定语言）”，通过有限的操作表达复杂的视觉系统。这种抽象能力，是它真正拉开与其他工具差距的地方。

2. 设计师与协作者的边界，正在变得模糊

Talk. Chat. Comment.

项目经理可以加注释、编辑文本，前端可以自己查数值，甚至老板都能“在线评论”。这种开放性一方面让协作更高效，另一方面也确实把设计师“从神坛上拽下来”。

我个人不排斥这种趋势。设计工作本来就不是一个“闭门造车”的过程，而是和产品、技术共同推进决策。Figma 的权限分工清晰，它不是“谁都能动设计”，而是“谁都能看到设计的上下文和决策”。

但这也带来一个问题：我们不能再靠视觉稿本身撑起话语权，而必须让设计逻辑可传达、可追溯、可对齐。

这种做法Figma不是独一家，现在国产的很多设计软件都有这样的类似的功能，这倒逼我们整理组件规范、命名系统、注释风格、操作习惯，甚至是 Figma 文件本身的结构化方式。否则，一个复杂项目到后期，连设计师自己都找不到主组件在哪。

3. 从设计师角度看 Figma 的几个痛点

虽然我基本认同 Figma 的整体理念，但它的问题也不小。说几个我认为最核心的：

❶ 版本控制机制太弱

对设计系统或多人协作项目来说，Figma 的版本机制远不如 Git 那样可靠。你可以开分支，可以查看历史，但：

• 分支管理很初级，缺乏变更 diff、冲突提醒等机制；
• 没有“commit message”，很难知道某次修改的意图；
• 大型团队维护组件库时，很难保证每一次更新都是可控的。

这就导致一个现象：我们设计师经常在另一个页面复制组件临时改，完了自己都不知道是不是该覆盖主组件。这是协作效率的损耗。

❷ 性能瓶颈真实存在

文件大一点，图层一多，嵌套组件一深，Figma 的响应就开始明显下降。别说动画了，甚至拉个框都有延迟。尤其是页面多、动图多、组件引用层层套的时候，加载时间可以长到令人发指。

虽然 Figma 在架构层面已经做了很多优化（尤其是分区域懒加载），但浏览器始终不是为这种图层级别的图形运算设计的。这也是为什么一些设计师还是保留了本地客户端的使用习惯。

❸ 动效原型功能太有限

Figma 的 Prototype 虽然适合基本跳转和过渡动画，但当交互逻辑涉及状态控制、变量条件、输入响应等，就很难做。你可能得接 FigJam、用第三方插件，甚至干脆回到 Framer 或 Principle 做交互原型。

4. 所谓“Figma 到代码”的距离

Figma 社区经常讨论“设计交付能不能直接转代码”。我的结论是：这条路径方向是对的，但距离依然存在，且不小。

Auto Layout 是受 Flexbox 启发，但和 Flexbox 终究不是一回事；Variants 逻辑接近 Props，但无法定义行为逻辑；Style Token 可以映射到 SCSS 变量，但不能描述组件嵌套关系。

所以真正要落地一套高还原的 UI，仍然要靠开发在代码侧实现。但有一点重要的是：Figma 让设计具备了结构表达能力，而不是静态画面。这足以改变设计师和开发的沟通方式。

5. 我自己对 Figma 的使用习惯

最后分享几个我自己的使用习惯，不一定适用于所有人：

• 所有文件结构都从 Page 层级开始规划，用专门的页来放组件、Tokens、旧版本、交互草稿等，避免后期一团乱；
• 命名系统保持英文 + 层级逻辑（比如：Button / Filled / Primary），便于开发查找；
• 在项目初期就构建一个小型 Design System（哪怕只有几个组件），随着项目推进再慢慢扩展；
• 频繁使用注释和箭头，不光是给别人看，也是帮自己整理设计思路。

Figma 是一个灵活但不自由的工具。越早建立一套自己的工作流，后期越省事。

写在最后

我不太愿意“神化”任何一个工具。Figma 再好，它也不是让设计变简单了，而是把原本零散的设计工作变得更系统、更透明。

如果说过去我们设计一个页面靠经验和美感，那现在，我们要靠系统、结构和语义去把控整体。Figma 是工具，但背后的方法论才是我们真正需要掌握的东西。

它没有替代设计，它只是让设计必须更像“系统工程”了。