前言

最近在团队内部推行UI设计工具Figma，以尝试用新的工作流方式来替代旧方式，简化冗长的沟通和工具切换成本，以提升设计协作的效率。

关于Figma是一款什么样的工具，我在这里就不做赘述，相信各位同行早已接触过它。本文重点讲解怎样向自己的团队推广Figma，而Figma对于不同职能的工作场景都有哪些用处，该如何去使用它？为那些准备在团队内推广Figma的设计师们提供一份「参考指南」。

本人在当前团队的UI设计工作中一般会经历：“设计方案 — 设计评审 — 设计交付”三个环节，而在这三个环节中分别会用到“Sketch — 在线文档 — 蓝湖”三种工具。在这个过程中，通常会有多个角色参与进来。

下面我就通过讲解不同职能的角色在整个设计研发环节都该如何使用Figma，帮助那些还没有使用这款工具的设计师们如何在自己的团队内应用起来。

目录

注：目录主题与实际工作过程的顺序并无关联。

— — — — — — — — — — — — — — —

开始前

1. 注册账号

请先注册并创建一个Figma账号，可在 Figma官网 注册。

有两种注册方式：

a. 通过Google账号登陆并创建账号；

b. 填写一个邮箱号进行注册。

注册后的用户昵称尽量同公司内称谓保持一致，方便团队内部的协作和账号管理。

2. 查看团队项目

因为Figma的付费策略缘故，如果团队内有多名设计师需要协作和共享文件时，建议升级为“Professional”或“Organization”，因为免费版目前最多只能创建3个Figma团队文件，而“Drafts”文件虽然不限数量，但不能支持设计师间的协作，其它成员仅仅只有查看权限。

假设我们目前在Figma里已经创建好了团队，那么其他成员想要查看团队项目，首先需要加入团队。

加入团队的方式有两种：

1. 通过团队管理员分享的邀请链接加入；

2. 把自己的邮箱账号发送给管理员，待其邀请账号加入。

加入团队以后，便可看到当前团队内所创建的项目文件了。

3. Figma管理设计资源的三级结构

团队>项目>文件

Figma最大的优势是实现了团队间的在线实时协作，所以我们需要知道Figma是如何对设计稿进行结构化管理的。

当设计师想要把自己的设计稿拿到团队中进行共享和协作时，首先需要创建一个团队，团队创建好后，可在团队下创建项目，然后在项目下创建文件，每一个文件当中的设计图还可以通过分页进行更精细的管理。

「

众所周知！Figma是一款从原型方案评审，到设计师敏捷协作，再到开发对接的一站式UI设计工具（以前不知道的，那现在让你知道！）

所有前戏都完成后，接下来我根据大家在团队中不同的角色和使用目的，来分开介绍Figma的使用方法。

」

— — — — — — — — — — — — — — —

技术开发请看这里

对于前端 & 客户端的同学来说，UI协作中一般都只关注两个重点，标注和切图。

1. 关于标注

打开一个项目文件，你可以在右边的属性面板顶部看到“Inspect和Export”两个切换按钮，在切换到Inspect时就是查看UI标注，切换到Export时就是导出切图；

在查看UI标注时，代码和颜色两处属性，需要程序员同学根据自己的需求手动切换。

代码类型目前支持iOS、Android、CSS三种，大家可在图中Code模块的左侧区域切换代码类型，在右侧切换查看源码还是查看元素属性。

色彩的算法类型目前支持Hex / RGB / CSS / HSL / HSB 五种，也可根据自己的需求去切换

2. 关于切图

Figma的原生切图功能在进行设计交付的时候支持的并不好，这和目前国内蓝湖等工具比起来，开发同学在使用上会变得稍显繁琐一点。尤其对于Android开发而言不太友好。

• 如何精准的选择切图？

因为图层组被分解成了一个个层级结构，开发在选择切图时，很容易选中某一“细碎”的元素，而不能很轻松的点选到某一图层组。（下方的➡️icon，在点选时选到了最底层小箭头的图层，而整个切图是包含了箭头、横线、编组框三层元素）

