要说近几年话题最多的界面设计软件，figma当之无愧。
它先以远程共享协作的超前思想快速形成自身壁垒，又以摧枯拉朽之势把sketch老大哥拉下神坛。
但是面对这款年轻的设计工具，大多设计师会存在下面四类问题：
1.还没用，不了解figma
这个阶段的问题集中在工具本身，比如它相比sketch到底有哪些优势？学习、迁移、金钱成本有多少？目前是否能完全取代sketch？等等。
2.刚使用，很多新概念不知道或不懂
很多人说它学习曲线平缓易上手，的确是这样。但是figma也有很多新概念需要花成本去理解掌握。
比如光frame的概念就很难用惯性思维去理解（一开始我以为就是个画板然鹅并不是）。而且frame牵扯的东西非常多。frame到底是什么？frame和group的差异？frame和组件、约束、自动布局的关系等等。
而且，关于frame这个极其重要的概念，讲透的必要性非常大。
3.使用较长时间，但进阶功能不会用
诸如约束、变体、自动布局等等，不了解、不会用、用不对、用不熟。最后导致还在按sketch的那套老方法布局，结果就是效率并没有提升多少。
但是，恰恰是这些进阶功能是figma的精髓所在，掌握它们才能真正的效率翻倍。
4.问题不断产生却难以解决
以上这三个阶段中，也都会产生各种无法解决的棘手问题，导致作图就像被带上了脚铐去跳舞，不去正视、解决都会让你寸步难行。
以上这四大类问题，我都躺过、也研究过。
前段时间借着为大学生授课的机会以教带学、查漏补缺，现在我会将接触figma以来的所有心得、经验，结合前辈们的探索一起凝练成一部《Figma学习手册》。
它存在的意义，是通过通俗易懂的语言来解决上面四类问题，帮大家少走弯路，早点下班。
因为篇幅的原因，它将通过连载的方式在我的公众号上更新。我可能会引用一些去年连载的《如何用sketch搭建设计系统》系列文章的内容，放心，链接会全挂上。
废话不多说，今天开更第一大篇《初入江湖》（有武侠那味儿了），目的是解决第一类【还没用，不了解figma】新手村问题，围绕优劣势、成本投入等带你全方位了解这个工具。今天先讲上半部分。
大纲：
1.figma的使用现状
2.什么是figma？
3.相比sketch，figma有哪些惊艳的优势？
01Figma的使用现状
为了了解使用现状，我从uxtools平台挖了figma过去两年的全球使用率。
看图说话，可以发现19年时，figma的使用率明显落后于sketch。而在这个时段内，国内也基本围绕在「嗯，figma还可以，但想取代sketch还是太嫩了」这类论调。
但是2020年，figma逆风反超了近1倍。仅仅是一年的时间，全球使用率就提升了足足75.7%。这是什么概念？
——大概就是十个设计师里，就有8个都在用figma。由此充分说明，这款软件是有多么火。
当然，用的人多就能代表质量好么？从uxtools的2020年度设计工具榜单上看，不论是使用率、还是评分，figma全都位列第一，所以质量那是不用怀疑了。
而且，国内外知名大厂基本都用上，并且目前还在不断普及。
由此可见，sketch转figma，是全世界的趋势。figma工具将会代替sketch，成为绝大多数设计师的第一选择。
02Figma是什么？
用一句话去定义figma，它是一款基于浏览器的全能设计工具。
简单说，只需要有浏览器和网络，你就可以开干了。
而figma全能的点在于，在基于浏览器的环境下， 你就可以搞这些：ui、原型、云同步、实时讨论、开发协作、实时共享、团队库等等。
它不像sketch那样需要依靠大量第三方工具填补不足。省掉了不同工具的切换，自然节约了非常多的时间。（这些功能在后面会慢慢细讲）
这倒让我想起英雄联盟中鳄鱼这个上单万金油，有位移、有控制、有回血、有aoe、有爆发还tm贼肉。名副其实的对线之王。
而figma就是这样的万金油的存在，集百家之所长，同时也有自己的特色。是不是有notion那味儿了？（话说，我肌肉男画得还不错吧）
03相比sketch，figma有什么优势？
上面的一句话定义里，「基于浏览器」五个大字被我标红了，因为以下我所说的绝大部分能让figma横着走的优势，都和它相关。
1.全平台
实用指数：⭐️⭐️⭐️⭐️⭐️
figma出现之前，sketch不移植win系统的臭毛病就被诟病已久。很多团队因为预算不足无法全量配备imac，从而导致设计工具不一致的问题。
而figma基于浏览器，自带全平台的超级优势。不论你是什么系统，只要有网络和浏览器，你就可以随时随地使用figma。而且也不受物理设备、场景的限制。
最典型的例子，就是疫情下的居家搬砖，咱不用费尽心思考虑公司和家里电脑源文件的同步问题，有网络和电脑就随时可以开工。
2.出乎意料得流畅
实用指数：⭐️⭐️⭐️⭐️⭐️
大家都有经历过这个问题，sketch的画板只要一多起来，延迟和卡顿的毛病就会频繁出现，极其影响你的作图效率和心情。
比如我之前做过pc端项目，累计大概有六十个左右的1920宽的画板，每次打开作图就动不动给你转彩虹圈。而且经常动辄吃上十几G内存，有时突然给你来个崩溃，非常闹心。
但是，这个文件放在figma中却如丝般顺滑流畅。
讲真这一点当时是让我挺意外的。
因为和大多数人一样，我们受客户端应用的影响，觉得基于原生OS开发的应用可以更好得利用硬件资源，而基于浏览器的应用很容易被扣上「功能弱」「性能低」的屎盆子，尤其是这种专业型生产力工具，「不靠谱」仨字就差写脸上了。
谁能想到，光性能这个维度，figma就能甩sketch十八条街。
不论你塞几百个画板，都能满60帧流畅作图！反正到目前为止，除了加载问题外，我还没有出现过作图中卡顿的情况。
这个优势我绝对要给5星，太实用了。
3.更高效的多人协作
实用指数：⭐️⭐️⭐️⭐️⭐️
上下游协作
设计这个职业曾经有过一个很有意思的比喻，它就像一座与外界断层的孤岛，无法正常与外界连接。而且不仅仅是上下游，设计师内部也存在这个问题。
1.设计师的源文件，因为专业工具的门槛导致上下游没办法正常访问。
这就导致设计产出过程处于完全不透明的黑盒状态，进度和质量都无法知晓；
2.源文件的无法访问，也导致了在资源交付环节需要给它造桥。
比如对接需求方，需要单独导出视觉稿；对接开发，需要单独通过第三方工具标注切图。
而设计稿本身会有一段频繁修改尝试的阶段（设计师都懂），因此光资源交付这个环节就要付出大量时间。
多设计师协作
1.单线程处理各自的需求，耗费大量沟通成本
每个人在各自的文件里作图，对方啥进度，啥质量完全没办法知道。为了降低信息不对等，得付出成吨的沟通成本。
一旦沟通不到位就容易出篓子，出篓子可能就面临背锅问题，面临背锅问题那就容易从对事变成对人，导致各种蛋疼的团队矛盾。
2.涉及到共用的模块、组件，需要依赖频繁的本地传输
比如每次自己或对方改了个东西，就需要群里发源文件 ，以避免最后产出的不一致。这种本地化资源对接方式会占用大量无意义的时间，有经历过的朋友都懂。
而figma的出现，则像超巨一样直接打破了这座孤岛的封闭格局，对传统的本地化协同模式造成彻底冲击。
它首次从团队的角度定义设计——设计绝不是个人单打独斗，而是需要上下环节的高效衔接协作。
首先是上下游协作，只需要一个链接，项目中的每一位参与者，都可无障碍得实时看到设计师目前的工作。
以往的黑盒逻辑被完全透明化了。在这种情况下，参与者可以更早得提出想法和设计师交流想法，有效避免了反复的修改。
另外，figma上下游的资源交付环节，也直接省掉了以往的那些裹脚布，一个链接即可满足产品和开发的各自诉求。
而多设计师协作时，项目文件中建立多个page，每人在各自的page作图，就可以随时查看对方进度，有共用的地方拿来即可。既能于各自任务中独善其身，又可于整体效果中兼济天下。
而且，内置的评论功能让所有成员都可以自由发言，设计稿owner也可以快速回复。很好得降低了线下沟通带来的成本和信息不对称问题。
4.更高效的文件管理
实用指数：⭐️⭐️⭐️⭐️
在以往的sketch，我们都是在本地生成各种源文件，本地资源的蛋疼之处就在于不论是取用、还是管理都需要高额成本。figma线上模式让取用及管理更加轻松灵活。
比如，figma将文件按照个人和多人协作两个维度分成了drafts和projects两大类。
过程稿、个人练习放在drafts，定稿、团队组件库、设计规范全部放在team的projects中，很好得实现「干湿分离」，避免文件管理的混乱。而且，草稿和项目是可以相互转换的。
而且，你可以像制作cd专辑一样，给文件做一个封面。上个简单的教程——
这三步的主页右键藏的很深，其实就小房子那儿。
讲到文件管理，不得不提文件的历史版本。
sketch作图时，很多时候我们会不小心把初稿给覆盖或误删，一旦最后定用初稿基本就GG了。这也就导致一个小小的需求对应了几十个版本的窘境。但是使用figma后，基本就可以告别这种问题了～
Figma中，如果 30 分钟内文件没有被更改，则会自动保存为一个版本。你也可以通过cmd➕alt➕s手动保存一个版本。
所有保存下来的版本随时都可以恢复！而且恢复到老版本之后，之前的新版本也不会丢失。
另外，版本的复制功能也能满足多版本同时保留的诉求。
很多朋友不知道入口在哪，其实这个入口设置得很巧妙。它放在了文件名的下拉框中。很好地解释了历史版本存在于这一整个文件。
这个功能非常有用，但是藏的很深，自己摸索时很难发现，各位小伙伴可以留意一下。
5.开发式设计
实用指数：⭐️⭐️⭐️
figma很多地方沿用了开发逻辑，比如frame的概念参考了div，自动布局的概念参考了flexbox布局。它能很好地帮助设计师以开发思维进行设计。
-对于设计师来说，一方面熟悉开发思维，降低沟通成本；另一方面这种方式更加理性、严谨，降低了像素偏差出现的可能性；
-对于开发来说，因为设计师使用了开发更容易理解的方式去布局，所以在开发视角下能更好得理解设计师的布局思路，让开发更开心得coding、提升还原度。
这个优势看着不如前面几种那么imba，却能潜移默化得影响我们的布局习惯让其趋于理性，提升与开发的默契。
6.更高效的作图
实用指数：⭐️⭐️⭐️⭐️⭐️
决定生产力的最大一part，后面几篇都会围绕它来讲述，这里简单讲两点：组件和布局。
组件方面，sketch的使用逻辑非常蛋疼。原子的不彻底、实例受到组件束缚无法调整样式等等，导致sketch组件需要枚举出所有的可能性，最后就会变得非常臃肿，查找困难、难以维护。
比如下面这个例子，做好主组件后，我想再扩展出下面三个不同的样式。
sketch需要再次构建3个不同的组件。但是figma完全不用新增任何组件，直接基于上述的主组件生成的实例即可修改。
布局方面，sketch虽然提供了smart layout和resizing来实现内容的自适应及响应式布局，但是步骤麻烦、灵活性差。
比如在定义自适应时，还得需要手动间距来定义padding（内间距），制作和维护成本高。
如果有小伙伴看过我去年写的《如何用sketch搭建组件库》系列文章，对这两类布局的构建成本应该能深有体会。即便有Anima插件给sketch撑腰，但容易造成卡顿、不兼容symbol的劣势也直接劝退了一波用户。
而这些问题，figma直接一个自动布局搞定。简单用gif演示一下。
关于如何用figma开心作图，后面会有更大的篇幅给老铁们细讲，这里不赘述。
7.爱送温暖的社区
实用指数：⭐️⭐️⭐️⭐️
主页账号那可以切换到figma社区页面。社区资源分为两大类——插件+源文件。
丰富的插件
figma的插件生态完善，除了能看到排行，还能看到最新上线的。而且，它不像sketch那样，出现产品更新后，老版本插件无法使用的问题，这一点很赞。插件后面我会慢慢推荐，这里就不赘述。
除了插件外，还有个玩意儿要重点讲讲。它就是源文件。
丰富的源文件
源文件这玩意儿就像设计师的老底，除了拿来换钱，不到万不得已基本不会轻易示人。就算是dribbble、behance这样开放性的社区，也仅仅停留在作品展示上。
但反观开发小哥的Github社区，倒是真正的开源共享。比如我看你这个代码写的不错，我开一个fork分支，这代码就归我了。
figma大概是受github的熏陶，利用社区直接搞了个「源文件共享」的模式。
这个模式厉害在哪？和github一样，只要你在社区看到任何钟意的设计，全都可以一键下载到自己的figma上，源文件的每一个图层、组件、路径全都有！
这也算是设计师找素材时一个剑走偏锋的野路子，平时想搜啥图标、logo，直接社区开搜，源文件都给你安排好了图层什么的都给你了，下载后就变成你自己的了，随你怎么搞。
比如我想搜adobe系列产品logo，以前都是网上搜，要么糊要么没扣底，现在可以直接去figma社区搜了，而且很多都是合集！
比如这位Andrey老哥做的品牌logo合集，下载量达到了15.4k，看着还不错。
Duplicate小按钮那么一点（Duplicate这个词用的很有灵性，实实在在的复制啊！），源文件就变成你的了。可以看到源文件里面涵盖了大部分的主流品牌logo。
而且，这些logo全部是作者自己一个个图层画的，形状、颜色等样式都可以任何diy。
各位可以去社区搜一波自己想要的玩意儿，你会发现宝藏的。
最后
关于figma优势的讲解到此结束。
可以看到相比sketch，我们使用figma时不用去操心操作系统、云同步、多人协作问题、内存、历史版本等等跟设计没啥关联的玩意儿，你所需要做的，就是专注于设计本身。
这一点来看，figma确实是能称得上解放生产力的利器。
气氛炒热，该给它降降温了。下一篇，咱们着重谈谈figma的劣势，以及我们每个人都非常关心的投入成本问题。
如果这篇文章帮到了你，点个「在看」，让它帮助更多的设计师。
我是Andrew，下期见。
参考资料
https://uxtools.co/survey-2020/
https://uxtools.co/survey-2019/
Figma.com
figma.com/blog/organize
figma.com/blog/componen
youtube.com/channel/UCQ
https://mp.weixin.qq.com/s/c1ASRC1wiyhZQTJ4PqAn6w
https://zhuanlan.zhihu.com/p/64356746
https://zhuanlan.zhihu.com/p/373280803
https://zhuanlan.zhihu.com/p/143099504
https://www.zcool.com.cn/article/ZMTE5MzAwNA==.html
《我做设计这么久，居然没听过这个模型？！》
《吃透这个概念后，我多年的疑惑终于没了！→》
《一招鲜、吃遍天的神仙风格，看这篇就够（文末福利）》
一起聊设计
文章标题：6000字超硬核干货，全方位带你解读figma（建议收藏）
文章链接：https://www.uied.cn/15116.html
更新时间：2023年04月15日
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
