Figma让设计变得更轻松

哈喽，大家好。我是幺零三，这期给大家分享一下我在工作中如何推进Figma以及使用Figma的一些方法，希望对各位有所帮助。

幺零三2021年的第  3  篇原创

本文目录：

• Figma有哪些亮点？

• 我们为何决定迁移Figma？

• 我们在迁移过程遇到哪些问题？

• 我在实际项目中遇到什么问题？

• 通过Figma来解决这些问题

•  Figma资源分享

 01 

Figma有哪些亮点?

跨平台、云端存储、多人实时协作、强大的组件库搭建能力、丰富的第三方插件、优质的开源文件等等等.... 网络上有很多关于Figma亮点方面的介绍，总结下来就两个字：真香。

 02 

我们为何决定迁移Figma？

21年初我加入了有赞体验设计团队，由于团队内部之间使用的是Sketch办公，所以作为新人面临的第一个问题就是向不同设计师拿到与项目相关的所有源文件，同时在设计师协作上不可避免的遇到Sketch文件更新后交接低效、设计稿修改后需要重新上传蓝湖、文档卡顿等等问题，这对于一个在上家公司使用过Figma的人来说是一件极其难受的事。为了改变现状，我开始尝试跟产品、设计师介绍Figma的很多优势（其实就群里@了leader，再和大家聊了下），大家都对提效这件事达成一致。再加上我们属于新团队，历史文件体量还不大，因此决定迁移到Figma，整个迁移过程还是比较顺利。

 03

我们在迁移过程主要遇到哪些问题？

整个过程虽然比较顺利，但在切到一个新软件的时候，多多少少会有些问题，针对不同职位关注的重点不同，如下：

产品经理：

设计同事：

开发小哥：

3.1企业收费

官方目前定价分为入门版（免费）、专业版（一个人头$12每月，折合人民币：￥76.44）、组织（一个人头$45每月，折合人民币：￥286.65），对于中小团队来说专业版就已经够用了。

如果是学生或教育者还可以尝试申请教育版账号（基本等同于专业版），免费使用期限为2年。

3.2文件保密

由于有其他大公司的案例，因此很大程度上消除了我们团队的担忧。其实在后面我又问产品这个问题，产品的回答是我们目前项目迭代快，不需要规划很久，所以没什么问题，但以后可能是一个风险。

在工作使用中需要提醒的是，目前Figma在线文件分享有两种形式：知道链接和受邀请，前者非常方便，只需发送链接到产品或开发即可查看（不需要注册账号），当然这种方式风险很大、后者则必须对方注册账号再邀请（相对保密性更强），在团队项目中，建议尽量使用第二种方式。

3.3学习成本

在团队内推广时设计同事多少会有些担忧，提出很多问题。比如Figma会不会很难呢？我的快捷键/插件还能用吗？某某功能怎么用呢？等等等....其实Figma对比Sketch在操作上没有特别大的差异，可能有一些功能软件本身不像Sketch那么齐全，但基本通过插件都能很好的解决，作为推动者，在过程中多些耐心帮助同事解决问题就好。

3.4文件迁移

Sketch文件可直接上传到Figma，但由于软件不同，文件上传后可能会出现：元素错位、内容被裁切（实际是Sketch的分组被Figma改为画框，且勾选了裁切）、特殊效果丢失等...需要设计师再逐个进行调整，但基本是小问题，当然这点对大型团队或大型项目来说确实会存在一定的迁移成本。

3.5网络配置

由于软件服务器在海外，因此国内打开会有些缓慢，可能出现图片内容半天加载不出，会直接影响到日常办公体验（设计同事差点就因为这个原因劝退），好在大多数公司会有自己内部的科学上网方式，建议可以找公司相关技术同学帮忙解决此问题。

3.6字体调用

如果你使用的是网页版，就必须通过点击右侧头像，进到设置页面下载字体调用插件，网络不好的情况下，下载安装后可能还是会出现字体无法调用的问题。

这里建议使用客户端，无需下载字体调用插件。

3.7学渣流泪

由于Figam是海外产品，目前官方没有大陆版以后应该也不会有。所以对于英语不太好的同学（比如俺）可能会没有安全·感，针对这个目前有两种解决方案：

• 使用Chrome浏览器自带的网页翻译，缺点是翻译可能不准确（也有Chrome浏览器翻译插件）。

• 下载客户端，再通过下载安装汉化文件的方式来实现软件中文，缺点是软件更新后汉化文件需要重新安装。

这里建议使用后者的方式，因为Figma有些提效插件需要在客户端才能使用，具体插件后面介绍。

客户端汉化文件&浏览器翻译插件下载地址：https://www.figma.cool/

3.8切图导出

据目前我的了解，与开发交接切图的方式有三种：

• 设计师自己切好给到开发

• 教开发自己切图，因为哪怕设计在Figma中做好切片，但开发在检查模式下还是无法很直观的直接选中切片，所以就需要让开发了解设计稿图层关系，选中正确的组导出切图。