当没有精准的选中整个图层组时，就需要我们结合左侧的图层面板，选中该切图的最上层，这时候再看画板中的元素，就能很好的识别到整个切图了。

这里还有一个小技巧：非编辑权限的用户，在选择图层时按住Command键，就可以按照从大到小的层级依次的选择图层；如果有编辑权限，则按住Command键时，首先选到的是最小层级的图层。

值得注意：编辑与非编辑权限者在使用Command键点选图层的规则正好相反。

• 如何导出需要的切图？

  
  

当选好了切图以后，我们再看右侧的Export面板的操作，这时你会发现你刚刚选中的图层出现在了右侧的Export列表里。

这时候你需要做得就是点击Export列表里的“+”号按钮，每点击一下新增一个切图，而Figma的默认添加是依次添加png格式下的1倍、2倍、3倍等（连点三下）图片，可以看到Figma的默认设置对iOS开发还是相对友好的，包括命名后缀也已经预设好。

点击前面的“数字x”你也可以切换其它的图片倍率去导出，而“数字x”代表的切图倍率与Android图片资源包的关系如下所示：

可这和Android使用的图片资源包的规范并不匹配，不能方便Android开发直接调用，这个时候就需要我们设计师的同学借助一些插件工具打通这一步协作环节，尽可能的方便开发同学直接调用图片资源。

3. 设计组件化

Figma的亮点不仅是解决了设计协作之间的组件化问题，并且在开发对接上也带来了组件化效益，让设计组件与开发同步变得简单直接。

开发同学可以通过图层列表来辨别组件和普通元素的区别，只有紫色的图层并且名称前被打上了“菱形”icon的都是组件。设计师可以通过在Figma上建立规范的设计组件并与开发及时同步，避免在日常工作中设计师定义的组件与开发封装的组件成为两套孤立的体系。

注：通过母版复制的组件均为子组件，开发同学只需知道UI中哪些属于组件即可。

— — — — — — — — — — — — — — —

设计评审请看这里

在设计师完成UI后，一般都会进行一些内部评审，而Figma的评论功能目前可以较好的支持这部分需求，它可以方便团队成员讨论和提出建议，设计师可以实时的看到大家的反馈并回复交流。

1. 查看设计稿

• 登陆自己的Figma账号并加入相关的团队后，就可以在左侧的团队列表中看到自己的团队了，点击相应团队，中间的列表会出现该团队目前所有已创建项目（如果项目创建者将团队内的某一项目权限设置为仅限邀请，则该项目对于未被邀请的成员不会显示）。

• 点击某一项目进入，可以看到该项目下目前创建的所有文件，成员可以通过创建者的文件命名来选择自己想要看的设计稿。

2. 对设计稿发表评论

• 点开设计稿，然后点击左上角的“评论”，切换至评论功能，这时你的鼠标箭头也会变成一个评论icon，移动鼠标，在你想要发表意见的地方点击便可插入一条新的评论，点击Post完成评论。

• 发表评论后，评论者的信息也会出现在这条评论中，方便成员间交流，而右侧的面板中也会按照时间顺序展示该设计稿中的所有评论内容

• 当你成功发表一条评论后，项目内的成员在账号右上角的通知icon会实时出现小红点提示，点开后可看到成员的近期活动

• 当项目成员打开文件后，评论功能处也会出现小红点提示有新的评论，点击评论icon，切换至评论模式，当前页面则会将所有的评论都标记出来，点开对应评论后，我们还可以对该条评论进行回复。

3. 评论功能的更多操作

• 通过评论右上角的两个icon，我们可以对已发表的评论进行一些其它操作，点击左侧的“...”则会出现相应的操作名称，这里不多介绍，重点介绍一下右侧的“解决”功能。

• 当一条评论中的意见已经被解决后，则可以点击“解决”icon，点击后该评论则会作为一条“已归档的信息”被隐藏起来，我们在页面中不会再看到，只有点击评论面板的“展示已解决评论”则会出现在列表消息里。

作为设计评审角色，在使用Figma时，重点只需用好评论功能，以及知道设计稿在Figma中是通过什么结构来管理的，方便自己快速找到对应的设计稿即可。

