Figma在UI中的优势

2024年2月7日发(作者：)

Figma在UI中的优势

它是一款类似 Sketch 或 XD 的 UI 设计工具，但 Figma 跟后两者的本质区别在于它基于 web，也就是说只要有浏览器和网络就能开，就能用。

认识 Figma

根据 UXTools 用户体验工具调查报告显示，Figma 在国外有逐渐攀升的趋势。Figma 的用户量已经反超了 Sketch，一举在 UI Design / Protoping / User Flow /

Hand Off / Design System / Versioning 拿下排名第一 ， 在 WhiteBoard 中 FigJam

排名第二。

回看国内同类型产品的情况，已经有多家厂商开发了对标 Figma 的工具，如蓝湖 MasterGo（已完成 C 轮融资）、即时设计（优化做得比较好）、Pixso 等。

另一侧是 Figma 交付类的插件工具，腾讯也推出了 CoDesign 设计协作平台，覆盖了产品经理、设计师、工程师协作需求，助力团队提升协作效率、有效管理和使用设计资产，帮助大家更好的去完成设计交付。和 CoDesign 类似的产品还有 Moonvy、Heron、Mockplus。

Figma 于 2016 年发布首个版本，2020 年的疫情让这类云协作的产品迅速崛起，

总的来说 Figma 实在是有太多优点了：

多终端多人实时协作、

从 Sketch 过渡无缝 UI 设计不卡顿、独特的矢量网格、类 CssBox 盒子的

AutoLayout、原型交互、设计系统组件库灵活高效、版本历史管理、实时讨论、实时分享、无需担心插件版本，Figma 涵盖了如此多功能，是一个设计+社区的综合体。（社区后面介绍）

设计效率这件事很难用具象的数据来传达，只有你亲身体验一番才叫真香。为了更好的描述 Figma 在整个过程中怎么提升设计效率，在此简单的举几个例子：

1. 对设计流程的提效统一

在使用 Figma 之前：产品策划团队一般用 Tapd、在线文档、原型图等描述需求，交互用 XD、Sketch 等梳理设计交互图，视觉同学用 PS、Sketch 等完成设计，最终以又以效果图、Codesign 等交付给产品策划审阅定稿，最终 Codesign 等交付工具交付开发。

在使用 Figma 之后：情况就可以完全不同了，从交互设计到视觉设计，最后到策划审核和设计交付都可以在 Figma 上一站式完成，多人实时协作发挥了巨大的作用，更加敏捷了。

很多团队可能交互用一个工具，视觉用一个工具，各司其事不碍事。又如组件和设计规范等可能觉得组件是统一依赖视觉同学就好，交互稿不需要符合规范，所以交互同学不用组件，组件、规范的概念对交互不是重点。但其实可以相互作用，到后期交互可以直接套用视觉组件直接搭建页面，效率也是有所提升。

2. 交互动效 Demo 的高效

在使用 Figma 之前，可能会由 Photoshop 转向 After Effect、XD 等软件制作动效，如果是 Sketch 流则会有更多的选择可以导入 Principle、Flinto、Protopie、Framer 等工具，Protopie 和 Framer 在动效设计上都是一个不错的选择。

在使用 Figma 后，可以在做完视觉后直接做高保真的交互 Demo，一定程度上避免了不同软件的学习成本，提升了图层元素、效果、源文件等转换效率。此外，

Figma 的组件变体还支持做交互状态的变化，大大地提升了做交互 Demo 的效率。

例如，给父组件 Close 添加一个点击事件响应关闭浮层的操作，无论你是居中的弹窗，还是底部画出的，乃至是右侧画出的，只要在界面的浮层中使用到 Close

的组件都可以响应关闭浮层的交互动效。

3. 更高效自由的组件修改

例如需要构建 3 个不同的按钮组件：

Photoshop 没有组件的概念，只好分开创建 3 个按钮（3 种颜色、3 个文本、3

个形状）并且三个按钮之间 文字、颜色无规范关联，圆角独立设置，宽高非自适应。

Sketch 虽然有组件的概念，但是还是逃不过创建 3 个按钮组件（3 种颜色、3 个文本、3 个形状）并且要在 v69 版本后的文字和颜色才可以独立设置，三个按钮组件的圆角在设定后子组件不可独立修改，配合 SmartLayout 的能做单向的自适应拉伸，3 个组件为独立不关联的组件，互不影响。

Figma 得益于原子化的样式，只需要建立 2 种文本样式，3 个颜色、0 个形状，通过建立 1 个基础组件就可以把三个按钮关联归一。其中文字和背景边框等样式可以独立设置，按钮的形状可以直接交给圆角独立设置，配合 AutoLayout 可以做到完美宽高自适应。

当然这里例子难免有的同学会觉得有点极端了，真正创建按钮的组件还是应该创建成 3 个独立的组件。只是能从这个极端例子中看见 Figma 的强大的高效自由组合。

建立一个基础组件：图标+文本+背景。在子组件中，可以自由的设定字体字号、

填充颜色、边框颜色、效果样式、圆角样式等，可根据需要决策显示或隐藏图标。

通过一个基础组件控制不同的实例，不同的实例又保持高度自由的子特征属性。

以上便是figma的UI中的所有优势