• 借助第三方工具（比如摹客），方式类似Sketch上传蓝湖。但原本的当设计稿更新后需要再次上传的痛点依然存在。

目前我们是前两种方式组合使用，当然我们也在看有没有更好的方式解决这个问题。

我调研过开发小哥使用Figma的感受，回答是好，好在缩放画布比蓝湖方便....也反馈了一些小问题，比如查看透明度参数不是很方便、间距有时不准、希望可以优化代码直接使用（❀v大师？？）

 04  

我在实际项目遇到什么问题？

工作中我经常接触网页模板设计，并需要适配到不同大小的端。由于一套完整的页面在做不同尺寸适配的时候，往往需要出好几套完整的设计稿，并标注好适配规则，可以说工作量巨大。在设计资源不足的情况下，设计师往往只标注好核心页面适配规则，其余很大一部分适配工作是交由开发完成的，这也就导致我们适配这块一直存在很多问题，如下：栅格不对、间距不对、排版问题等。

在去年我写过一篇关于Sketch搭建组件库的文章，里面有提到如何将组件做成弹性布局，借助这种方式我们只需要拉动组件到不同尺寸，内部元素可自动按规则变化，这样大大缩短了我们适配的成本。

但Sketch这种方式对于复杂组件来说，前期搭建非常复杂，图层也很冗余，其他协作的设计师理解起来比较难懂，因此也就没继续尝试这个方法。直到后来接触Figma，才很好的解决这些问题。

 05

通过Figma来解决这些问题

这里介绍Figma几个核心功能，了解这些可以搭建基础的组件库，以及做好后台响应式设计：

• 交互式组件（Bata）

5.1样式

在Figma中能够做成可复用的样式有：网格 、颜色、效果、文本

以网格为例，网格由总宽、列、水槽、边距构成，当我们建立好一个网格后，通过点击右侧加号即可创建一个复用网格。 颜色、效果、文本同理。

网格设置分为固定网格布局（当总宽发生变化时，列宽、水槽不变、边距变大或变小）、拉伸网格布局也叫流动网布局，（当总宽发生变化时，水槽、边距不变，列宽变大或变小）、还有混合网格布局（当总宽发生变化时，某些内容固定，某些内容拉伸，常用于B端后台布局），这些都代表不同的响应布局方式，可根据情况选择。

5.2组件

创建组件：在Figma中可以通过选中元素，点击顶部创建组件图标来创建母版（Mac快捷键：command+option+k）。在选中多个元素时，可通过点击顶部创建组件中的下拉图标，来一次性创建多个组件。

组件管理：Figma在普通组件命名上规则与Sketch一致，通过“名称” + “/ ”的方式来控制组件归属。

组件命名：我们可以一次性选择多个组件，通过快捷键command+R调用批量命名弹窗，实现组件批量命名。（也支持批量修改名称）

用上面组件管理中案例举例：

1、我们可以全选组件，进行第一次批量命名。命名为：【卡片/】。

2、选中第一排两个组件，进行第二次批量命名。命名为：【动态文字】+【正常】，第二排卡片同理。需要注意的是，在第二次命名的时候想要保留原本第一次的命名，需要插入动态文字。

3、最后一次命名则需要逐个命名

5.3变体（超级组件）

简单讲，变体是通过归类将多个组件（a、b、1、2...）进行组合形成的超级组件（A)，设计师最终通过调用A，即可达到同时切换Aa、Ab、A1、A2...的能力。

举例：假定现有线性和面性两种风格的图标，其中线性图标中有线1、线2、线3。面性图标中有面1、面2、面3。这个时候我们可以将它们统一创建组建并归类为图标，再创建为变体。最后我们通过调用该变体图标即可随意切换上面6个图标。

用普通组件和变体进行对比，以如下普通组件为例，我们全选6个图标，并点击顶部创建组件中下拉图标，一次性创建多个组件并名好名（面1、面2、面3、线1、线2、线3）。使用这种方式创建出来的组件，只能切换同一父级下的其他组件。（面性中调用的面1只能切换为面2、面3，无法切换到线性）

为了解决上面这个问题，我们可以将上面已经创建好的组件全选，在右侧属性面板中点击转为变体。

变体创建成功后，右侧变体属性面板说明如下：

为了便于理解，修改了组名：

到这一步，我们就可以从变体内（紫色虚线框内）任意复制出一个变体，通过该即可完成六个图标的切换。

Tips：将紫色虚线框内组件全部移出，即可解除变体。

变体命名：变体组件命名有点绕，为了便于理解需要先了解如下几点：

• 变体可以在左侧图层面板下修改命名，也可以在右侧属性面板下修改命名。

• 变体中父级与子级划分层级的方式由“/”改为“，”

• 通过命名可以修改变体属性面板中切换组件的方式（下拉切换/开关切换）

1、变体可以在左侧图层面板下修改命名，也可以在右侧属性面板修改下命名（双击修改）。

2、变体中父级与子级划分层级的方式由“/”改为“，”

3、通过命名可以修改变体属性面板中切换组件方式

