首先，你知道什么是 Figma 吧？

@ Noiku

1

” 设计工具的 Web 化才是未来呀 ☝️   

Web 是 Figma 最重要的特点。随着云计算 ☁️和 5G 网络的铺开，设计工具的 Web 化是必然的趋势。在未来，Web 将不再是“性能差”的代名词，反而会成为一个优势。

说设计工具之前，我们可以先来看看互联网从业者们非常熟悉的文档的发展历史。从最早的手写 ✍️，到人类发明了打字机 ?，到 Microsoft 推出 Word 文档，我们可以将文档保存在本地，并且借由互联网发送给对方。接着 Google 在 2006 年发布了划时代的 Google Docs，文档正式进入在线协作时代。

可以说到现在，协作文档的发展已经十分成熟了。但基于 Web 的设计工具则是刚刚起步的。从手绘到 Photoshop 再到 Sketch，设计师们似乎一直停留在本地文件的时代，跨越到在线协作时代目前看来只是时间问题。而在近几年诞生的这一批新型工具里，Figma 应该是目前综合体验最好的选择了。

2

” Figma 比 Sketch 更快? 

Figma 的快从你滑动画布的那一刻就开始体现了。如果打个比方的话，Sketch 就像是一辆汽车 ?，它在开往目的地的途中可能会遇到很多的故障 (引擎熄火、轮胎爆了…)，于是你不得不花时间停下来处理它，等待它重新恢复到正常状态。相信每个人用 Sketch 的人都遇见过下面令人心碎的画面?，运气好的逃过一劫，运气不好设计稿重画。

但 Figma 不一样。Figma 就像是火箭 ?一样，它在刚开始的时候会需要一段时间的准备工作 (网页加载需要耐心)，但只要它成功点火了，它就会以最高的速度飞向天空，再也没有什么能够停下它的脚步。就我个人使用下来，没有遇到过一次像 Sketch 那样中途卡顿的情况。

除了最初的网页加载和部分图片加载需要点时间外，Figma 在处理速度上真的可以说是碾压 Sketch。

3

” Figma 比 Sketch 更方便?

长久以来，设计师只有 Sketch 是不够的。我们还需要像 Zeplin 这样的设计交付工具，帮助我们把本地文件变成一个个开发可以看得懂的网址链接；还需要像 Abstract 这样的版本管理工具，帮助我们更好的管理乱七八糟的设计文件；甚至还需要像 Dropbox、Google Drive 这样的云盘来存储、同步。有人算过一个设计团队每年要在这些配套工具上花多少钱吗？

但有了 Figma，这一切变得简单了许多。一个网址，一切在握。更没有中间商赚差价。

与设计同学的协作

不久前在做项目的时候，涉及到多位设计师一起合作，那个时候我们的做法是大家各自开一个 Sketch 文件画自己的部分。但问题也随之而来：

– 我们互相之前不清楚对方的进展与改动；

– 涉及到同样的组件样式时，我们会频繁跟其他设计师传输源文件。

但如果使用 Figma，这一切会变得简单许多。我们只需要在同一个设计文件里建立三个 Page，大家约定好在不同的 Page 里画图就好了。只要切换 Page，就能看见其他设计师的进展和改动；如果要复用对方的页面样式，直接复制粘贴到自己的 Page 即可。这样就大大减少了设计师内部协作时的沟通成本。

与产品同学的协作

在工作中，我们常常利用企业聊天工具里的截图功能，发送设计截图给产品同学。如果和产品同学就某个点没能达成一致的话，可能需要反复的发送各种不同尝试的设计图。

使用 Figma，这一切就变成了：鼠标轻轻一点，发送一个网址链接给对方，他就可以在网页上实时看见你的改动。如果他对于某个设计稿有疑问，可以利用 Figma 自带的评论功能进行评论，设计师们也能立刻即时给予回复。

你甚至可以把 Figma 设计稿嵌在产品需求文档里，这样就不用一页页导出 PNG 再粘贴上去了?。

与开发同学的协作

我们之所以使用 Zeplin 这样的标注工具，是因为我们需要把设计图转化成开发能够看得懂的代码。我认为这是一款设计工具需要具备的功能，但很显然 Sketch 做不到这一点，于是我们不得不依赖于第三方。

但 Figma 做到了。它从一开始就是一款对开发更友好的设计工具，它使用的 Frame 概念和前端工程师用的 HTML 是类似的。它能帮助设计师更好的以工程师容易理解的方式来进行设计。

同时 Figma 自带标注功能，你只需要把设计稿的网址发给开发同学，他就能在右侧面板看见对应选中项的代码?。

自己画图也方便

比起 Sketch，Figma 有很多的贴心小功能让我觉得它更适合用来做界面设计，画图方面，Sketch 并做不到这么自由。

智能排版

这是我在做列表和 Feed 的时候经常会用到的一个功能，Figma 会自动帮你将杂乱的布局变成整齐的排列，同时你可以控制调整各个控件的间距，移动他们的位置。

