想取代 Sketch 的 Figma 好不好用？我花了一年时间给你答案！

第一次知道 Figma 是在 2016 年，但真正起来还是在年。那时苦于 Sketch 每次更都会导致一些插件，且界面够精致，一直想要为它一个替代。直到后来尝试将自己的个人项目都导入到 Figma，这才开始在 Figma 中尝试设计。

△ 我的设计件

因 Figma 基于 Web 的，也就线的网页，我总觉得使用起会受限于性能，不够流畅，这也我几不敢去用的原因。但直到我真使用起，发操作非常流畅，且文件都云端，免费版保留近一月的历史记录，再也不用「终版1」「终版2」这种方式理设文件了。

而随着使用加深，我发现 Figma 交互也常符合觉，有很多精心设计小细节。借用位朋友话来说，「这是群设计师为设计师打造设计工具，让大家专注于设计本身，而不是在设计时要克服工具自身影响效率素」。

下面结的使用经验说一说是怎用 Figma 做计的，以及这一年以来的一些使用心得。

我的设计流程

在此之前，先说一下的背景。会做多业余项目，大多是网页和程序，还会做一些公众号的封面和插图，基本都是在 Figma 中计完成的。

△ 理的一些公众号封面等

1. 初稿构思

一当有了一个想法，会先在 Figma 中随勾画出一个初稿。然后，会在这个基础上不断修改，不断完善的想法。这其实相当于型计阶段，在这个过程中不会在式是否美观，只会在功能、结构是否理。

△ 某一个产品的初稿

因为我的想法不断变化，说不准什么时有一个新的想法加进去，所以在个阶段它的变化很大。因为 Figma 以自动存最近 30 天的历史（付费版以存所有历史），所以你不用担心自己突想要回到之前的某个版而没有存。

尽管大胆地构思设计，你可随时恢复到之前的版本。

△ 恢复至某一版本

2. 设计调整

接来我就会开始调整样式，细设计了。这个过程中我会到两个较重要的东西 —— 组件和栅格。组件可来设计重复性模，效率，栅格则可我的设计元素的分布保持一致的例。

所谓组件，类似于 Sketch 中的 Symbol、PowerPoint 中的母版，用于绘制可复用的元素。比如我的设中一卡片列表，我会旁先这卡片，微调它的样式，差不多满意时再复制出多到页面中。

△ 组件

最原始组件叫做 master，而从它复制出去组件叫做 instance，你调 master 样时所有 instance 都会跟着步。Figma 允许将 master 组件近放在页旁边，这样是极其便，为后难免需要调细节，这时候你可以边调 master 细节边看它在个页效，比如下图我想看下将 logo 放大效。

△ master 组件步到 instance

而反过来，当你调整 instance 的部式，master 是不会跟着变化的。这就保证了灵活性，因为总有一些 instance 需要和其它 instance 有一点别。

说完组件，说说栅的妙用。在 Figma 中我们以给页面（即frame）和组件添加栅，而栅以添加网、行和列。在页面中添加网以帮助你对齐元素，但我一般添加列栅，因为它以帮助我把元素排列为等分的几列，并持元素间隙。下图中红长条就是列栅，它将中间内容区域均分为 12 列，我就以把里面的元素按照 1-8-3 的比例局。

△ 栅系统

如果将栅格和组件联合起来，就可设计固定边距的效果。我给卡片组件就设置了一个行栅格一个列栅格（蓝色背景），它们就给整个卡片周划分了一个固定的边距。当我把里面的字图层的 constraints 设定为左右固定并将它左右边缘对准栅格边缘时，当我放大缩小卡片时这个字图层就会保持左右的边距固定。

△ 组件+栅格

用一动图表示一下，面这使用了栅格，下面的使用，此时面图片的四周就会紧贴栅格。

△ 组件+栅格动态示意

3. 添加交互

后，了体验真实的效果，我会给它添加一些交互效果。Figma 自的交互动作包含了跳转、显示浮层、打链接，触发方式包括点击、鼠标悬浮、延时，还滚动固效果，足以出一些基本的交互效果了。

△ 交互原型

如是移动端，我可以用手接打开 https://figma.com/mirror 来预览效。这很便，不需要额下载 App，需要在手上登录下了。

当然，整个计过程中还会有多细节会让你觉得十方便。比如说使用 Fill 来统一代表背景色和文字颜色，方便同调整文字和图层。还有 Smart Selection 可以让你快速选择一些素，将它对齐，并随互换个素的位置。会经常在官方博文中告诉你一些巧，也经常会叹「竟然还有这种操作」。

Figma 适合什么样的人？

总体用下来，觉得 Figma 免费版非常适独立开发者/计。因为的项目一不复杂，项目间关性也不大，就可以用一个文件来计一个项目，也就不用担心跨文件共享组件要收费的问题。

与此同时，Figma 基 Web 的特也决定它易分享。果有人想要看你的设计，你以直接将预览链接给对方。也意味着你以随时随地做设计，即使没有带电脑也没关系。Figma 官方响应也很快，我有时遇到问题直接去区反馈，他们也很快答复。他们还持着一周一次版迭代，所以果你反馈的建议被采纳就以很快看到更新。

目前 Figma 在国外的使率逐渐攀升，在国可受制于络太慢而较小众。我还会继续使它做我的个人项目，如果么时候可在团队间普及开来，我会它的付版，这样就可使跨件组件共享多人实时协作设计了。

欢迎关注作者的微信公众：「codesigner」