如何评价多人合作界面设计工具

如何评价多人合作界面设计工具

6 月 22 日更新： Figma 中文文档来啦！

经过一段时间的筹备，我将 Figma 的最新文档已翻译完毕，同时也开发上线了 FigmaChina ，希望能为大家提供一个学习 Figma 和 UI 设计的平台

Figma 是一个 基于浏览器 的协作式 UI 设计工具，从推出至今越来越受到 UI 设计师的青睐，也有很多的设计团队投入了Figma 的怀抱，接下来我会带大家深入了解 Figma，以及我们为什么要使用 Figma。

我们知道基于原生 OS 开发的应用自然能更好的利用硬件资源，但 Figma 在 速度上完胜 Sketch，即使在处理大文件时也是如此。 ​ Figma 原生支持 很多 Sketch 需要插件甚至依靠其它应用才能完成的功能，当然，Figma 也 支持插件开发 。

Figma = Sketch（UI 设计）+ InVision（原型设计） + Zeplin（标注）+ Dropbox（云端同步）+ Abstract（版本历史）+ Craft-Freehand（实时讨论） + Liveshare（实时分享）+ Team Library （团队组件库）+ Web API（第三方接入）+ … 下面我们来一起了解下 Figma 的一些功能和特性

- UI 设计 Figma 是为 UI 设计而生的设计工具，除了有和 Sketch 一样基本的操作和功能，还有许多专为 UI 设计而生的强大功能。

- 原型设计 你可以在 Figma 里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用 Figma Mirror 在手机上预览效果。

- 前端协作 工程师可以在设计图上获取标注、并且可以导出所需任何资源（包括 CSS、iOS、Android 样式）

- 实时协作 + 内置评论 在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论， 你可以在评论中 @其他人 或将评论标记为已解决。

- 矢量网络（Vector Network） - 团队 Library 我们可以跨项目共享和更新 Component、Style， 但需要注意的是免费版不能跨文件共享 Component 。

- 原生支持 Web Font Font Icon Figma 原生支持 Google Fonts 和 Font Awesome 。

- 已经推出的 Web API 和即将推出的 Write API 通过 API可以快速轻松地对内部公司工作流程进行脚本改进，或将 Figma 与其他工具集成 - 官方示例：使用 Figma API 同步网页上的展示图片内容 0. 首先我们需要了解几个概念： 1. 我们可以通过实时协作更快地迭代 迭代时间可以从几天缩短到几分钟，不会再有下面的场景：

2. 我们的工作流程会更加的无缝和具有包容性 设计文件现在是一个链接，这意味着：

3. 我们从设计到代码的过渡会更快且具有一致性 在 Figma 中，我们更容易的以前端的思维方式进行设计。

首先，Figma 和 Sketch 的一个重要区别就是在 Figma 中我们使用 Frames 而不是画板，这有什么区别呢？

当我们把一个较小的 Frame 拖到另一个较大的 Frame 上时前者会自动成为后者的子元素。

我们可以使用 Frames 将屏幕划分为不同的内容区域，然后在不同的区域内嵌套组件。 与自动分组、相对定位和约束相结合，我们可以快速轻松的构建一致性且响应式的设计。

因为 Figma 中的 Frames 类似于 HTML 中的容器（div）。 工程师能够直观的看到嵌套在各自容器中的 UI 元素，这意味着他们在开发时会对布局有更好的了解。 4. 我们的设计系统将更灵活和易用 Sketch 有 Symbol，Figma 有 Component。 不同之处在于 Component 比 Symbol 更灵活，我们可以用更少的组件做更多的事情

在 Sketch 中，我们可以使用 Symbol Overrides 来编辑文本或交换嵌套 Symbols。 但是如果想要更改其他属性（字体大小，边框粗细或背景颜色等），则必须创建一个新的 Symbol。

要解决这个问题，你可以将每个属性单独做一个 Symbol 然后把他们嵌套在一起，但数量会越来越多，这对于大型项目和复杂的 UI，维护会越来越复杂和难以使用。

使用 Figma 时，我们可以访问和修改 Component 中任何层的属性，而无需将其从 Master Component 中分离。 更方便的一点是，在 Figma 中，我们可以在较大视图的上下文中编辑 aster Component，而不必转到单独的页面进行编辑。

在 FigmaChina 中我会不定期更新关于 Figma 和设计的分享，小伙伴们可以持续关注！ 好久没写回答了，来聊聊 Figma！工具使用层面大家都说的差不多了，我说点别的~

Sketch 在 2012 年 5 月的第二个大版本在设计界掀起波澜的时候，刚刚通过 KPCB Engineering Fellow 项目加入 Flipboard 的 Dylan Field 正忙着和 Flipboard 的设计师们打造 Flipboard 2.0 版本，于此同时，他在布朗大学的 TA（教学助教）Evan Wallace 一直在说服他应该在浏览器里做一个 Photoshop，但这个想法对于一个正常人而言第一反应都是「你别闹了，这怎么可能」，对于当时刚刚 20 岁的 Dylan Field 也不例外，毕竟 Web 和浏览器就象征着不可靠，更别提当时还在让无数前端工程师投入大量精力的 IE 6 上了，于是这个想法就被搁置了下来。但随着 Dylan Field 在 Flipboard 工作过程中他发现设计师和工程师们的共享文件和协作的流程太糟糕了，Evan 之前的想法又重新被拿了起来，他们开始研究一个课题：在浏览器里做一个 Photoshop 是不是真的不可能？

在这个过程中他们发现 Photoshop 的用例太多了，想要都完成实在是复杂的不行，于是他们决定简化整个想法，不做一个完整的 Photoshop 而是做一个浏览器中的 Fireworks（用户界面设计工具），当时在他们的工作流中 Fireworks 和 Photoshop 一样，性能极差，各种崩溃。在简化想法后他们发现这件事似乎变的可行了起来。

于是他们决定从 Flipboard 离开，一起打造自己的事业。那年他不到 20 岁，他们申请了 Thiel Fellowship 项目，希望能够获得 10W 美金的资金，虽然代价是 2 年内不能重返学校。任何一个正常的父母都不会支持这件事，他们也不例外，Dylan 的家人带他出去玩、吃东西等等希望他能忘掉这个事早日会学校上学，但当 Dylan 从 500 名申请中晋级到 40 人需要去旧金山当面演讲的时候，原本反对的父母也变得兴奋起来，最终 Thiel Fellowship 项目副主席 Gibson 被他们打动，成为获胜者并获得了 10W 美金的启动资金，在 Sketch 2.0 发布 3 个月后全身心的投入到了自己的项目中。