变体组件在右侧属性面板中有两种切换方式：下拉切换、开关切换。下拉切换适合该组名（属性类型）下属性名数量大于2，开关切换只能是该组名（属性类型）下属性名数量等于2。

在前提条件满足的情况下（组名下属性名数量等于2），通过【yes、no】或【on、off】、【true、false】的配对命名方式，即可将下拉切换变成开关切换。（yes、no的命名顺序取决于组名）

Tips：下拉切换与开关切换在图层面板上命名有所差异，进行批量命名时需注意格式。

其他案例：

此案例文件地址：

https://www.figma.com/file/JRnqCFqJjK4ujwb8vlNJ7Y/%E5%B9%BA%E9%9B%B6%E4%B8%89%E7%9A%84%E6%A1%88%E4%BE%8B%E6%96%87%E4%BB%B6?node-id=0%3A1

官方变体案例文件：

https://www.figma.com/community/file/903303571898472063/Figma-Variants-Playground/remixes

5.4自动布局（Auto Layout）

自动布局是指通过预先制定规则，使子级元素在新增或减少时父级尺寸跟随规则自动变化，或父级大小发生变化时，子级元素跟随规则自动变化。

利用自动布局可以极大的缩短重复工作（间距计算、元素对齐调整），还可以将我们的UI设计稿框架化，帮助我们站在开发视角画界面，有利于提升界面还原度。

这一块内容直接看下图会更清晰：

以如下设计稿为例，借助自动布局将UI框架化，帮助理解开发写盒子的逻辑，有利于提升设计稿还原度。

官方自动布局案例文件：

https://www.figma.com/community/file/784448220678228461/Figma-Auto-Layout-playground/remixes

5.4 交互式组件（Bata）

交互式组件指可以在组件集中的变体之间创建原型交互。当我们使用创建好的交互组件时，在预览界面即可完成该组件的不同状态切换，并且该组件的交互可复用。（类似Principle里面的组件功能）

交互式组件目前还在内测中，这里先不展开细讲，感兴趣的同学可以通过下面理解申请内测，以及查看官方教程文件。

申请内测地址：

https://docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform

案例文件：

https://www.figma.com/community/file/947832144641124322

 06

资源分享

文中提到：

客户端汉化补丁：

https://www.figma.cool/

官方变体案例文件：

https://www.figma.com/community/file/903303571898472063/Figma-Variants-Playground/remixes

官方自动布局案例文件：

https://www.figma.com/community/file/784448220678228461/Figma-Auto-Layout-playground/remixes

变体+自动布局源文件：

https://www.figma.com/file/JRnqCFqJjK4ujwb8vlNJ7Y/%E5%B9%BA%E9%9B%B6%E4%B8%89%E7%9A%84%E6%A1%88%E4%BE%8B%E6%96%87%E4%BB%B6?node-id=0%3A1

交互式组件申请内测地址：

https://docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform

我的案例文件：

https://www.figma.com/community/file/947832144641124322

官方资源：

帮助中心：

https://help.figma.com/hc/en-us

博客：

https://www.figma.com/blog/

重要功能案例文件：

https://www.figma.com/best-practices/

社区：

https://www.figma.com/best-practices/

Ui套件：

https://www.figma.com/templates/

设计系统：

https://www.designsystems.com/

其他资源：

Figma中文资源：

https://figmacn.com/

实用插件：

插件管理器：

https://moonvy.com/figmaEX/

等比缩放：

https://www.figma.com/community/plugin/836326694968364056/Scale

中文字体选择器：

https://www.figma.com/community/plugin/851126455550003999/Chinese-Font-Picker

英文字体选择器：

https://www.figma.com/community/plugin/739922281164562258/Better-Font-Picker

轴侧生成：

https://www.figma.com/community/plugin/741472919529947576/SkewDat

图标1：

https://www.figma.com/community/plugin/744047966581015514/Feather-Icons

图标2：

https://www.figma.com/community/plugin/861001888228800074/Iconly-v2.3

噪点生成：

https://www.figma.com/community/plugin/752558325552095625/Noise

柔和渐变：

https://www.figma.com/community/plugin/781591244449826498/Easing-Gradient

封面生成：

https://www.figma.com/community/plugin/861544263629766272/Quick-Thumbnail

数据填充1：

https://www.figma.com/community/plugin/864052338727969891/Chinese-User-Data-Generator

数据填充2：

https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync

流程图：

https://www.figma.com/community/plugin/733902567457592893/Autoflow

路径文字：

https://www.figma.com/community/plugin/751576264585242935/To-Path

终极插件库：

https://plugin.figma.cool/

 07 

总结

距离上次写Sketch搭建组件库的方法已经过去一年，当时就已经有同学说到Figma，只是当时国内推广还没这么普及，而如今Figma也真正来到。

新软件层出不穷，也越来越强大与便利，不断提升着我们的工作效率，同时留给了我们更多设计思考的时间，作为设计师也应当与时俱进，保持好奇心。

最后，希望这期内容对还没有接触过或正在使用Figma的你有所帮助，我是幺零三，咱们下期见。