最近在团队内部推行UI设计工具Figma，以尝试用新的工作流方式来替代旧方式，简化冗长的沟通和工具切换成本，以提升设计协作的效率。
关于Figma是一款什么样的工具，我在这里就不做赘述，相信各位同行早已接触过它。本文重点讲解怎样向自己的团队推广Figma，而Figma对于不同职能的工作场景都有哪些用处，该如何去使用它？为那些准备在团队内推广Figma的设计师们提供一份「参考指南」。
本人在当前团队的UI设计工作中一般会经历：“设计方案—设计评审—设计交付”三个环节，而在这三个环节中分别会用到“Sketch—在线文档—蓝湖”三种工具。在这个过程中，通常会有多个角色参与进来。
下面我就通过讲解不同职能的角色在整个设计研发环节都该如何使用Figma，帮助那些还没有使用这款工具的设计师们如何在自己的团队内应用起来。
注：目录主题与实际工作过程的顺序并无关联。
———————————————
有两种注册方式：
a.通过Google账号登陆并创建账号；
注册后的用户昵称尽量同公司内称谓保持一致，方便团队内部的协作和账号管理。
因为Figma的付费策略缘故，如果团队内有多名设计师需要协作和共享文件时，建议升级为“Professional”或“Organization”，因为免费版目前最多只能创建3个Figma团队文件，而“Drafts”文件虽然不限数量，但不能支持设计师间的协作，其它成员仅仅只有查看权限。
假设我们目前在Figma里已经创建好了团队，那么其他成员想要查看团队项目，首先需要加入团队。
加入团队的方式有两种：
加入团队以后，便可看到当前团队内所创建的项目文件了。
团队>项目>文件
Figma最大的优势是实现了团队间的在线实时协作，所以我们需要知道Figma是如何对设计稿进行结构化管理的。
当设计师想要把自己的设计稿拿到团队中进行共享和协作时，首先需要创建一个团队，团队创建好后，可在团队下创建项目，然后在项目下创建文件，每一个文件当中的设计图还可以通过分页进行更精细的管理。
「
众所周知！Figma是一款从原型方案评审，到设计师敏捷协作，再到开发对接的一站式UI设计工具（以前不知道的，那现在让你知道！）
所有前戏都完成后，接下来我根据大家在团队中不同的角色和使用目的，来分开介绍Figma的使用方法。
」
打开一个项目文件，你可以在右边的属性面板顶部看到“Inspect和Export”两个切换按钮，在切换到Inspect时就是查看UI标注，切换到Export时就是导出切图；
在查看UI标注时，代码和颜色两处属性，需要程序员同学根据自己的需求手动切换。
代码类型目前支持iOS、Android、CSS三种，大家可在图中Code模块的左侧区域切换代码类型，在右侧切换查看源码还是查看元素属性。
色彩的算法类型目前支持Hex/RGB/CSS/HSL/HSB五种，也可根据自己的需求去切换
Figma的原生切图功能在进行设计交付的时候支持的并不好，这和目前国内蓝湖等工具比起来，开发同学在使用上会变得稍显繁琐一点。尤其对于Android开发而言不太友好。
因为图层组被分解成了一个个层级结构，开发在选择切图时，很容易选中某一“细碎”的元素，而不能很轻松的点选到某一图层组。（下方的icon，在点选时选到了最底层小箭头的图层，而整个切图是包含了箭头、横线、编组框三层元素）
当没有精准的选中整个图层组时，就需要我们结合左侧的图层面板，选中该切图的最上层，这时候再看画板中的元素，就能很好的识别到整个切图了。
这里还有一个小技巧：非编辑权限的用户，在选择图层时按住Command键，就可以按照从大到小的层级依次的选择图层；如果有编辑权限，则按住Command键时，首先选到的是最小层级的图层。
值得注意：编辑与非编辑权限者在使用Command键点选图层的规则正好相反。
当选好了切图以后，我们再看右侧的Export面板的操作，这时你会发现你刚刚选中的图层出现在了右侧的Export列表里。
这时候你需要做得就是点击Export列表里的“+”号按钮，每点击一下新增一个切图，而Figma的默认添加是依次添加png格式下的1倍、2倍、3倍等（连点三下）图片，可以看到Figma的默认设置对iOS开发还是相对友好的，包括命名后缀也已经预设好。
点击前面的“数字x”你也可以切换其它的图片倍率去导出，而“数字x”代表的切图倍率与Android图片资源包的关系如下所示：
可这和Android使用的图片资源包的规范并不匹配，不能方便Android开发直接调用，这个时候就需要我们设计师的同学借助一些插件工具打通这一步协作环节，尽可能的方便开发同学直接调用图片资源。
Figma的亮点不仅是解决了设计协作之间的组件化问题，并且在开发对接上也带来了组件化效益，让设计组件与开发同步变得简单直接。
开发同学可以通过图层列表来辨别组件和普通元素的区别，只有紫色的图层并且名称前被打上了“菱形”icon的都是组件。设计师可以通过在Figma上建立规范的设计组件并与开发及时同步，避免在日常工作中设计师定义的组件与开发封装的组件成为两套孤立的体系。
注：通过母版复制的组件均为子组件，开发同学只需知道UI中哪些属于组件即可。
Frame是一个界面中最大的层级单位，Group和其它设计元素都可以包含在一个Frame当中，我们可以把Frame理解为一个界面大小，而且Frame之间也可以互相嵌套，尺寸小的Frame可以被包含进更大的Frame之中。在绘制界面时，Figma中的Frame和Sketch中的画板是同样的功能，但区别在于Sketch的画板不可以互相嵌套。
Group仅仅只是给图层编组。它不能像Frame作为一个界面单位存在，只可以用来给组件或icon等更低层级的图层编组。
注：如果你把一个Group作为界面画板来使用，而又移入了一个Frame到Group中去，因为Frame比Group的层级更高，这时Frame的名称会显示出来，你也不能将它们作为同一个界面导出。
当然如果只使用Figma用户界面中的这些基础工具，还不足以方便我们绘制原型，效率也会很低，这时候你就需要了解Figma的“Community”生态和组件化功能了。
这里在介绍一个画原型时使用icon的小技巧。平时我们也会通过其它的网站去下载合适的icon，在下载icon的时候如果有一个“复制SVG代码”的按钮，我们可以直接通过复制粘贴的方式在Figma中使用了，而不用再下载一次，同理，Sketch和Figma都可以互相复制彼此的SVG代码。
对于一个长期迭代的项目而言，学会使用Figma的组件也会大有益处。对于绘制低保真原型而言，一般不需要产品经理或交互设计师来制作组件，你们可以直接在UI设计师的设计稿中去复制组件来使用，从其他人的文件里复制来的组件也会保留其组件属性。
大家可以在文件的图层面板中点击“Assets”（快捷键option+2），你文件当中的组件都会展示在这里，不管这个组件是你自己创建的还是从其他文件中复制粘贴而来的，直接拖拽就可以使用这些本地化组件了。
除此之外，如果你想自己创建组件的话，可以把自己画好的图层编组后，点击下图指向的“菱形icon”，即会创建一个新的组件，新组建同时也会出现在Assets列表中。
UI设计师你好呀！
你好惨呀！
Figma是一款在线UI协作工具，有别于其它本地化软件，关于账号管理和团队项目管理等需要有足够多的了解，如果只知道用它来设计界面还是不够的。
这几个功能在Sketch当中也有涉及，但只有Figma将这些功能做到了更易用，尤其是AutoLayout功能，符合程序化思维，在UI设计中合理的使用，可以提高效率使自己的设计更加规范。
基本可以复用Sketch的经验，以前知道如何用Sketch创建组建，那用起Figma时也不会陌生。但Figma的组件调用以及团队组件库更便于设计师间开展协作。尤其是组件搭配AutoLayout，可以让你的UI设计更加规范化。