可以想象，在浏览器里做一个这东西显然有着浩大的工作量，并且有多如牛毛的细节需要处理，用 Evan Wallace 的话来说就是「我们要在浏览器里做一个浏览器」，也正式因为如此，他们从 2012 年 8 月开始全职写码，直到 2015 年 12 月才开放测试，足足搞了 3 年，对于一个「大学生团队」来说，这事咋想都不怎么靠谱，幸好中间有一轮来自 Index Ventures $380W 的种子轮融资续命……

在我自己的认知里，一个生产力工具想要 更快 的成功，至少得满足几个条件，以用户界面设计工具为例：

老工具在某些刚需问题上确实有缺陷 ：Photoshop 其实是个全能型设计工具，界面设计只是这个工具能解决的一部分问题而已，但在这个事上上大家遇到的问题有很多，老工具在用户界面设计层面上不够好用（性能、标注、预览、设计效率…），这都是每一个设计师遇到的切实问题。

工具的产出物在发生变化 ：早年间的设计几乎都是以「和真的一样」为评判标准，原因是需要把 APP 设计的和真的一样以便降低大家的理解和使用成本，但这件事从 2013 年开始发生了变化，那年 iOS 7 发布，扁平化设计兴起，用户界面设计在工艺难度上大幅下降，不再需要复杂的功能来完成高频的工作。

使用工具的人在发生变化 ：2011 年开始移动互联网的快速发展带来了更多入网用户，而用户带来了更多的需求和对应需求的就业岗位，同时行业红利吸引了更多非专业设计背景的从业人员（比如我），他们都需要更易上手的工具。

以上三点互相影响，最终历史选中了 Sketch，成为了目前设计工具的事实标准。一个新的生产力工具想要取代旧的，如果只是改善旧有问题，那就是一个漫长的迭代过程，而且旧产品早晚也会解决这些问题，除此之外还是需要有大环境变化的加持才能把进度变快。

产品开发是一个团队协作过程，几乎所有人的产出物都有上下游，但他们的工具流几乎都是割裂的：产品经理写好文档和原型放在 Wiki 里、设计师看完 Wiki 打开自己的设计工具做好设计导出 HTML 交给工程师、工程师看着设计师导出的 HTML 和产品经理写的 Wiki 开始工作，而从每一个独立工种来看，自己的内部流程也是一团糟，以设计为例：设计稿的版本控制、共享、标注、组件维护等等，这其中每一个点都有很多个第三方工具在试图解决，但解决质量通常都不怎么样。

在这里可以看出 Figma 和 Sketch 的分歧：协作是否重要？以及到底是「和所有利益相关方协作」还是「和其他设计者协作」，Sketch 选择的是仅和设计者协作，他把其他「利益相关方」交给了其他产品解决；而 Figma 认为协作应该针对所有利益相关方，这导致了基本产品思路的变化。这样就可以理解为什么在有 Sketch 的情况下 Figma 还可以在设计工具领域分一杯羹： 产品设计是一个团队作业过程，需要大量的工具互相配合才能完成，这个配合过程带来的摩擦和管理成本逐渐升高；设计工具产出物的用户并非设计师，他们在设计过程中的体验欠佳；随着浏览器技术的发展和网络质量的提升，让跨平台低成本协作成为可能 。上述三个原因互相影响，导致 Sketch 的竞争力下降，Figma 的机会到来。

Figma 给我带来最大的感受有二：1）如何在一个看起来已经没什么问题的领域发现新的可能；2）当你发现了一个「正确」的方向，是否敢于做一些在当时来看「脑子有问题」的决定。

而这两点，不正是所有伟大产品的基础么？

dsa

用老外喜欢的一个词来评价：Game Changer

从Sketch 3.0发布到现在已经过去了两年，经过了无数 PS vs. Sketch 相比哪个更适合设计UI的论战外，Sketch已经发布了三十多个版本，新秀Affinity Designer也已经趋于成熟，而众星捧月的Adobe XD却至今仍在beta。

当大家还在探索Sketch还有什么牛逼闪闪的插件，Invision Craft能不能改善Sketch多人协作时模板混乱问题的时候，Figma突然出现，清新脱俗的让人眼前一亮。

没错，这就是个基于浏览器的、支持多人协作的Sketch。 无缝的转换体验 很多设计师从PS切换到Sketch都花费了很长一段时间，但从Sketch切换到Figma则不需要那么麻烦，就像从PS到AI，快捷键几乎是一样的没有太多学习成本。直接导入一个Sketch文件，所有的信息和内容都得到了最大限度的保留，可以直接开始继续你的设计。

真正的多人协作 如果你用过Google Doc，一堆人在一个Spreadsheets里七嘴八舌，那应该不难想象一堆人在同一个Sketch里编辑的画面，甚至可以多人编辑同一个形状。

Sketch目前的多人协作的体验很差，除了直接把文档发给对方没有其他辅助功能，想要发给用windows工程师只能借助Zeplin这样的工具，Figma则给出了web-based解决方案，流畅的操作体验甚至让你忘记了这是一个网站。

更加智能的设计工具 为不同大小屏幕做设计一直是各大设计群经久不衰的话题，Sketch在39版里为symbol引入了缩放这个概念，但整个画布所有对象的拉伸缩放没有解决很好，无法直观的看出同一份设计稿在iPhone5和iPhone6P的表现到底有何不同，Figma则把这个选项放在了很重要的位置。

Figma 到底适不适合我？ 在Figma之前，我一直认为基于浏览器的设计工具是闹着玩的，体验了半小时之后，还是觉得在闹着玩。

Figma的确提供了很多有趣的思路，更协作、更跨平台，但这些并不新鲜，也不像Sketch在UI领域超越PS表现的那么明显，如果不在乎网速、不在乎设计稿保密性，喜欢尝鲜的可以试试，日常工作什么的还是乖乖回来Sketch吧。

补充：目前遇到的最大Bug，是根本不知道你现在是英文输入还是中文输入，打开输入法所有的快捷键都失效了，并且如果给中文设置一个英文字体，中文就扑街了。