— — — — — — — — — — — — — — —

画低保真原型请看这里

 

如果你在团队中担任产品经理或交互设计师的角色，需要画线框图，并且将自己的方案能够随时分享给其他成员，那么用Figma也是一个不错的选择。下面主要通过设计和分享 两个场景来介绍怎么在Figma中制作原型并且内部交流。

1. 使用Figma设计原型

• 因为Figma的收费策略的缘故，如果你只是使用Figma制作低保真原型，并且分享给其他成员查看的话，则可以直接在“Drafts”下创建文件（主要是经济成本考虑，普通账号在“Drafts”里可以创建无限的文件，如果在团队项目下想要创建的话就需要开通编辑者权限，而团队费用是按编辑者人数来收费）

• 新建好一个文件后，我们就可以使用左上角的工具栏进行基本的原型设计了。工具栏中提供的“移动”、“框架”、“图形”、“钢笔”、“文字”、“拖动”等工具基本上可以满足绝大部分画原型的需求，而Figma的用户界面和Sketch、墨刀等工具都十分相似，如果以前用过其它的原型工具，那么在上手Figma时应该不会有什么学习成本。

• 当你绘制了一个形状或是插入了一个文本，可以对应的在右侧属性面板进一步修改和添加一系列属性效果。

• 区分“Frame”和“Group”

Frame是一个界面中最大的层级单位，Group和其它设计元素都可以包含在一个Frame当中，我们可以把Frame理解为一个界面大小，而且Frame之间也可以互相嵌套，尺寸小的Frame可以被包含进更大的Frame之中。在绘制界面时，Figma中的Frame和Sketch中的画板是同样的功能，但区别在于Sketch的画板不可以互相嵌套。

Group仅仅只是给图层编组。它不能像Frame作为一个界面单位存在，只可以用来给组件或icon等更低层级的图层编组。

注：如果你把一个Group作为界面画板来使用，而又移入了一个Frame到Group中去，因为Frame比Group的层级更高，这时Frame的名称会显示出来， 你也不能将它们作为同一个界面导出。

2. 如何提升效率 —— 插件 & 模版 & 组件

当然如果只使用Figma用户界面中的这些基础工具，还不足以方便我们绘制原型，效率也会很低，这时候你就需要了解Figma的“Community”生态和组件化功能了。

• 点击Figma的“Community”，在这里你可以找到全世界开发者和设计师为Figma社区提供的插件和模版等好东西。比如你可以搜索“iOS UI”，任意打开一个文件，将你想要用到的一些设计元素和UI组件复制到自己的原型中去，你甚至可以直接在别人提供的原型文件上修改，将它改为自己想要的方案。

• 除此之外Figma还提供了各式各样的插件，它的插件丰富和好用程度目前看来应该是已经超越了Sketch的插件生态。这里主要介绍一下使用icon和填充图片的插件吧，这是我们日常绘制原型图时经常会用到的功能。

• 首先是搜索并挑选自己想要用的插件，找到后点击“Install”先安装好它们。这里我推荐一个网站，方便大家挑选合适的插件。Figma中文社区—插件库

• 插件安装好以后，我们可以通过文件左上角的logo菜单找到自己已经安装过的插件；也可以通过鼠标右键唤起快捷菜单找到；如果你下载了Figma的客户端，还可以通过系统菜单栏找到。

• 除了以上方式，你还可以通过快捷键“command+/”，调出Figma的内置搜索，输入插件名称即可模糊搜索相关内容。

• 打开一个自己要用的插件后，根据插件面板的功能展示，选择使用即可。一般图标类插件，先搜索自己要用的icon，找到后通过点击下载或拖拽的方式即可应用到自己的原型中。还有图片填充和文字填充的插件，先选择一个需要填充的图层，然后在插件上点击相应要填充的素材内容，插件会自动帮你填充到相应的图层中去。这些都是在绘制原型时经常要用到的功能。

