前言

这篇文章其实是在公司的团队中推广Figma做的内容分享，这里分享出来给大家，一方面是希望更多的人去关注和体验一下Figma，希望它能给你带来惊喜和工作效率的提升，每天准时下班，另一方面也希望可以给准备在团队中推广Figma的小伙伴一点启发。

据了解，在国外Figma的普及程度更高一些，很多团队从sketch切换到Figma，国内的话也越来越多公司开始使用Figma，比如像网易、京东、头条和小米等就有设计团队已经开始使用Figma做设计了。

先来简单说说为什么我们团队会换设计软件这件事吧。最近几年我个人和遇到的大多数团队都是用sketch去做UI设计的，sketch确实是一款非常优秀的设计工具，当年把众多设计师从PS做UI中解救了出来，极大的提高了工作效率。但是现在sketch动辄几十G的内存占用，卡顿感真的是让人崩溃的想摔电脑，加上前段时间国内的某设计协作平台开始收费，让我们本不富裕的团队更是雪上加霜。团队希望想寻找其他免费协作平台替代，我却力荐团队更换Figma做设计，一是在线协作是大势所趋，Figma实在太方便了，二是没什么太大学习成本和迁移成本。推进过程中也遇到一些困难，但是最终遇到的问题都被解决，正式用Figma替代了sketch。协作一段时间之后，嗯，真香.jpg~

什么是Figma？

Figma是一款基于浏览器的协作式UI设计工具（有客户端），体验如丝般顺滑流畅，从此告别被Sketch低下的性能支配的恐惧，支持多平台，能高效的进行团队组件库制作和管理，在线协作更加方便，从推出至今越来越多UI设计师和团队投入Figma的怀抱。

基于浏览器的优点

跨平台 - 可以在所有平台上使用，甚至可以在iPad上使用（Win、Chrome、Linux、Mac、iPad）

无需保存 - 文件存储在云端服务器，无需保存文件到本地，方便随时查看，进行管理，无需频繁备份

协作方便 - 设计文件是一个链接，可以多人在线协同，工作更加高效，流程更便利

安全性

Figma支持历史版本恢复，免费版最多保存30天，专业或团队版无限制。

Figma考虑了灾难恢复，所有的基础架构都分布在3个AWS数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作。目前已在国内架设服务器，访问和同步速度更快，无需KX上网也能体验到丝般顺滑。

价格

目前入门版免费，最多可以有两位编辑者和3个项目；专业版15刀一个月，年付的话是12刀一个月，对学生和教育工作者免费；专业版45刀一个月，有更多可以定制的高级功能。个人学习使用的话免费版足够使用，但是团队组件库功能没法使用；专业版的话，核心功能基本上都覆盖到了，妥妥的够使用了。

Figma功能

功能丰富，基本上一个Figma就可以很好地完成从设计到协同到落地的整个流程。

Figma可以完成：UI设计（更强大的组件功能Component + 更加智能的Auto Layout + 更加便捷的Layout Grid） + 原型设计 + 设计稿标注（无需任何操作，直接将文件分享给开发即可查看） + 云端同步（实时同步，更好的协协同办公，支持多人同时在同一个项目内进行操作） + 项目历史记录（自动存储在云端服务器，不占用电脑内存） + 实时讨论（配合使用第三方插件功能更强大） + 实时分享 + 团队组件库 + Web API

核心功能

1.多人协作、实时分享

支持多人对同一项目进行操作，设计稿修改自动实时更新，提升设计团队内部的效率和体验，解决设计孤岛问题。无需导出图片或发送设计文件，通过设置不同权限，直接分享链接给对方即可查看或编辑项目，如果对方注册了Figma账户，以后就不需要重新分享链接给对方，可以直接进入Figma里面查看项目，并且通过分享的链接手机端也可以查看。

因为整个项目都在云端储存，且自动实时同步，所以项目内的所有修改和调整都可以实时同步到其他设计师和开发工程师，减少设计师之间的沟通和项目同步共享的问题，尤其是多人合作项目。且无需因为项目修改或者调整等原因重复上传标注，也无需提醒开发刷新标注网页，极大提升效率减少沟通和重复工作的成本。

2.即时评论

在Figma里面实时沟通，设计和协作可以是同时进行的，可以直接在设计稿的任何地方添加评论，支持@其他人，也可以在评论下互相回复，标记已完成表示该评论问题已解决，并可以对评论状态进行筛选。

3.观察者模式

点击演讲者的头像，即可查看演讲者的屏幕分享内容，实时查看演讲者的操等,支持多人点击同一人头像观看。

4.设计稿标注