部分图片来自Mengto的blog

Figma 真是越来越火，2021 年 6 月刚获得 2 亿美元的 E 轮融资，估值高达 100 亿，居然以设计工具的身份成为独角兽。

现在，Figma 终于取代 Sketch，在国际上稳稳占领了 UI/UX 设计工具的主流地位。

但是自从开始用 Figma 之后，我打开 Sketch 的次数就越来越少了。

一看数据，原来不光是我，Figma 这几年可以说真的是异军突起，不服不行：

Figma 为什么这么强势？Figma for Tencent 报告里的数据揭露了两个重要原因：

1. 除了设计之外，团队其他成员也爱用 ：用浏览器和 Windows 系统都方便，这个原因再简单不过了。

2. 网游思路避免盗版 ：Sketch 不给钱不能用，而且很贵，典型的单机游戏思路；而 Figma 不给钱也能一直用，而且整个工具必须链接服务器才能用，很难破解。

虽然 Figma 也有墙内网速和中文字体问题这两大坑，但是成功找到避坑方法之后，我还是觉得 Figma 比较香。

接下来，我就从使用者的角度分析一下，为什么自己会觉得 Figma 好用（主要是与 Sketch 的对比）为想了解 Figma 的朋友提供一点参考。

对了，我平时很少用什么高级功能，所以今天讲的都是比较接地气，即便是初级设计师也很有可能遇到的情况。

长久以来，多人同步画图都是一个美好的梦想。

我记得在使用 Axure 的时候就研究过这个，后来发现是需要额外付费而且很麻烦的高级功能，就放弃了。

用 Sketch 时，我曾经负责过团队的组建库维护，用到了 Sketch Cloud 同步组建库更新。

然而那个组建库同步功能简直太难使用，就算我在云端更新了，成员们如果懒得更新也还是无济于事。

Figma 终于搞出了真正的零门槛多人协作，不需要任何额外的步骤，就可以随时和队友打开同一个文档进行操作。

在 Google Docs、腾讯文档、石墨文档这类多人在线文字编辑已经普及的年代，多人在线画图实在是应该常态化了。

就算是设计师人数少，多人协作也可以方便和开发等其他团队成员合作，因为他们大多没有 Mac，安装设计软件也很麻烦，打开 Figma 的链接倒是很方便。

这个不卡，不光是电脑不卡，网速也不卡（当然是有 的情况下）。

我最近打开 Sketch 新建一个文档，一个页面里只有十几个画板，Mac Pro 就开始响声大躁，而且操作出现略微延迟。

我用一体机时，虽然情况要好很多，但是文件稍微大一点也还是很容易延迟卡顿，经常要重启特别耽搁效率。

我在 Figma 的一个文件里，塞了这个公众号近两三年的所有配图和素材，不但一般可以在两三秒内加载完毕，而且也几乎从没卡过！

而且，我长期都只用浏览器画图，后来为了方便登录和使用本地字体，才下载软件。

如果浏览器不用经常登录且使用本地字体方便，我是觉得没必要安装软件的。

Sketch 文件在 Mac 上是看不到预览的，找文件纯靠名字。

虽然在打开 Sketch 时，会象征性地展示一下最近文件的预览图，但这个方块很小。

这个问题之前还不觉得，但是习惯了 Figma 的大缩略图之后，发现回头用以前的方法找文件还真的有点不太适应，真是被「惯坏」了。

而且 Figma 还可以设置文件里的一个 frame （画板）为缩略图，很多团队都搞出了自己的文件缩略图规范，浏览很方便。

Sketch 创建一个新图形时，除了本身的灰色填充之外，默认还会带一个边框。

界面上大部分的图形（例如背景、按钮、弹窗等）都是没有边框的，所以我通常要手动删除这个边框。

别小看了这一个简单的步骤，做多了也要烦。每天画图的话，一年不知要浪费多少时间在删除边框这种无意义劳动上！

我也知道这个默认样式可以设置，但总之还是麻烦啊。

Figma 创建新图形时，只有灰色填充没有边框，这一点我真的觉得很好。

不同的平台和产品，都有不同的行高规范。别看这东西就是一个小数值，对于视觉密度的影响相当直接。

用百分比设置行高其实是最科学的，因为这样可以一次解决很多问题，前端上也经常这么做。

Sketch 的行高不能设置百分比，只能自己计算后写数字，这是个很严重的坑啊！

假如设计规范里行高是 1.5 倍，那么我每次设置文字时，得要心算把字号乘以 1.5 得出行高填上。

如果 1.5 还好，如果是 1.25 或者 1.75 我还得用计算器……

经常是懒起来，干脆懒得设置什么行高了，用 Sketch 默认行高好了 ‍♀️

Figma 的行高可以用百分比，这才是行高的正确打开方式吧！

做 B 端产品或者是画图标时，都难免涉及到饼状图/环形图。

每次用 Sketch 画这个我都会非常苦恼，虽然也有一些插件可以用，但无论如何都很麻烦。

Figma 画起饼状图/环形图简直不要太爽，弄一个圆形，然后一拖就出来了，关键是百分比和角度都可以设置。

Sketch 的锚点编辑功能，真不好用。

不论是创建还是拖动，都完全没有像素对齐了，小数点后两位数字各种乱来。虽然偶尔吸附对齐功能可以依赖一下，但用起来简直要逼死强迫症了

P.S. 后来才发现可以选择对齐方式，但是为啥不是默认对齐呢？

Figma 在一条线段上创建描点时，就是默认从中间创建，而且拖动的时候数值要么是整数要么是以 .5 结尾，强迫症表示非常满意～

帮 Figma 免费说了这么多好话，也并不是说它什么毛病都没有，网络问题和字体问题依旧时常让人心累，不过这些以后有机会再讲，目前也没完美解法。

只是我自己确实是在入坑 Figma 之后，有点不习惯 Sketch 了，经常是能用 Figma 解决的就不用 Sketch。

不过工具怎么选择考虑的因素很多，最重要的还是要根据团队合作实际情况优先考虑～

作者： leadream

第一次知道 Figma 是在 2016 年，但真正用起来还是在去年。

那时苦于 Sketch 每次更新都会导致一些插件不能用且界面不够精致，一直想要为它找一个替代品。直到后来尝试将自己的个人项目都导入到 Figma，这才开始在 Figma 中尝试设计。