这里在介绍一个画原型时使用icon的小技巧。平时我们也会通过其它的网站去下载合适的icon，在下载icon的时候如果有一个“复制SVG代码”的按钮，我们可以直接通过复制粘贴的方式在Figma中使用了，而不用再下载一次，同理，Sketch和Figma都可以互相复制彼此的SVG代码。

• 组件功能

对于一个长期迭代的项目而言，学会使用Figma的组件也会大有益处。对于绘制低保真原型而言，一般不需要产品经理或交互设计师来制作组件，你们可以直接在UI设计师的设计稿中去复制组件来使用，从其他人的文件里复制来的组件也会保留其组件属性。

大家可以在文件的图层面板中点击“Assets”（快捷键 option+2），你文件当中的组件都会展示在这里，不管这个组件是你自己创建的还是从其他文件中复制粘贴而来的，直接拖拽就可以使用这些本地化组件了。

除此之外，如果你想自己创建组件的话，可以把自己画好的图层编组后，点击下图指向的“菱形icon”，即会创建一个新的组件，新组建同时也会出现在Assets列表中。

3. 分享原型

• 想要把自己绘制好的原型分享给其它人，可以点击界面上的分享按钮，这时会弹出一个弹窗，你可以通过输入被分享人的邮箱账号，或是复制你的文件链接将它分享出去。

• 如果是通过邮箱账号分享，被分享者在打开自己的“通知提醒”后，选择接受分享就可以在自己近期的项目列表中看到别人分享来的文件了。如果是通过链接分享的，直接打开分享链接即可查看文件。

— — — — — — — — — — — — — — —

UI设计师请看这里

UI设计师你好呀！

你好惨呀！

你不仅需要了解以上其它角色都要知道的内容外，还需要知道一些Figma的独家技能，这些内容是之前我们使用Sketch或其它设计工具时不同的地方。因为本文重点只介绍Figma在团队里不同角色间的分工使用方式，便于在团队内进行推广。鉴于篇幅缘故（以及作者也懒），就不作为一篇针对UI设计师的Figma教程来写了，因为相关的教程网络上已经可以找到很多。下面我会分享一些我看到的学习资料，以及学习Figma时需要重点掌握的一些内容。

1. 学习资源分享

• Figma 中文社区

• 学习Figma的必备网站之一，其中的插件库和一些学习导航可以节省我们大量找资源的时间。
  

https://www.figma.cool/

• 《关于Figma，看这一篇就够》

• 木七大佬的一篇总结，虽然是一年前的文章，但这篇文章的讲解已是足够全面和系统，推荐阅读。

https://www.zcool.com.cn/article/ZMTE4NzU2NA==.html

• Figma 新手教学系列视频

• Figma视频教程，想更全面系统学习的可看下面的视频。

https://space.bilibili.com/389903587/channel/seriesdetail?sid=299830&ctype=0

• Figma 高效技巧 & 花式操作 - 合集
  

• Figma提效技巧汇总，草帽老师的这一套教程短小精炼，视频中介绍了很多容易被忽略但又很有用的小技巧。

https://www.bilibili.com/video/BV1RJ411D714

2. 学习Figma时需要重点掌握的内容

• 账号管理体系

Figma是一款在线UI协作工具，有别于其它本地化软件，关于账号管理和团队项目管理等需要有足够多的了解，如果只知道用它来设计界面还是不够的。

• 约束、栅格、网格、Auto Layout

这几个功能在Sketch当中也有涉及，但只有Figma将这些功能做到了更易用，尤其是Auto Layout功能，符合程序化思维，在UI设计中合理的使用，可以提高效率使自己的设计更加规范。

• UI组件化

基本可以复用Sketch的经验，以前知道如何用Sketch创建组建，那用起Figma时也不会陌生。但Figma的组件调用以及团队组件库更便于设计师间开展协作。尤其是组件搭配Auto Layout，可以让你的UI设计更加规范化。

• 设计交付

对于我们用惯了蓝湖等第三方工具而言，Figma在设计交付这块就显得有些不够完善，除了在平时的协作中使用它原生的功能进行交付外，我们还可以搭配使用 Heron Handoff 这个插件。

— — — — — — — — — — — — — — —

完。

写累了，就到这～

谢谢阅读 ：)