完成一次较为完全的设计规范后，才创造彷佛如今对Figma越来越得心应手，除了那些非常繁芜的复制粘贴逻辑外，基本上所有功能都能顺手利用了。欣喜之余，我开始反思利用Figma过程中碰着的那些坑，以及以往设计实践中不甚合理的地方。
于是我打算大略整理出较科学的学习路径和利用流程，一方面供想要学习Figma的同学参考，另一方面也当本钱身的参考册，规范自己的设计过程。
首先声明，这篇文章对从没有利用过原型工具的同学非常不友好，很遗憾这篇文章面向多少有点履历的同学。
如果你之前考试测验过Photoshop（图层）、Illustrator（矢量）、Sketch和Axure这种专业原型设计工具或者Powerpoint这类产品，以为多少作图做设计体验不爽，想要一款日常好用又不将其作为事情主力的工具，那它绝对值得你去学习体验，即便只是尝个鲜，但多少能感想熏染Figma带来的设计变革气息，对产品设计思维的提升是很直不雅观的。
以下将分成Figma的用场、学习和实操三个方面对Figma进行先容，紧张讲清学习利用过程中的难点和核心思路，末了供应一个大略的设计规范搭建思路以供参考。
Figma用来干什么；Figma核心能力拆解；学习路径和干系资料。一、一款All In One的原型设计工具说到All In One，很多人会想到在线文档Notion，这款凑集了Google Docs、Airtable、Workflowy、RoamReaseach特色的终极条记声称要把知识的全链路都凑集在一个在线文档中。
同为美国投资人青睐的Figma便是设计领域的Notion，只不过相较于一片红海的在线协同文档市场，Figma一经推出就成为原型设计工具中最刺目耀眼的那一个，短短几年就已经把Sketch、Adobe XD甩到脑后。
即便在市场接管度一贯不高的海内，Figma也成了专业设计师的独家偏好，也引来一片“抄袭者”的拥蹙（比如说即时设计）。究其缘故原由，是由于Figma真正做到了All In One，并且足够开放地拥抱生态拥抱设计者，不断优化自身的功能和利用体验，成为新时期设计工具的标准解法。
除此之外，Figma的免费策略使得独立开拓者上手的本钱近乎为0，对付规模不大的团队，Figma险些是现有的能找到唯一的免费协尴尬刁难象（连蓝湖都开始无止境的收费…）这种友好比起动辄大几千的Adobe产品可称良心。对付绝大多数的不雅观望者来说，Figma的逻辑是：通过良好的个人体验过渡到推举给团队利用。
All In One ，Figma大杀四方的密器。
Figma彷佛可以替代统统主流原型设计工具。对付产品经理和交互设计师来说，大略原型、高保真设计稿、交互解释、产品演示、方案讲解可以直接通过一个链接在浏览器上完成，非常有geek感。更有甚者，可以利用Figma设计简历和作品集（比如我）、演示文稿和脑暴白板，借助Figma的共享协作特性，用来做团队看板……
可以说，除了设计位图和专业级交互动画，Figma有对应的功能可以实现。难能名贵的是，除了“能实现”，Figma在部分场景下乃至可以替代专业工具的利用。
例如简历，借助Figma精良的排版能力和基于云真个特性，你可以将自己的设计大略优化便扔给用人方，对方也不需下载弘大的压缩包，即时查看也提升了好的作品被看到的可能性。对付团队知识库来说，合营语雀等工具，你可以将设计文件作为链接插入文档中，直接在文档中查看产品演示，高效且优雅。
对付产品从业职员来说，无论你是独立全栈还是团队合营完成一个设计任务，Figma总能随你的须要完成你的需求。这便是工具的高境界，不要让Figma教会你怎么用，而是你想怎么用，就可以利用它搭建你的生产链路。
支撑生产链路All In One的是Figma几个精良特性。
1）画框 Frame：无限制的容器，比画布、图层更好的设计观点
Figma里的画框既不像传统画布，也不是一种图层组合，某种程度上它是两者的组合。在一个Page中，可以自由绘制画框，也可以对一个或多个工具上建立画框。建立之后，画框就成为前端观点中的“容器”，具备自动布局、边界限定和调度约束的诸多特性。同时，画框也作为一个单独的元件，具备大小位置曲率、图层效果、添补描边、效果调度、导出等属性。
由于画框没有对高下级关系做限定，因此可以“画框套画框”。利用画框，可以把它当做画布，在上面制作页面；也可以将几个元件组上画框，用以在整体上调节。这个过程图层将自动编组，全体过程变得有序而优雅。对付成型的画框，可以将其转化为组件，通过此可以完成各种界面设计作业。
2）团队 team：基于web，基于云，拉通设计高下流
Figma是目前市情上主打团队协作的设计工具，这点和Sketch有很大不同，纵然Sketch、XD包括Axure这几年逐渐加上了协作的功能，但这统统放在Figma身上，才显得十分合理。可以说，只有Figma做到了完完备全的协作。
基于web和云，意味着所有的设计文稿将放在安全的做事器上，所有变动都即时同步，供应完善的编辑历史，因此无需保存为多个文件，所有内容都在一个链接中完成。
PM和UI可以把创作中和创作好的设计内容分享给开拓职员，大家只要打开链接就可以通过Figma打点评论、一起操作甚至发起语音评审会议（新版本），大家可以看到团队共同的设计系统和共享组件库，方便统一设计和开拓。
Figma供应了实时的图层代码给前段预览或复制，开拓可以直接针对须要的元件导出切图和代码，极大地缩短了交付的韶光。正由于此，Figma特殊适宜团队内共同参与，各个角色可以说参与越多，Figma的能力就更加凸显。
可以说，Figma把原来产品设计中涉及到的线框图、原型稿、交互解释以及标注稿全集成在一页上，这对开拓团队切实其实不能更友好了。
3）流畅 Fluent：一个词形容，便是流畅
对这种主打All In的产品来说，流畅始终是关键问题。在这点上Figma的表现可以说叹为不雅观止。很难想象在浏览器上可以体验到如此丝滑的设计产品。无论多大的设计文稿、多少个组件、各种操作，也不会造成卡顿，拖动、编辑、同时协作丝毫不会有强感知延迟。
比较起同类确当地产品各种卡去世、卡顿，Figma的优化实属清流。在担保网络畅通不被污染的情形下，Figma能做到全体网站高速的打开，加载速率乃至比很多本地设计软件要快。
这种流畅不仅是利用体验上的，更是生理层面上的。Figma的设计区域划分非常科学高效，界面干净整洁。全体界面可以分为四块：编辑切换、操作区、图层区、属性调度，且最大的空间都给了操作区，因此利用Figma的时候常会以为为所欲为，同时又总能找到须要的功能。
因此，你可以完备无压力地开展创作，这便是题目所说的无需思考。由于Figma骨子里的流畅感险些不能带给你物理或生理上的打断感，你也不用担心它会不会溘然宕机，只要网络OK，统统都是OK的。
二、Figma核心能力：组件、插件
如果说以上提到的都只是小打小闹，不能构筑Figma的护城河，那么我认为Figma最分歧凡响的最难模拟的两个法宝是组件、插件。前者展现Figma看重效率和工具性的思考，后者表示Figma一种难得的开放进步心态。
1. 组件 Component
说来很奇怪，每家设计工具都具备组件功能，Figma的组件厉害在哪呢？
Figma的组件是集大成之作，同时也完美契合其生态。
从功能上看，组件紧张供应三种能力：可复用、可继续、可共享，背后表示了组件的三类关系：组件调用关系、组件父子关系、组件共享关系。
1）组件调用关系
组件调用是组件的形成与复用。
在Figma中，点击元素后，可以通过点击正上方工具栏的“创建组件”将所选元素转化成组件。转化为组件后，它的逻辑和一样平常的Frame并无差异，但是他独占一套复用逻辑。左侧图层区有个资产栏，这里会网络文件中的组件以及已发布的其他文件的组件，在设计中须要用到之前建立的组件时，只须要将组件拉出来到操作区，它会根据组件的落地位置自动编组。其余，如果你想要直接复制已有的组件的话也是可以的。
对付组件，可以选择把复制后的组件进行分离实例，这样组件就转化成了普通的frame/group/元素，方便你对其改动；也可以将多个组件合并为变体，这样组件就能实现点击一个组件，选择切换到其他的形态，这样非常方便做tab和快速切换不同状态。
在任意一个子组件中，点击属性中的定位到父组件便可以定位到元组件中，这样方便调度整体设计问题，同时这个功能是跨文件的，也便是说，对一些有公共组件库的团队来说，在从云拉取组件进行设计时，可以对某一组件的设计原型进行追溯。
这里的调用担保了Figma组件设计中的灵巧性，将组件的特性和元件特色分开，灵巧利用到各种细节设计事情中。
2）组件父子关系
组件父子关系实在说的是组件的变革逻辑。
在Sketch中有类似组件观点的“symbol”，复制一个symbol，复制出的symbol可以根据主symbol的变革而变革。
Figma继而加强了这个特性，Figma中父组件和子组件在图层列表中显示不同的icon和图层高下级关系，相对Sketch和Axure的类似功能显得更为直不雅观，同时它也代表无需专门进入某一区域或者专门设计新文件来存放组件，你立时设计完的一个模块就可以转化成组件快速用到其他地方，而无需专门在其余的页面新建来回调度。
通过变动父组件的任何属性，就可以同步所有子组件中，而子组件的改动则不会影响到其他子组件，如果你想单独让一个组件不被影响，就可以将其分离实例，这样就可以很好地根据设计实际情形做比拟方案。
父子组件关系还可以任意调度，你只须要将子组件在图层列表中拖动至上一级，那么这个子组件就会变成新的父组件，这样的话可以最大程度的便利设计事情。有时候在设计相似的模块时，这个功能将发挥奇效。
3）组件共享关系
Figma充分利用了自身特性，授予组件自由的共享能力。这表示在同一文件可以任意利用其他的组件和颜色样式（颜色样式也被视为一种组件），其他文件可以调用本文件的组件，同一团队利用团队下诸多项目的组件或者团队公共组件库。
我们可以设想两种情形，对付新项目，我们可以调用老项目的根本组件（例如导航、button、颜色样式、卡片样式等等），从而快速搭建新项目框架，这非常适宜担保团队内同等的设计风格和产品规范。搭建好之后，可以对调用的组件任意变动，而不会影响到公共组件库，实属非常方便了。
对付项目的改版，我们可以先建立起组件库，然后通过修正组件库的办法将项目内所有组件进行调节，这样全体设计稿就调度过来了。这在迭代事情非常实用，只须要改组件配置，无需新建页面（每每新建项目会涉及到重新排版，事情量很大）。
近期Figma宣告要支持分支版本，对付须要做多套方案的PM和设计师来说，借用一个组件的不同改动就能快速搭建两套方案进行比拟，切实其实Unbelievable！
总而言之，组件是Figma中非常强大的功能，学习好组件是上手Figma必不可少的步骤，后文将提到怎么去学习组件利用，这里就不赘述了。
2. 插件 Plugins
插件是构建Figma设计理念的表示，是我很喜好的一点。
插件和对应的社区代表一种开放和进步的心态。
Figma相对付Sketch来说，插件数量确实还没跟上，但从开拓者积极性和共建资源社区的参与度来说，Figma Community堪称工具社区的一大典范。
我们为什么要在Figma中利用插件？想要理解插件就须要思考这个问题。
从Figma的功能上看，它属于范例的“精良的偏科生”，核心上风很明显，其他的样样都会一点。这决定了如果你要利用Figma用来重度生产的话，就必须利用广泛的组件知足自己某方面的诉求。
举个例子，Figma供应了代码查看和导出功能，但是这些并不能离线查看，如果在一个断网的生产环境下，Figma就不能通过链接查看各种标注了。社区中有很多导出插件，比如海内有一款叫Heron handoff的插件，就可以把这些网页上的标注和切图导出为html文件查看。
目前来看，插件类型非常广泛，涵盖了图标、插画、移动端、颜色、笔墨、样机演示、图表、中文、图像优化、代码、3D、设计系统、动画、角度等。通过插件，你可以定制出任何关于Figma的玩法。
尤为名贵的是，Figma的插件都是和账号绑定的，你账号安装了之后，就能在任何设备同步，不像部分本地设计工具，换了设备之后统统都要重装。这种体验是很上瘾的，你可以根据自己的需求在线安装插件，并且在设计中随时调用。
Figma还会显示在此文件上利用的插件，方便随时调用。
对我来说，我的插件紧张帮助我办理标注导出、数据自动填写、图像调度、字体调用等问题。正由于有了这些插件，Figma就可以专注于底层能力的开拓，将这些拓展定制化的需求交给开拓者共建生态。
多说一句，在Figma Community中，可以上传和复制任何作品，这意味着你可以在这里学习到很多大佬乃至行业龙头公司的设计部门的创作，同时也可以分享自己的精良设计。
目前国外主流互联网公司如Spotify、Microsoft都在上面发布设计规范系统和设计思路，海内的互联网大小厂如腾讯、即刻都将自己的设计案例放在上面更新，形成一种良好的社区氛围。
三、如何学习Figma
学习利用Figma是一个长期的过程，Figma是范例的上手随意马虎，精进很困难的产品。它上手极为大略，哪怕你从未打仗过原型设计工具，你在短暂利用工具栏中的图形工具也能大概知道怎么用。它精进须要努力，难的是设计思维的形成，是怎么尽可能利用Figma的特性提升设计效率和促进好的设计思考。
1. 入门准备阶段
如果你当真要学习，先准备这些。
1）汉化
Figma 汉化 – Figma 中文社区：https://www.figma.cool/cn
2）办理调用本地字体和中笔墨体
下载桌面客户端以调用本地字体或者：
Download Figma Desktop Apps, Mobile Apps, and Font Installers：https://www.figma.com/downloads/
选择font installer下载安装：
符合国人习气的中文插件 – Figma 中文社区
https://www.figma.cool/plugins/%E7%AC%A6%E5%90%88%E5%9B%BD%E4%BA%BA%E4%B9%A0%E6%83%AF%E7%9A%84%E4%B8%AD%E6%96%87%E6%8F%92%E4%BB%B6
3）安装常用的插件
Figma 插件库 – Figma 中文社区：https://www.figma.cool/plugins
可能碰着的网络问题（如何提升figma的加载速率？）
选择Moonvy团队开拓的dns测试工具：github.com；测试环境下所有Figma做事地址的真实速率（不是ping而是真实连接速率），这样你就可以通过修正Hosts的办法指定一个最快的Figma做事地址；利用 「SwitchHosts」修正和管理本地 Hosts。2. 入门阶段入门阶段，关键要学习Figma的基本操作，并且年夜胆拿起鼠标创作任何一个作品，学会操作后一定要进行实战，或临摹或设计一个较繁芜的页面。这个过程不须要节制组件的繁芜操作，只须要能够按照工具指引制作出一个页面即可。
这里建议先从官方教程开始：https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA
或者直接体验Figma中的新手指引设计文件，按着操作来做一个页面你就会了。
在Figma Community中也有对应的教程（负责一点你还能搜到汉化版本）。
如果更适应海内学习环境，建议浏览这几个传授教化网站：
https://www.figma.cool/learning-pathshttps://figmacn.com/此外推举查看草帽老师的B站传授教化（声音很好听）（对新手略有难度，可以看看他的基本传授教化视频）：
https://space.bilibili.com/108104104/
这里有常见的问题讲解：
https://figmacn.com/post/faq
这里可以查看我网络的一些常用的设计网站。
3. 精进阶段
精进阶段紧张节制一些Figma的快捷操作、熟习组件和组件库的利用、锚点编辑（学会了你就可以用来做icon了）。
这里供应几个网站以供参考：
https://figmacn.com/post/figma-tips-tricks-superpower-your-workflow
https://figmacn.com/post/all-figma-shortcuts
https://figmacn.com/post/iconography-guide
把图标画在相同大小的Frame中；把稳调度icon的视觉平衡；图标做成组件，方便快速更换；设置好constraints，担保拉伸不变形；内部图形记得布尔合并，以便更换时能够自动保持颜色，导出的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人机交互指南和Material Design官网查看详细详细的设计方法，B端产品可以参考阿里集团的Ant design、Element以及贝壳的Ke design。
本文由 @昊昊不是耗儿 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自Unsplash，基于CC0协议