因为 Figma 是基于 Web 的，也就是在线的网页，我总觉得使用起来会受限于性能而不够流畅，这也是我前几年不敢去用的原因。但直到我真正使用起来，才发现操作非常流畅，而且文件都在云端，免费版保留最近一个月的历史记录，再也不用「最终版 1」「最终版 2」这种方式管理设计文件了 。 而随着使用加深，我发现 Figma 的交互也非常符合直觉，还有很多精心设计的小细节。借用一位朋友的话来说，「这是一群设计师为设计师打造的设计工具，让大家专注于设计本身，而不是在设计时还要克服工具自身影响效率的因素」。 下面我结合我的使用经验说一说我是怎样用 Figma 做设计的，以及这一年以来我的一些使用心得。

在此之前，先说一下我的背景。我平时会做很多业余项目，大多是网页和小程序，平时还会做一些公众号的封面和插图，基本都是在 Figma 中设计完成的。

一般当我有了一个想法时，我会先在 Figma 中随意勾画出一个初稿。然后，我会在这个基础上不断修改，不断完善自己的想法。这其实相当于原型设计阶段，在这个过程中我不会在意样式是否美观，只会在意功能、结构是否合理。

因为我的想法会不断变化，说不准什么时候有一个新的想法会加进去，所以在这个阶段它的变化会很大。因为 Figma 可以自动保存最近 30 天的历史（付费版可以保存所有历史），所以你不用担心自己突然想要回到之前的某个版本而没有保存。 尽管大胆地构思设计，你可以随时恢复到之前的版本。

接下来我就会开始调整样式，细化设计了。这个过程中我会用到两个比较重要的东西——组件和栅格。组件可以用来设计重复性模块，提高效率，栅格则可以让我的设计元素的分布保持一致比例。

所谓组件，类似于 Sketch 中的 Symbol、PowerPoint 中的母版，用于绘制可复用的元素 。比如说在我的设计中有一个卡片列表，我会在旁边先做这个卡片，微调它的样式，等差不多满意时再复制出多个放到页面中。

最原始的组件叫做 master，而从它复制出去的组件叫做 instance，当你调整 master 的样式时所有的 instance 都会跟着同步。Figma 允许将 master 组件就近放在页面旁边，这样是极其方便的，因为后面难免需要调整细节，这时候你就可以边调整 master 细节边看它在整个页面中的效果，比如下图中我想看一下将 logo 放大的效果。

而反过来，当你调整 instance 的部分样式时 master 是不会跟着变化的。这样就保证了灵活性，因为总有一些 instance 需要和其它 instance 有一点区别。

说完组件，再说说栅格的妙用 。在 Figma 中我们可以给页面（即 frame）和组件添加栅格，而栅格可以添加网格、行和列。在页面中添加网格可以帮助你对其元素，但我一般会添加列栅格，因为它可以帮助我把元素排列为等分的几列，并保持元素间隙。下图中红色长条就是列栅格，他将中间内容区域均分为 12 列，我就可以把里面的元素按照 1-8-3 的比例布局。

如果将栅格和组件联合起来，就可以设计出固定内边距的效果。我给卡片组件就设置了一个行栅格一个列栅格（蓝色背景），它们就给整个卡片四周划分出了一个固定的内边距。当我把里面的文字图层的 constraints 设定为左右固定并将它左右边缘对准栅格边缘时，当我放大缩小卡片时这个文字图层就会保持左右的内边距固定。

用一个动图表示一下，上面这个使用了栅格，下面的没使用，此时上面图片的四周就会紧贴着栅格边缘。

最后，为了体验真实的效果，我会给它添加一些交互效果。Figma 自带的交互动作包含了跳转、显示浮层、打开链接等，而触发方式包括点击、鼠标悬浮、延时等，还有滚动固定等效果，足以做出一些基本的交互效果了。

如果是移动端，我可以用手机直接打开 https:// figma.com/mirror 来预览效果。这很方便，不需要额外下载 App，只需要在手机上登录一下就行了。

当然，整个设计过程中还会有很多细节会让你觉得十分方便。比如说使用 Fill 来统一代表背景色和文字颜色，方便同时调整文字和图层。还有 Smart Selection 可以让你快速选择一些元素，将它们对齐，并随意互换两个元素的位置。 他们会经常在官方博文中告诉你一些小技巧，我也经常会感叹「竟然还有这种操作」。 总体用下来，我觉得 Figma 免费版非常适合独立开发者/设计师。因为我们的项目一般不复杂，项目间关联性也不大，就可以用一个文件来设计一个项目，也就不用担心跨文件共享组件要收费的问题。

与此同时，Figma 基于 Web 的特性也决定了它易于分享。如果有人想要看你的设计，你可以直接将预览链接发给对方。这也意味着你可以随时随地做设计，即使没有带电脑也没关系；Figma 官方响应也很快，我有时遇到问题会直接去社区反馈，他们也会很快答复。他们还保持着一周一次版本迭代，所以如果你反馈的建议被采纳就可以很快看到更新。

目前 Figma 在国外的使用率逐渐攀升，在国内可能受制于网络太慢而比较小众。我还会继续使用它做我的个人项目，如果什么时候可以在团队间普及开来，我会去买它的付费版，这样就可以使用跨文件组件共享多人实时协作设计了。

说下基于什么才使用figma吧 Figma可在运行Web浏览器的任何操作系统上运行。Mac，Windows PC，Linux计算机甚至Chromebook均可与Figma一起使用。

像我这种公司用XD，家里用sketch的人算痛点了。

设计师使用Mac，而其它同事可能Windows PC。Figma帮助将这些群体聚集在一起。无需中介机制即可使所有人都能使用设计作品。

同时客户端已支持汉化 免费计划使我乐于尝试，也便于其他团队成员使用，并不需要付出巨大的前期成本。

也可以走教育项目 Figma还允许任何文件，页面或画板 的共享 。当创建共享链接时，单击该链接的人将打开Figma的浏览器版本，并加载该框架的放大视图。这种共享形式，使设计师，产品经理和开发人员可以准确跟踪共享Bug。

Figma 在 设计和原型制作模式下都支持 -注释 。进行不断的更新来获取团队的反馈。可以通过打开相同的Figma文件在评论过程中发表评论。在进行设计审查时，记录评论并解决问题。Sketch和XD无法实现这种形式的实时反馈。

