无序的思维和有序的设计——Figma使用共享。

编辑导语：在设计产品时，我们可以使用多种产品设计工具，Figma就是其中之一。那么，Figma怎么用呢？在本文中，作者根据个人经验总结了Figma的用途、核心能力和学习路径。让我们看一看。
在完成了一个比较完整的设计规范后，我发现Figma如今似乎越来越得心应手了，除了那些极其复杂的复制粘贴逻辑，基本上所有的功能都能很方便的使用。欣喜之余，开始反思使用Figma过程中遇到的坑，以及之前设计实践中不合理的地方。
所以我打算简单整理出一个比较科学的学习路径和使用流程，一方面供想学习Figma的同学参考，另一方面作为自己的参考书，规范自己的设计流程。
首先，这篇文章对没用过原型工具的同学很不友好。可惜这篇文章是针对一些有经验的同学的。
如果你之前尝试过Photoshop(图层)、Illustrator(矢量)、Sketch、Axure等专业的原型设计工具，或者Powerpoint等产品，对于绘图作为设计体验的多少感到不适应，想要一个不用把它作为主要工作，每天都很好用的工具，那么它绝对值得学习和体验。哪怕只是浅尝辄止，也能多少感受到Figma带来的设计变革的气息，对于产品设计思维的提升是非常直观的。
下面将从Figma的使用、学习和实践三个方面进行介绍，主要讲解学习和使用过程中的难点和核心思想，最后提供一个简单的建筑设计规范思路供参考。
Figma是用来做什么的；Figma核心竞争力的分解；学习路径和相关材料。
一、一体机的原型设计工具说到一体机，很多人会想到在线文档这个概念。这款结合了Google Docs、Airtable、Workflowy和RoamReaseach等功能的终极笔记，号称将所有知识的链接收集在一个在线文档中。
受到美国投资者青睐的Figma是设计领域的一个新概念。但相比红海的在线协作文档市场，Figma一经推出就成为最耀眼的原型设计工具，短短几年就将Sketch和Adobe XD甩在了身后。
即使在市场接受度一直不高的中国，Figma也成为专业设计师的专属偏好，同时也吸引了一批“抄袭者”(比如即时设计)。究其原因，Figma是真正意义上的All In One，它足够开放，可以拥抱生态设计师，不断优化自身的功能和体验，成为新时代设计工具的标准解决方案。
此外，Figma的免费策略使得独立开发者的入门成本接近于零。对于小团队来说，Figma几乎是唯一可用的免费协作工具(甚至blue lagoon也开始无休止地收费……)。这种友好，和大几千倍的土坯产品相比，堪称良心。对于绝大多数观察者来说，Figma的逻辑是：从良好的个人体验过渡到团队使用的推荐。
总之，菲格玛杀死了所有人的秘密装置。
Figma似乎取代了所有主流的原型工具。对于产品经理和交互设计师来说，简单的原型、高保真的设计稿、交互描述、产品演示、程序讲解都可以通过一个链接直接在浏览器上完成，非常极客。更重要的是，你可以用Figma设计简历和作品集(比如我)，演示和头脑风暴白板。借助Figma的共享和协作功能，它们可以用作团队广告牌.
可以说Figma除了设计位图和专业的交互动画，还有相应的功能要实现。难能可贵的是，除了“实现”，Figma在某些场景下甚至可以替代专业工具的使用。
比如简历，借助Figma优秀的排版能力和基于云端的特性，你可以简单地优化你的设计，然后扔给雇主，雇主不需要下载一个巨大的压缩包。即时观看也提高了好作品被看到的可能性。对于团队知识库，借助语言鸟等工具，可以将设计文件作为链接插入到文档中，直接在文档中查看产品演示，高效而优雅。
对于产品从业者来说，无论你是独立工作还是在团队中完成一项设计任务，Figma总能根据你的需要完成你的要求。这是工具的高级。不要让Figma教你怎么用，你可以用它来建立你的生产环节。
Figma有几个优秀的特性支持生产环节。
1)画框：无限容器，比画布和图层更好的设计理念。
Figma中的画框既不像传统的画布，也不像图层的组合。在某种程度上，它是两者的结合。在页面中，您可以随意绘制图片框架，也可以在一个或多个对象上创建图片框架。图框建立后，成为前端概念中的“容器”，具有自动布局、边界限制、调整约束等诸多特性。同时，画框作为一个单独的组件，具有大小位置曲率、图层效果、填充笔触、效果调整、导出等属性。
因为画框不限制上下级关系，所以可以“一个画框框住”。用画框，可以当画布，在上面做页面；也可以将几个元素组合成一个画框进行整体调整。这个流程层会自动分组，整个流程会变得有序优雅。对于成型的图框，可以转换成组件，通过组件可以完成各种界面设计操作。
2) team团队：基于web，基于云，拉通上下游的设计。
Figma是目前市面上团队协作的主要设计工具，与Sketch有很大区别。即使Sketch、XD包括Axure这几年也逐渐加入了协作的功能，但是把这一切都放在Figma上才是合理的。可以说只有Figma做到了完全合作。
基于Web和基于云意味着所有的设计文档都将被放置在一个安全的服务器上，所有的更改都将被即时同步，提供一个完美的编辑历史，因此不需要保存为多个文件，一切都在一个链接中完成。
PM和UI可以与开发人员共享创意和创建的设计内容。只要打开链接，您就可以通过Figma发表评论、共同操作甚至发起语音审查会议(新版本)。可以看到团队的通用设计系统和共享组件库，方便统一设计开发。
Figma提供实时图层代码用于预览或复制上一节，开发可以直接导出所需部件的切割图和代码，大大缩短了交付时间。正因为如此，Figma特别适合在团队内部参与。可以说每个角色参与的越多，Figma的能力就越突出。
可以说，Figma将最初产品设计中涉及到的所有线框、原型、交互描述和注释都集成到了一个页面中，这对于开发团队来说简直不更友好。
3)流利：用一个词来形容就是流利。
对于这款All In产品，流畅度始终是关键问题。在这一点上，菲格玛的表现可以说是惊艳了。很难想象你能在浏览器上体验到如此丝滑的设计产品。再大的设计文档，再多的组件，再多的各种操作，都不会造成卡壳，同时拖动、编辑、协作，根本不会有强烈的感知延迟。
Figma的优化相对于同类本土产品来说，真的很干净。在网络畅通无污染的情况下，Figma可以高速打开整个网站，加载速度甚至比很多本土设计软件都要快。
这种流畅不仅仅是体验上的，更是心理层面的。Figma的设计区域划分非常科学高效，界面干净整洁。整个界面可以分为编辑切换、操作区、图层区、属性调整四个部分，最大的空间给了操作区。所以在使用Figma的时候，往往可以随心所欲，同时也总能找到需要的功能。
所以你可以完全没有压力的去创作，这就是题目所说的不用思考。因为菲格玛骨子里的流畅几乎不能给你带来身体上或者心理上的打扰，所以你不用担心会不会突然下去。只要网络没问题，一切都没问题。
二、Figma的核心能力：组件和插件。如果说上面提到的东西只是次要的，无法构筑Figma的护城河，那么我认为Figma中最独特、最难模仿的两大法宝就是组件和插件。前者表现了菲格玛对效率和工具性的思考，后者表现了菲格玛难得的开放和进取的心态。
1.组件组件很奇怪。每个设计工具都有组件功能。Figma的分量有多大的威力？
Figma的组件是一个杰作，同时，它们完美地契合了它的生态。
从功能上看，组件主要提供三种能力：可重用性、可继承性和可共享性，其背后有三种关系：组件调用关系、组件父子关系和组件共享关系。
1)组件调用关系
组件调用是组件的形成和重用。
在Figma中，单击一个元素后，您可以通过单击上面工具栏中的“创建组件”将所选元素转换为组件。转换成组件后，其逻辑与一般框架无异，但有一套独特的复用逻辑。在左侧的层区域中有一个资产列，其中将收集文件中的组件和其他已发布文件中的组件。当你需要在设计中使用之前建立的组件时，你只需要将它们拉出到操作区域，它们会根据其落地位置自动分组。另外，如果想直接复制已有的组件，也是可以的。
对于构件，可以选择将复制的构件实例分开，使构件转化为普通的框架/组/元素，方便您进行更改；还可以将多个组件组合成变体，让组件点击一个组件，选择切换到其他形式，非常方便tab，快速切换不同状态。
在任一子组件中，点击属性中的定位到父组件，定位到元组件，方便调整整体设计问题。同时，这个功能是跨文件的。也就是说，对于一些有通用组件库的团队来说，从云端绘制组件进行设计时，可以追溯到某个组件的设计原型。
这里的调用保证了Figma组件设计中的灵活性，将组件的特性与组件的特性分离开来，灵活地应用到各种细节设计工作中。
2)组件的父子关系
组件的父子关系实际上指的是组件变化的逻辑。
在素描中，有一个类似于构件概念的“符号”。复制一个符号，复制的符号可以根据主符号的变化而变化。
Figma随后强化了这一特性。在Figma中，父组件和子组件在层列表中显示不同的图标和层的层次关系，比Sketch和Axure的类似功能更直观。同时也意味着不需要进入某个区域或者设计新的文件来存储组件。你马上设计好的一个模块，可以转换成组件，在其他地方快速使用，不需要再创建新页面，来回调整。
通过更改父组件的任何属性，所有子组件都可以同步，而子组件的更改不会影响其他子组件。如果想让一个组件不受影响，可以把它的实例分开，这样就可以根据实际的设计情况制定比较方案。
亲子关系也可以随意调整。你只需要将子组件拖动到图层列表中的下一级，然后这个子组件就会成为新的父组件，这将大大方便设计工作。有时候这个函数在设计类似的模块时会产生奇效。
3)组件共享关系
Figma充分利用自身的特点，赋予组件自由共享的能力。这体现在同一个文件可以任意使用其他组件和颜色样式(颜色样式也可以看作是组件的一种)，其他文件可以调用这个文件的组件，同一个团队可以使用团队下多个项目的组件或者团队的公共组件库。
我们可以想象两种情况。对于新项目，我们可以调用旧项目的基本组件(如导航、按钮、颜色样式、卡片样式等。)来快速构建新的项目框架，这非常适合于确保一致的设计风格和产品规格
对于项目的修改，可以先建立构件库，然后通过修改构件库来调整项目中的所有构件，这样就可以调整整个设计稿。这在迭代工作中非常实用。它只需要改变组件配置，不需要创建新页面(往往新项目会涉及重新排版，工作量很大)。
最近，Figma宣布将支持分支版本。对于需要做多个方案的PM和设计师来说，借用一个组件的不同变化，可以快速搭建两个方案进行对比。简直难以置信！
总而言之，组件是Figma中一个非常强大的功能，学好组件是入门Figma必不可少的一步。后面的文章会提到如何学习使用组件，这里就不赘述了。
2.Plugins插件是building Figma设计理念的体现，这是我很喜欢的一点。
插件和相应的社区代表了一种开放和进步的心态。
相比Sketch，Figma的插件数量确实没跟上，但就开发者的热情和共建资源社区的参与度而言，Figma社区是工具社区的绝佳范例。
为什么我们在Figma中使用插件？想了解插件就需要思考这个问题。
从功能上看，Figma是典型的“优秀的偏科生”，核心优势明显，其他都一知半解。这就决定了如果要用Figma进行量产，就必须使用多种多样的元器件来满足自己的诉求。
比如Figma提供了代码查看和导出功能，但是这些是不能离线查看的。在断开连接的生产环境中，Figma无法通过链接查看各种注释。社区里有很多导出插件。比如中国有一个叫Heron handoff的插件，你可以把这些网页上的注释和剪贴导出为html文件来查看。
目前的插件类型很多，包括图标、插画、移动、颜色、文字、原型演示、图表、中文、图像优化、代码、3D、设计系统、动画、角度等等。通过插件，你可以自定义任何关于Figma的玩法。
尤其可贵的是，Figma的插件全部绑定了账号。安装您的帐户后，它可以在任何设备上同步。与一些本地设计工具不同，在更换设备后，一切都必须重新安装。这种体验很容易上瘾。可以根据自己的需求在线安装插件，在设计中随时调用。
Figma还会显示该文件使用的插件，方便随时调用。
对我来说，我的插件主要帮助我解决标注导出、自动数据填充、图像调整、字体调用等问题。因为有了这些插件，Figma可以专注于底层能力的开发，将这些扩展和定制需求交给开发者来构建生态系统。
再多说一句，在Figma社区，你可以上传和复制任何作品，也就是说你可以在这里学习到很多大佬甚至行业领先公司的设计部门的创作，同时分享你的优秀设计。
目前国外主流互联网公司，如Spotify、微软等，都在上面发布设计规范体系和设计思路，而国内互联网工厂，如腾讯等，也在上面即时更新自己的设计案例，形成了良好的社区氛围。
三。如何学习Figma学习使用Figma是一个长期的过程。Figma是典型的好用难改进的产品。使用起来非常简单，即使你从来没有接触过原型设计工具，简单使用工具栏中的图形工具就大概知道怎么用了。需要努力才能进步，但难点在于设计思维的形成，以及如何尽可能利用Figma的特性来提高设计效率，促进良好的设计思维。
1.入门准备阶段。如果你真的想学习，先准备好这些。
1)本地化
Figma的中国化——fig ma华人社区：https://www.figma.cool/cn
2)解决调用本地字体和中文字体的问题。
下载桌面客户端调用本地字体或：
下载Figma桌面应用程序、移动应用程序和字体安装程序：https://www.figma.com/downloads/
选择要下载和安装的字体安装程序：
符合中国习惯的中文插件——fig ma中文社区
https://www . fig ma . cool/plugins//符合中国人习惯的中文插件
3)安装常用插件。
Figma插件库-fig ma中文社区：https://www.figma.cool/plugins
可能出现的网络问题(如何提高figma的加载速度？)
选择Moonvy团队开发的dns测试工具：github.com；测试环境中所有Figma服务地址的真实速度(不是ping而是真实连接速度)，这样可以通过修改主机来指定最快的Figma服务地址；使用“SwitchHosts”来修改和管理本地主机。
2.入门阶段。入门阶段，关键是学会Figma的基本操作，勇敢地拿起鼠标创作任何作品。学会操作后，必须进行实战，或者复制或设计更复杂的页面。在这个过程中，不需要掌握组件的复杂操作，只需要能够根据工具说明制作一个页面即可。
建议从官方课程开始：https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA.
或者直接在Figma体验新手指南设计文件，按照操作就能做出一个页面。
Figma社区也有相应的教程(说真的，也可以找中文版)。
如果你更适合国内的学习环境，建议浏览这些教学网站：
3359 www . fig ma . cool/learning-paths https://fig macn . com/另外，推荐查看草帽老师的哔哩哔哩教学(声音很好听)(初学者略难，可以看他的基础教学视频):
https://space.bilibili.com/108104104/
以下是一些常见问题：
https://figmacn.com/post/faq
这里可以查看一下我搜集的一些常用的设计网站。
3.高级阶段。高级阶段主要是掌握Figma的一些快捷操作，熟悉组件和组件库的使用，编辑锚点(学完可以用它们制作icon)。
以下是几个网站供参考：
https://fig macn . com/post/fig ma-tips-tricks-super power-your-workflow
https://figmacn.com/post/all-figma-shortcuts
https://figmacn.com/post/iconography-guide
在相同大小的框架中绘制图标；注意图标的视觉平衡；把图标做成组件，方便快速替换；设置约束，保证拉伸时不变形；图形内部记忆布尔合并，这样替换时颜色可以自动保持，导出的svg代码更干净。可以先看看官博关于组件的解释，受益匪浅。
https://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw
https://mp.weixin.qq.com/s/iOp3aPbqbRr5vnrf0zQANw
学会了这些，就要多去社区逛逛，从社区的设计和资源中学习别人的创意和吸引眼球的设计。
https://figmacn.com/post/figma-community-guide
4.实战阶段最重要的无疑是建立完整的设计规范。Figma可以很好地支持设计规范的建立，并尝试使用组件库来建立自己产品的设计规范。
设置好设计规范后，整个设计工作的效率可以快速提升，同时可以从更高的高度来看待如何优化自己产品的用户体验。
1)确定设计原则和适应原则。
这里你需要为你的产品确定基本的视觉语言和整体调性，可以用一个感性的版本来表现。
适配原则取决于需要制定多少套设计规范，零部件的位置和尺寸限制规则，总体适配方案需要通过与开发的沟通协调确定，模型尺寸和单元格式确定。
2)制作基础款式。
色彩：用色相板确定主色、辅色、对比色。确定灰度字体的颜色值和透明度。字体和文本格式：确定字体大小、字重、文本对齐、间距等。图片系统：确定图片的大小和交互形式。和网格间距系统：确定测量基准、左右边距、垂直边距、水平边距和内容卡边距。层命名规范：与开发人员沟通，使用标准化的层命名格式。3)设计基本组件。
这一块请参考iOS人机交互指南和材质设计官网，看详细的设计方法。B端产品可参考阿里集团的蚂蚁设计和元素、果壳的柯设计。
本文最初由@发布丠丠丠丠丠丠丠丠丠丠丠丠丠丠丠丠丠未经许可，禁止复制2000000
主题地图来自Unsplash，基于CC0协议。