通过分享出去的链接，开发工程师可以在设计图上查看图层信息和标注信息，无需再手动标注或者借助第三方标注工具，项目有修改实会时同步，提升上下游连接的效率，并且可以导出所需资源（包括 CSS、iOS、Android 样式，无需制作切片即可直接对父级和子级资源进行导出。

5.云同步

项目会自动保存，不用手动保存，不用备份，通过Figma账号随时随地都能打开项目文件，并且不用因为换了设备重新下载插件。

6.历史版本记录

免费用户可以保存30天的历史记录，付费用户可以永久保存历史记录。可以在项目重要节点手动增加历史版本，并添加备注信息，方便未来查看和使用，并且可以提取记录中的任一历史版本用来分享或提取出文件。

7. 组件

Figma的组件叫Compone，相比sketch的Symbol更灵活一些，使用Figma时，我们可以访问和修改Component 中任何层的属性，而无需将其从Master Component中分离。最原始的组件叫做 master，相当于一个母版，而从它复制出去的组件叫做instance，当你调整master的样式时所有的instance都会跟着同步，当你调整instance的部分样式时master是不会跟着变，非常灵活。Figma可以直接将master组件放在正在设计的设计稿旁边，这样非常方便，当有细节需要调整时，可以边调整master细节，边看它在整个页面中的效果，而在sketch中则需要去单独的组件页面进行调整。

8. 自动布局（Auto Layout）

相比sketch的里面的布局，Figma不需要创建组件，直接添加Auto Layout属性即可创建自动布局，并且支持多层嵌套，删除自动布局里面的内容，内容不会被删除，而是被隐藏，可以再次显示。配合组件使用，功能非常强大。

9. 布局网格（Layout grid）

Figma可以给frame和组件添加栅格（网格、行、列）。添加栅格后可以帮助我们对齐元素，当我们将元素和栅格对齐后，配合Constraints去拉伸或者缩小frame时，frame内的元素会跟着设置好的规则随栅格进行变化，更方便我们去做适配。

10. 交互原型功能

虽然是一个集成的功能，但是功能还是非常强大的，使用流畅，效果丰富，操作简单易上手，基本能满足做交互原型的各种需求，还是非常方便的。同时分享也非常方便，你可以把原型非常容易的发给用户作为测试，打开一个连接就好了，任何修改都可以实时同步给预览的人。

11.团队组件库

这是一个很多用户为之付费的功能，免费版不能跨文件共享Component，只能在当前项目内使用组件，但是成为付费用户后我们可以跨项目共享和更新Component、Style，团队成员可以共同维护一个组件库，一个组件库可以支持多个项目。

12.插件

拥有丰富的插件生态，足以满足日常的使用。Figma对开发者的支持非常的友好，做了很多API和非常规范化的东西，方便Figma的开发者进行开发，Figma插件上线一年，官方网站上已经有500+插件，每周都有多款新插件上线，相信以后插件生态会更加丰富，并且基本不会出现因为Figma版本升级造成的插件失效等问题。

13.Web API

设计师对这个可能不是很了解，网上查了一下作用还是非常强大的，例如通过维护一套设计规范把设计稿的样式给复用，设计师先制定一套设计规范，然后给到开发并共同维护，当设计规范发生修改时，可以通过API接口自动变化同步。或者将Figma与其他工具集成，目前插件商店里面已经有非常多这种类型的插件了。

总结

目前使用Figma已经有一段时间了，个人感觉体验不错。我认为这种云端的协作模式是未来的趋势，Figma解决了多人协作，软件版本，组件逻辑复杂的问题，同时，也不挑电脑平台。

另外，目前网页版可以使用网页插件实现汉化，对英语不好的小伙伴来说学习成本进一步降低，随着市场占有率的提升，期待官方提供原生中文支持。

说了这么多优点，Figma其实也有它的缺点，比如中文吃字的问题，断网的情况打不开新项目或者正在做的项目无法实时云端储存，不能按比例缩放，不支持多层描边等，但是在流畅面前，我选择了Figma。

学习资源

下面贴一些学习资源，希望能帮到正在看这篇文章的小伙伴。

Figma官网：https://www.figma.com/

网页端汉化插件：https://cn.figma.cool/

中文学习/资源站

Figma cool  https://figma.cool/

FigmaCN  https://figmacn.com/

FigmaChina  https://figmachina.com/

草帽sMao的B站教学视频  https://space.bilibili.com/108104104/video

iFigma  https://ifigma.design/

50个Figma的使用小技巧  https://mp.weixin.qq.com/s/0yeiK40MJOYUEF1-lIi0_Q

听说点赞的人每天都能准时下班

Powered by Froala Editor