在Figma里面做原型是非常方便的，你可以把原型非常容易的发给用户作为测试，因为它的分享和更新都异常简单，打开一个连接就好了。Figma 有自己的标注工具插件。

知道市场主流是sketch，Figma在Sketch的导入和导出功能方面做得非常出色。甚至可以直接从Sketch复制并粘贴到Figma。

最近有一款新兴 设计工具 「Figma」 逐渐走进了大家的视野，越来越多的人认识或者上手尝试了这款软件，不过似乎还是有不少同学对 Figma 一头雾水，不知道这是哪里杀出来的程咬金，那么今天我们就来简单介绍一下 Figma。

Figma 是什么？

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

目前 Figma 在国外收割了一大批拥趸，比如大家耳熟能详的 Twitter、微软、Github 以及 Dribbble 等等。在国内的热度虽然还没有这么高，不过 Figma 正在逐渐抢占 Sketch 的用户，比如最近很火的阅文，其体验设计部 YUX 已将海外项目 webnovel 全部迁移至 figma。

那么它何德何能，可以成为如此耀眼的新星呢？

1. Windows上最好用的 UI设计 工具 由于 Windows 生态的缘故，UI 类的专业设计工具似乎对 windows 都极度不友好，不管是像 sketch 这样根本不开发 windows 版本，还是 XD 这样哪怕有 windows 版，也是各种闪退、bug 频出，总之 windows 的 UI 设计体验向来是非常差的。

这时候 figma 给 windows 带来了媲美，甚至超过 sketch 之于 mac 的体验。基于 web 这个基本特质决定了 figma 非常容易适配全平台，只要你的设备有浏览器，联了网，就随时随地可以快乐地进行设计。

不管是 macOS、windows、Linux，甚至最近连 iPad 都可以了！

2. 丝般顺滑不卡顿 不管是曾经习惯用 Ps 做设计的同学，还是用 sketch 的同学，我想你们都有被卡顿的支配的恐惧，图层一多、文件一大、页面一复杂就连移动图层都变得异常费劲。

在使用 Figma 之前，我也以为线上的软件必然比本地的好不到哪里去，但后来发现我错了，脸都被打肿了，这里演示中因为 iOS 没有 figma 版本的 guideline，所以用谷歌 MD 的替代，文件量大致相当。

Figma 似乎并不怎么消耗本地资源，也完全没有 sketch 那样严重的内存泄漏问题，所以当我打开同一个 APP 项目文件，Sketch 内存（加缓存）占用达到恐怖的 16G，figma 甚至不足 160M。

经过实际体验来看，无论多大的文件，Figma 似乎都能达到流畅的 60 帧渲染。

3. 大杀器 — 全局组件 Figma 的组件和 sketch 类似，但又有区别。

得益于线上协作的模式，你可以在 figma 新建一个专门的文件来定义组件（component）或者样式（Style），再把这个文件发布到库（Library），这样你团队中的所有成员都可以在团队中的任意文件调用这些组件。

而只要修改其中一个组件的样式，团队中所有的文件内用到该组件的地方，都能选择是否要同步更新。

有同学可能会问 「啊那不是和 sketch 的 library 一模一样么？」

区别在于 Figma 的组件库是同步、实时、全员更新的。这就意味着团队中每一个成员和组件库之间的交互都更加快捷高效，而组件库可以更新给全部成员、全部文件，再也不用像 Sketch 那样 10 个人 10 种不同的组件版本了。

4. 拉拢团队用户的核心竞争力 — 团队协作 而 Figma 最核心的竞争力，非团队协作不可，这也是 Figma 能够抵抗 sketch 赢家通吃的大势，硬生生从 sketch 手里抢下一片市场的关键所在。

它进可实时协作，几位 设计师 同时操作同一设计文件，不用再受你改一下保存完之后他才能再改第二下的困扰；它退又可评论留言，哪里急需修改、哪里优先级较低，又或者如果恰好马上下班，却有地方需要记录的话，这个功能绝对属于杀手级 feature。

5. 恢复历史版本 我不知道大家有没有经历过，对一个文件一顿猛改之后眼疾手快行云流水地按下了 ⌘+S 和 ⌘+Q ，美滋滋交稿下班之后 leader pick 了前一个版本。尽管这是小概率事件，不过一旦遇到就只能欲哭无泪地修改回去。

Figma 在这一点上就做的非常到位，版本管理体验良好。

Figma 中每一个成员做的每一次修改都会自动生成对应的历史版本，即使一些成员误操作修改或者删除了一些东西，依然有机会一键抢救。

但 Figma 目前也有一些有一些可能「劝退」新人的问题：

1. 无中文 我想作为设计师，认识几个英文单词并不是什么难事，新人只要多用几天软件，一边用一边查查词典，就 Figma 里面这些单词量并不成问题。

2. 全程需要联网 同样是由 Figma 线上工具的特质决定的，在没有网络的特殊情况下可以先使用 sketch 来完成工作，再将 sketch 文件导入 figma，图层、蒙板、图片、矢量几乎全部可以保留下来。

3. 网络不是特别稳定 由于 figma 服务器在海外，所以国内网络直连不太稳定。如果你想要又快又稳定的网络访问，找一个梯子对于设计师这种常年扒在墙头往外瞄的人来说也并不是一件难事。

4. 插件、资源生态不够完善 相较于 Sketch 来说，Figma 显然还属于后辈，所以插件生态还略显单薄不是特别完善。不过 Figma 本体的功能已经非常完善和强大了，所以日常工作基本上都能满足。

这些问题有些如果努力一下完全不成问题，有些也很好解决，有些需要时间去积累，但这完全不妨碍现在的 Figma 成为在一定程度上可以替代 Sketch 的软件。

1. Windows用户 如果你用的 Windows，那么目前唯二可以用来做 UI 设计的软件是 XD 和 Figma。

XD 今年 10 月起开始收费。当然不是全功能收费，但是「保存到本地」这一功能是需要收费的，否则只能存储在只有 2G 容量的云端，这就比 Figma 的体验还差了。

所以在 10 月之前你们依然可以使用 XD，但 10 月之后，如果不想花钱你们将只剩 Figma 可用，想熟悉它不如趁早。

2. Mac用户 Sketch 依然是国内的 UI 设计工具王者，如果个人使用且没有团队协作的需求那我还是推荐 Sketch，但一旦涉及到两人或（尤其是）两人以上的中小团队，Figma 独此一家的团队协作优势将展现的淋漓尽致。