和 Google Fonts 联动

当你需要使用一些不一样的字体时，可以进入 Google Fonts 进行挑选，选好字体后复制字体的名字，再打开 Figma，在字体名称那里粘贴并按回车，稍等片刻即可，避免了到处找字体资源下载的烦恼。

当然 Figma 还有很多这样的贴心功能，就不在这一一列举了，大家可以在 Figma 的官方教程里看见这些小技巧。

@ Yhmnin

” 如何用 Figma 构建自身的组件化思维？ 

什么是组件化思维？

组件化思维可以理解为当代分工精细化的产物，无论是传统的工厂制造业还是手机、电脑等模块化的设计产物，将原本的复杂结构拆分成可重复制造的单个模块，最终组装成你的产品。组件化思维能够有效的保证设计品质和规范标准量化，提升整体的工作和生产效率。

对于互联网设计师来说，我们在实际工作中构建本公司的设计规范并推动落实就变得极为重要。这个需要从设计、产品、研发各个环节都需要保证思维的统一，所以对于每个模块的沟通和交付方式都需要内部的多次交流并敲定符合本公司的方式，这对于设计成本和研发成本都有极大的参考价值。

无论是 Apple、Material、IBM Design System 还是国内的 Ant Design，设计组件化的构建保证了各平台的体验和交互的统一性。

什么是组件？

组件就是页面中能复用的部分，比如图标、按钮、模态窗、表单等，即功能性设计模式。

什么是样式？

样式是页面中能够对于组件发生样式属性的修改或者调整的色彩、字体、投影、网格，即从属于感知性设计模式。

那接下来我们逐步告诉大家如何用 Figma 创建一个能够满足自身业务需求的组件库，组件模块化设计体系需要对齐自身的设计目标，满足基本的复用性和未来的拓展性。

1

如何创建组件 

Figma 组件需要明确二个属性

Master Component，即主组件；主组件是你自行创建的源组件，对主组件进行的任何操作都会影响到全局复用该组件的场景。Instance，即实例；实例的修改可以独立于源组件进行单独调整。实例会被链接到主组件，因此对主组件所做的任何更改都将应用于实例。

?Figma Tips: 按住 option + command 拖动组件到相对应的组件，直接替换。

Constraints 约束

无论 Figma 还是 Sketch，都会有一个元素约束面板，这个面板其实来源于 iOS 开发 Xcode 的面板，对于组件的宽高、上、右、下、左边距值都可以定义，甚至定义水平或垂直居中。

约束保证了一个组件在各平台的通用性，能够满足不同屏幕宽高比的需要。对于组件构建良好的约束会在适配各机型中达到事半功倍的效果。

2

如何创建样式 

对于样式的定义在 Figma 中变得轻松且愉悦，Figma 在初始状态下右侧提供了所有样式的看板界面。

关于创建色彩

Figma 创建完色彩之后，色彩样式不仅能够使用在图形上，还可以直接使用在字体上，而 Sketch 目前的色彩样式只能作用于图形。

我自身的最新项目中将所有字体运用色彩样式，当我需要调整时，只需要将对色彩值的属性调整完，所有页面当中字体复用了该色彩样式的全被刷新了一遍，这个时候你就明白了当初为什么给每个页面去添加对应色彩样式的“笨拙”操作了。

关于创建字体

创建字体首先需要明确下对应的字体梯度和字重，对于色彩的运用可以在 Figma 里拆分开来使用，比如链接色需要蓝色就可以单独添加。

3

Figma 组件 ? Sketch 组件 

Figma 提供的组件图形界面更偏向设计师，组件即看即用，同时也提供了列表显示组件名的切换方式。

对比 Sketch，在没有 Sketch Runner 插件运用组件的帮助下，对于组件化构建良好的 ? 系统，设计师运用组件链路过于漫长。

4

团队合作 

对于很多设计师来说免费试用是 Figma 的绝对优势，这里要说明一下，Figma 仅在不同项目中不使用组件化的前提下是免费的！色彩、字体以及投影等样式个人版也是可以上传同步的。

但是涉及设计团队使用组件的话，那就要收费了，Figma 对于有隐私要求的客户提供了 SSO 的定制化验证方式。

?具体的收费机制和对应权限可以参见

?: https://www.figma.com/pricing/

5

篇尾彩蛋

都看到这里了，教你做个封面吧

闲来无事，玩象棋？

通过该游戏 ?，可以了解到 Figma 多人协作和 Smart Selection 的全新体验，欢迎自行品尝。

? 惊喜在这里 ?

Step1 关注公众号

Step2 进入公众号发消息告诉我们，你想看什么方向的内容？

（原谅我们，没有评论功能?）

截止 9月11号 12:00

我们会抽出第6位、第36位和第66位发消息的小伙伴，

送出小红书 REDesign 限定毛绒公仔?

本篇文章来源于微信公众号: 小红书DER