另外一种情况是你想找工作，要做项目整理或者重设计，那么在 Figma 中完成会是一个更好的选择。你带着 iPad 就能让面试官看到项目源文件，指不定什么时候就能给自己加加分。

当然前提是，你最好得会翻墙。

之前看到一篇文章中说设计长久以来就像一座封闭的孤岛，受限于专业设计工具的本地存储形式，设计师不仅与上下游的衔接困难，内部交流沟通的效率也不容乐观。我们交给客户视觉稿，交给开发标注切图，交给设计师同事源文件，一项设计任务的输出变得非常繁琐和琐碎。

现在，Figma 将这些孤岛链接在了一起，开发可以直接查看对象属性甚至代码，设计可以查看调用组件库、规范、原型、视觉稿，这些只需要一个分享链接。

所以我说 Figma 是面向未来的设计工具，一点都不夸张。

最后如果你们想尝试 Figma 的话，有 Sketch/XD 基础的同学只需要花一天时间熟悉一下 Figma 的操作和快捷键，就可以进行无缝切换，它几乎没有学习成本。或者实在不想自己摸索也可以康康我在虎课上录制的 Figma 教学，过一遍就会，没有难度。

今儿大魚必须要安利一款设计神器

那么，现在让我告诉你这款正在崛起的设计神器到底神在哪里！

如果你的工作学习环境涉及以下方面，别犹豫，赶紧打开使用吧 https://www. figma.com/ 包括但不限于： 1.制作海报，宣传物料

2.网页，手机，平板的界面设计

3.作品集排版

4.交互高保真原型

5.Icon制作

如果大家有什么建议和补充 欢迎评论区指出！

如果觉得这篇回答有一定的帮助，也请给大鱼点点赞啦

作为一个设计工具插件的开发者，同时开发过Ps / Xd / Sketch / Figma插件的人。 我来从不同的角度说说Figma。

不磨叽，先说结论： Figma是我认为未来最理想的UI设计工具 优点已经有很多人说了，前面也有太多不错的回答，我说个我最看好的东西： 那就是Figma的社区做的特别好。你可以在社区里面分享你的作品或者是插件。而使用Figma的设计师，可以随便复制你分享的作品到本地。这样，源文件就是他的了。拿着大神们的源文件，你可以分析、学习、甚至直接使用。 本质上，这个设计思想和github的开源非常类似。实现了真正的：“你的作品不错，不过现在是我的了”（笑） 而你分享作品下载量，则是真正体现你实力的东西，这东西可不好刷票。来自全球的设计师。你再也不需要站酷或者ui中国的小编给你一个所谓的评分或者作品边上一个“火”的图标了。这真正做到了相对的公平、公正。 对于我们插件开发者，你下载了插件，不好用，卸载后，我插件的下载量还会被减一分。说明使用者少一个人了。这就更恐怖了。真刀真枪的拼杀，玩的就是硬实力。这要求我更用心的做好插件开发，免得“掉分”（苦笑） 在插件方面，Figma的插件发布，不需要再次审核。开发者可以随时改代码，随时提交。上一秒提交，下一秒使用者就用的是最新版本了。不存在什么再次下载更新。也没有官方再次审核，又快又好。这个设计完爆了其他软件。

不过呢，Figma其实在国内有很多阻力

阻力1 服务器在国外，打开慢 不排除人家以后牛逼了，在国内布置服务器就搞定了，Apple不就是在贵州布置了吗，如果有收益，合理合法，收割韭菜完全是没问题。但是现在的打开速度嘛，好像经常被抱怨。

阻力2 这玩意断网不能使用 涉及到内网要保密的东西，不可能让你用互联网的东西来做（比如华为的东西，政府部门那么多G端的设计，都要保密，况且国际形势这么不好，对吧）大量公司和设计师肯定还是不能使用在线平台的。 阻力3 还是断网不能使用 这意味这不能破解。蓝湖突然收费你见到了吧。Figma也可以用户多了以后收费呀，而且这种联网的东西，是不可能像传统软件一样破解哦。你确定咱们国人设计师以及公司会付费购买？ 阻力4 阿里这样的大厂，紧紧的抱住Sketch 你可不要忽视国内大厂的影响力和传播力，Ant Design下那么多好东西，你确定他会改用Figma，设计师或多或少还是受到大厂影响很多。团队用什么，我们用什么，大厂用什么，好东西就多。Sketch下那么多优秀的插件都是阿里搞的。 阻力5 英语 这玩意可不能忽视，学设计的学生大部分高中那会儿在学习美术，外语成绩稀烂的很多很多。这玩意阻力可不小。现在虽然有插件可以翻译部分内容，不过也不排除人家Figma未来做个国际化，Adobe能做，它要做肯定也不难，就是翻译一下吗，总比写里面那么多代码容易得多吧。只是人家是否重视中国市场而已。但是英语绝对是国人设计师不小的阻力。 写在最后 其实我现在已经不再做设计了，我制作的插件已经在ps、xd、sketch、figma上全面覆盖，设计师用什么工具，我都会开发相应的插件，反正你也逃不出我的手掌心。但是我个人最喜欢开发Figma插件，未来工作的重心，也会开发很多Figma插件。

目前我简单的尝试了2款，欢迎你来试试： 我开发的插件1： Chinese Content Filling Assistant 它是一款填充文字数据的插件 网站： Figma内容填充助手 我开发的插件2： NB Charts 它是一款绘制图表的插件 网站： NB Charts(Figma拉框助手) https://www. figma.com/community/plu gin/882853640594594542/Chinese-Content-Filling-Assistant 好用到想把ai indesign的工作流程都迁移进figma。

感谢原文作者同时也是我们虎课合作讲师的 @酸梅干超人

让Sketch、XD地位不保的Figma，到底多好用？ Figma是什么？ 它是一款类似Sketch或XD的UI设计工具，但Figma跟后两者的本质区别在于它基于web，也就是说只要有浏览器和网络就能开、就能用。

目前Figma在国外收割了一大批拥趸，比如大家耳熟能详的Twitter、微软、Github以及Dribbble等等。在国内的热度虽然还没有这么高，不过Figma正在逐渐抢占 Sketch 的用户，比如最近很火的阅文，其体验设计部YUX已将海外项目webnovel全部迁移至Figma。

那么它何德何能，可以成为如此耀眼的新星呢？

01 Figma为什么这么厉害？ 01 #Windows上最好用的UI设计工具 这时候Figma给windows带来了媲美，甚至超过sketch之于mac的体验。基于web这个基本特质决定了Figma非常容易适配全平台，只要你的设备有浏览器，联了网，就随时随地可以快乐地进行设计。

不管是macOS、windows、Linux，甚至最近连 iPad 都可以了！

02 丝般顺滑不卡顿 在使用Figma之前，我也以为线上的软件必然比本地的好不到哪里去，但后来发现我错了，脸都被打肿了，这里演示中因为iOS没有Figma版本的guideline，所以用谷歌MD的替代，文件量大致相当。

Figma似乎并不怎么消耗本地资源，也完全没有 sketch 那样严重的内存泄漏问题，所以当我打开同一个APP项目文件，Sketch 内存 (加缓存) 占用达到恐怖的 16G，Figma甚至不足160M。

经过实际体验来看，无论多大的文件，Figma 似乎都能达到流畅的60帧渲染。

03 大杀器 — 全局组件 Figma的组件和sketch类似，但又有区别。

得益于线上协作的模式，你可以在Figma新建一个专门的文件来定义组件 (component) 或者样式 (Style)，再把这个文件发布到库 (Library)，这样你团队中的所有成员都可以在团队中的任意文件调用这些组件。

而只要修改其中一个组件的样式，团队中所有的文件内用到该组件的地方，都能选择是否要同步更新。

有同学可能会问 “啊那不是和sketch的library一模一样么？”区别在于Figma的组件库是同步、实时、全员更新的。这就意味着团队中每一个成员和组件库之间的交互都更加快捷高效，而组件库可以更新给全部成员、全部文件，再也不用像Sketch那样10个人10种不同的组件版本了。

04 拉拢团队用户的核心竞争力 — 团队协作 而Figma最最核心的竞争力，非团队协作不可，这也是Figma能够抵抗sketch赢家通吃的大势，硬生生从sketch手里抢下一片市场的关键所在。

它进可实时协作，几位设计师同时操作同一设计文件，不用再受你改一下保存完之后他才能再改第二下的困扰；它退又可评论留言，哪里急需修改、哪里优先级较低，又或者如果恰好马上下班，却有地方需要记录的话，这个功能绝对属于杀手级feature。

05 恢复历史版本 我不知道大家有没有经历过，对一个文件一顿猛改之后眼疾手快行云流水地按下了 ⌘+S 和 ⌘+Q ，美滋滋交稿下班之后leader pick了前一个版本。尽管这是小概率事件，不过一旦遇到就只能欲哭无泪地修改回去。

Figma在这一点上就做的非常到位，版本管理体验良好。

Figma中每一个成员做的每一次修改都会自动生成对应的历史版本，即使一些成员误操作修改或者删除了一些东西，依然有机会一键抢救。

02Figma目前存在的一些问题 但Figma目前也有一些有一些可能“劝退”新人的问题：

1. 无中文 我想作为设计师，认识几个英文单词并不是什么难事，新人只要多用几天软件，一边用一边查查词典，就Figma里面这些单词量并不成问题。

2. 全程需要联网 同样是由Figma线上工具的特质决定的，在没有网络的特殊情况下可以先使用sketch来完成工作，再将sketch文件导入Figma，图层、蒙板、图片、矢量几乎全部可以保留下来。

3. 网络不是特别稳定 由于Figma服务器在海外，所以国内网络直连不太稳定。如果你想要又快又稳定的网络访问，找一个梯子对于设计师这种常年扒在墙头往外瞄的人来说也并不是一件难事。

4. 插件、资源生态不够完善 相较于Sketch来说，Figma显然还属于后辈，所以插件生态还略显单薄不是特别完善。不过Figma本体的功能已经非常完善和强大了，所以日常工作基本上都能满足。这些问题有些如果努力一下完全不成问题，有些问题也很好解决，有些问题需要时间去积累，但这完全不妨碍现在的Figma已经是一款可以在一定程度上替代Sketch的软件了。

03 Sketch/XD/Figma如何选择？ 如果你用的Windows，那么目前唯二可以用来做UI设计的软件是XD和Figma。XD今年10月起开始收费。当然不是全功能收费，但是「保存到本地」这一功能是需要收费的，否则只能存储在只有2G容量的云端，这就比Figma的体验还差了。所以在10月之前你们依然可以使用XD，但10月之后，如果不想花钱你们将只剩Figma可用，想熟悉它不如趁早。

Sketch依然是国内的UI设计工具王者，如果个人使用且没有团队协作的需求那我还是推荐Sketch，但一旦涉及到两人或 (尤其是) 两人以上的中小团队，Figma 独此一家的团队协作优势将展现的淋漓尽致。另外一种情况是你想找工作，要做项目整理或者重设计，那么在Figma中完成会是一个更好的选择。你带着iPad就能让面试官看到项目源文件，指不定什么时候就能给自己加加分。当然前提是，你最好得会翻墙。

04 结尾 之前在一篇文章中看到说设计长久以来就像一座封闭的孤岛，受限于专业设计工具的本地存储形式，设计师不仅与上下游的衔接困难，内部交流沟通的效率也不容乐观。我们交给客户视觉稿，交给开发标注切图，交给设计师同事源文件，一项设计任务的输出变得非常繁琐和琐碎。

现在，Figma将这些孤岛链接在了一起，开发可以直接查看对象属性甚至代码，设计可以查看调用组件库、规范、原型、视觉稿，这些只需要一个分享链接。

所以我说Figma是面向未来的设计工具，一点都不夸张。最后如果你们想尝试Figma的话，有Sketch/XD基础的同学只需要花一天时间熟悉一下Figma的操作和快捷键，就可以进行无缝切换，它几乎没有学习成本。

或者实在不想自己摸索也可以康康我在虎课上录制的Figma教学，过一遍就会，没有难度。那么这一篇Figma介绍就到这里结束，胖友们下次再见。

点我领取会员免费学习Figma软件全套入门教程！ 再次感谢 @酸梅干超人 讲师的干货文章！

附上他的更多教程：

赞同一下呗，达成你我默契成就

关注一下呗，每天进步一点点

收藏一下呗，哪怕吃灰也想解决你的不时之需

置顶一下呗，如果你想每天都见到我！

评论一下啦，随便唠点啥，别让我冷场：）

之后会陆续更新 Figma 视频教程，用10个真实案例教大家掌握Figma的基本操作。

Figma 从诞生起就被称为次世代的设计工具，因为它最大的特点就是通过线上网页的方式运行，能高效满足远程的分享、协作和沟通。

这意味着一个设计团队的工程文件管理可以实时同步，再也不用分散在每个设计师的电脑中，修改一个文件也不用每次发一遍源文件，加上可外链的规范库，让团队设计效率得到革命性的升级。

至于细节功能上的差异，还有 Figma 对页面渲染效率的优势，都是次要因素。在各个国外设计媒体和网站上，Figma 使用者的占比逐年稳步上升，反超 Sketch 成为最多人使用的 UI 设计工具，就已经说明它的优势了。

即使国内的主流大厂，也有大量的团队开始转用 Figma，作为主要的项目界面设计工具。腾讯自己出过一份 Figma for Tencent 的报告，下面是一些关键截图。

Figma 在国内也必将成为未来的发展趋势之一，这个方向是不可逆的，在趋势面前……当然是选择顺应它咯！Figma 是目前我们最推荐的 UI 设计工具，是目前新手学习和入门的首选。但是，对新手来讲，它前期包含的3个阻力，分别是网络、语言、费用，下面简单做个说明。

网络问题 因为Figma没在国内部署服务器，所以在不开加速器的情况下往往会访问比较慢，但实际体验下是这两年的国内访问速度提升非常可观（做过专项线路优化应该），满足日常使用。

语言问题 因为 Figma 没做中文适配，目前一定要刷中文是有传说中的补丁包，但是非常不稳定，而且每次 Figma 更新就要重装（每周一次以上的频率）。作为 UI 设计来讲，必要的英文专业词汇还是要了解的，只要看过教程多操作，顺带用翻译软件看下名词解释，几天就能完全适应。

费用问题 对于个人用户是免费的，在未来进行团队协作的时候，人均月费是 12 刀，价格并不算太贵，而且因为自带蓝湖的功能，可以省掉蓝湖的费用。如果现在正在用别的软件，也不要紧，UI 类软件的学习成本非常低，只要掌握其中一款，再学会另一款也就 1-2 天的时间。我们也会在未来继续更新 1 小时系列软件课帮助大家快速入门。

新增：Figma 多人共同操作实况，场面极度热闹，跟庙会一样，哈哈。

以下，初次编辑内容：

--

很好，非常好，看到这么多人挺 Figma 我就放心了。

关于 Figma 的好处这位大佬 @左子祯 ，已经说的非常详细了。

而我这边就好好说一下 Figma 在国内的实际情况，文章后面会有我做的 Figma 视频教学。

我们从去年开始就建立了 Figma 的小微信群，从群里小伙伴的沟通，到我在工作中去推广 Figma，总结来说，有下面几个点是很多人关注的（以及是推广 Figma 的拦路虎）：

1、Figma 是英文，并且没有插件可以汉化，对于英文不好的小伙伴来说，非常抵触！再初次入门的时候体验不好。

但我的观点是，9012 年了，设计师多学点英语是非常有好处的，而且 Figma 的功能非常简单高效，从 Sketch 转到 Figma 几乎可以说是无痛 0 成本，就那么几个功能，而英文造成的困扰可以忽略不计。

2、Figma 是在线 Web 形式，不是本地的，非常依赖网络，公司担心安全问题，个人担心没有网络就直接歇菜！

这一点确实是 Figma 的一个缺点也是它的特色所在！

先说网络问题，我在上个月还真经历了几天没有网络的办公，这种情况下我只能选择用iPhone 的个人热点去给笔记本上网，这时候的真实情况是，个人热点不稳定，Figma 用起来有时候会连不上网导致保存不了设计，但整体来说没什么损失，网络的锅。

公司担心的安全问题，我相信 Figma 官方不管怎么声明，该不信任的还是不会信任，我之前经历过一家特别传统的软件开发公司，内部要求所以文档、工具一律本地化，本地的 Wiki 库，禁止一切线上的工具，如石墨文档、Figma、语雀等等。关于这一点我个人无能为力，这里只是叙述下现实情况。

3、Figma 是国外服务器，用起来卡卡的，万一哪天被墙了咋办？

这个问题也被人问到过，首先第一次打开 Figma 会有些慢，原因是国外的服务器，打开之后就没啥问题了。

用起来卡卡的其实可以忍，不是啥大问题，真正想流畅开的，可以选择科学上网。

被墙的问题，虽然可以科学上网解决，但是我觉得墙的几率不大，参考 GitHub 的现状。

4、目前为止，多数公司不太了解、认可 Figma，而像我这二线城市，用 Sketch 的都特别少，更别说 Figma 了。

关于这一点我相信随着大家推广的普及，接受的人会越来越多，最大的好处就是不挑电脑，苹果和 PC 都可以整！

最后，我个人在 B 站做了一系列 Figma 教学视频，对 Figma 感兴趣的同学可以去瞧瞧。

教学我分了几个部分：

还有今天刚刚出炉的：

最后，想进我们那个小微信群的，加我拉你：lijxse

在评价figma之前，我们首先要知道这款软件是做什么的、特点是哪些？文末也会对吧一下Figma和国产设计协作产品Pixso。

它是一款基于浏览器的支持多人协同的设计工具，专精于UI设计领域。 因为运行在云端，所以极其利于多人协作，目前越来越多的设计团队从本地设计软件转向至figma。 当前，figma已经成为主流原型设计工具。 尽管figma这么好，但它与UI设计界的龙头大哥sketch又有何区别呢？

◍ 全平台适用 比起sketch的专供macOS用户，figma是支持Windows、macOS、Linux各个平台！

虽说做设计用Mac更好，但国内市场上的设计师还是有很大一部分的Windows用户，figma对win系统的支持，可谓是一大利好！

◍ 可多人协同 作为基于云端的设计软件，figma无需再通过第三方平台来进行传输设计稿，而是使用 「链接」 来分享。

◍ 完善的社区 和sketch不同，Figma拥有官方社区，设计师可以在社区中直接分享作品，而使用figma的设计师可以直接复用这一文件， 相当于社区里都是开源文