第一次知道 Figma 是在 2016 年，但真正用起来还是在去年（2018 年）。那时候苦于 Sketch 每次都更新导致一些插件不能用，且界面不够精致，一直想要找一个替代品。后来就尝试将自己的个人项目都导入到 Figma，开始在 Figma 中设计。  因为 Figma 是基于 Web 的，也就是在线的网页，我总觉得使用起来会受限于性能而不够流畅，这也是我前几年不敢去用的原因。**但直到我真正使用起来，才发现操作非常流畅，而且文件都在云端，免费版保留最近一个月的历史记录，再也不用“最终版1”、“最终版2”这种方式管理设计文件了。** 随着使用加深，我发现 Figma 的交互非常符合直觉，还有很多精心设计的小细节。借用一位朋友的话来说，“**这是一群设计师为设计师打造的设计工具，让大家专注于设计本身，而不是在设计时还要克服工具自身影响效率的因素**”。 下面我结合我的使用经验说一说我是怎样用 Figma 做设计的，以及这一年以来我的一些使用心得。 ## 我的设计流程 在此之前，先说一下我的背景。我平时会做很多业余项目，大多是网页和小程序，平时还会做一些公众号的封面和插图，基本都是在 Figma 中设计完成的。  ### 初稿构思 一般当我有了一个想法时，我会先在 Figma 中随意勾画出一个初稿。然后，我会在这个基础上不断修改，不断完善自己的想法。这其实相当于原型设计阶段，在这个过程中我不会在意样式是否美观，只会在意功能、结构是否合理。  因为我的想法会不断变化，说不准什么时候有一个新的想法会加进去，所以在这个阶段它的变化会很大。因为 Figma 可以自动保存最近 30 天的历史（付费版可以保存所有历史），所以你不用担心自己突然想要回到之前的某个版本而没有保存。尽管大胆地构思设计，你可以随时恢复到之前的版本。  ### 设计调整 接下来我就会开始调整样式，细化设计了。这个过程中我会用到两个比较重要的东西——组件和栅格。**组件可以用来设计重复性模块，提高效率，栅格则可以让我的设计元素的分布保持一致比例。** 所谓组件，类似于 Sketch 中的 Symbol，PowerPoint 中的母版，用于绘制可复用的元素。比如说在我的设计中有一个卡片列表，我会在旁边先做这个卡片，微调它的样式，等差不多满意时再复制出多个放到页面中。  最原始的组件叫做 master，而从它复制出去的组件叫做 instance，当你调整 master 的样式时所有的 instance 都会跟着同步。Figma 允许将 master 组件就近放在页面旁边，这样是极其方便的，因为后面难免需要调整细节，这时候你就可以边调整 master 细节边看它在整个页面中的效果，比如下图中我想看一下将 logo 放大的效果。  而反过来，当你调整 instance 的部分样式时 master 是不会跟着变化的。这样就保证了灵活性，因为总有一些 instance 需要和其它 instance 有一点区别。 说完组件，再说说栅格的妙用。在 Figma 中我们可以给页面（即 frame）和组件添加栅格，而栅格可以添加网格、行和列。在页面中添加网格可以帮助你对其元素，但我一般会添加列栅格，因为它可以帮助我把元素排列为等分的几列，并保持元素间隙。下图中红色长条就是列栅格，他将中间内容区域均分为 12 列，我就可以把里面的元素按照 1-8-3 的比例布局。  如果将栅格和组件联合起来，就可以设计出固定内边距的效果。我给卡片组件就设置了一个行栅格一个列栅格（蓝色背景），它们就给整个卡片四周划分出了一个固定的内边距。当我把里面的文字图层的 constraints 设定为左右固定并将它左右边缘对准栅格边缘时，当我放大缩小卡片时这个文字图层就会保持左右的内边距固定。  用一个动图表示一下，上面这个使用了栅格，下面的没使用，此时上面图片的四周就会紧贴着栅格边缘。  ### 添加交互 最后，为了体验真实的效果，我会给它添加一些交互效果。Figma 自带的交互动作包含了跳转、显示浮层、打开链接等，而触发方式包括点击、鼠标悬浮、延时等，还有滚动固定等效果，足以做出一些基本的交互效果了。  如果是移动端，我可以用手机直接打开 https://figma.com/mirror 来预览效果。这很方便，不需要额外下载 App，只需要在手机上登录一下就行了。 当然，整个设计过程中还会有很多细节会让你觉得十分方便。比如说使用 Fill 来统一代表背景色和文字颜色，方便同时调整文字和图层。还有 Smart Selection 可以让你快速选择一些元素，将它们对齐，并随意互换两个元素的位置。**他们会经常在官方博文中告诉你一些小技巧，我经常会看到那种“竟然还有这种操作”的小技巧。** ## Figma 适合什么样的人？ 总体用下来，我觉得 Figma 免费版非常适合独立开发者/设计师。因为我们的项目一般不复杂，项目间关联性也不大，就可以用一个文件来设计一个项目，也就不用担心跨文件共享组件要收费的问题。 与此同时，Figma 基于 Web 的特性也决定了它易于分享。如果有人想要看你的设计，你可以直接将预览链接发给对方。这也意味着你可以随时随地做设计，即使没有带电脑也没关系。 Figma 官方响应也很快，我有时遇到问题会直接去社区反馈，他们也会很快答复。他们还保持着一周一次版本迭代，所以如果你反馈的建议被采纳就可以很快看到更新。 目前 Figma 在国外的使用率逐渐攀升，在国内可能受制于网络太慢而比较小众。我还会继续使用它做我的个人项目，如果什么时候可以在团队间普及开来，我会去买它的付费版，这样就可以使用跨文件组件共享多人实时协作设计了。 **本文作者**：Juuun **首发于少数派**：https://sspai.com/post/55044 **公众号**：Codesigner 

这是来自阅文体验设计 YUX 的一篇 Figma 最佳实践文章。 作者主要讲述了阅文海外项目 Webnovel 迁移到 Figma 半年多时间里的一些经验，并对比了 Figma 和 Sketch 的一些优缺点。主要内容为： - Figma 介绍：以为是个青铜结果是个王者 - Figma 与 Sketch - 封闭与开放 - Figma 组件化实践 - 缺点以及 Figma 值得使用吗？ Figma 适不适合你自己，或者你的团队，相信看完这篇文章就有了答案。

这是 Figma 官方的一篇博客，讲述了他们最近是如何使用一种新的方式来改造文字的行高功能。原文中比较宝贵的是文字行高的演变和不同处理方式，相信看完后你会对行高有更清晰的认识。 翻译：[城中村群租房](https://www.darmau.com/) 原文地址：[Getting to the bottom of line height in Figma](https://www.figma.com/blog/line-height-changes)

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。 **请欣赏视频** <div class="content-video"><iframe src="//player.bilibili.com/player.html?aid=45534233&cid=80679005&page=5" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>

从 PS 过度到 Sketch 做 UI，那种生产力简直降维打击 PS；可现在，夸张些来说，Sketch 要被 Figma 降维打击了。 那么 Figma 比 Sketch 好在哪呢？设计师 lijxse 结合自己的体验，提出了 6 个点，点击原文按钮看看吧。

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。 **请欣赏视频** <div class="content-video"><iframe src="//player.bilibili.com/player.html?aid=45534233&cid=80677653&page=3" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。 <div class="content-video"><iframe src="//player.bilibili.com/player.html?aid=45534233&cid=80677653&page=3" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。 <div class="content-video"><iframe src="//player.bilibili.com/player.html?aid=45534233&cid=80677653&page=2" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>

Feather 是一个开源图标库，以线性图标为主，由 Cole Bemis 设计。  Github 地址：https://github.com/feathericons/feather 官网地址：https://feathericons.com

Figma Plus 是一个非官方的 Figma 插件解决方案，支持 Mac/Windows 客户端，也支持 Chrome。如果你使用的是客户端，直接前往 [Figma Plus](https://figmaplus.com/) 下载安装器，如果你使用的是浏览器，直接下载 [Chrome 插件](https://chrome.google.com/webstore/detail/dckoeionmkfajgfcbkbeagbalibpfaad)，就可以安装使用了。 安装后，在你的文件列表页的右上角，通知左侧会多一个插件图标，点击它就可以安装一些插件了。  你可以选择自己喜欢的插件安装，目前有暗夜模式、自动填充内容、Material Design 图标库等。  Figma Plus 还提供了丰富的接口，如果你会写代码的话，还可以自己提交新的插件，详见[插件开发文档](https://docs.figmaplus.com/#/developerGuide/gettingStarted)。 

Github 开源的图标库 [octicons](https://octicons.github.com/)，使用 Figma 设计，并同步更新到 Github 仓库。

Figma 创建了一个设计系统相关的网站 [DesignSystems](https://www.designsystems.com)，里面有很多相关的文章，其中样式规范这部分就包含了排版、布局、颜色等章节，同时他们还提供了这个快速启动模板，里面包含了很多颜色、布局、按钮、输入框等很多设计模式，你可以从这个模板快速开始。 

一组适合快速表达想法的线框图套件，你可以直接使用里面的组件来绘制产品原型。

这是 Figma 团队为了解决自己团队设计不统一而做的一个小的设计系统，适合小设计团队。 <div class="content-video"><iframe style="border: none;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FTX4BlQ5eFja8JDrE8dpR8qGv%2FFLEGO-%25E2%2580%2594-Figma-Web-LEGOs-2019%3Fnode-id%3D0%253A5" allowfullscreen></iframe></div>

这是 Figma 做的一个收集设计系统相关内容的网站，有相关的实践文章，有经典案例，还有历史上设计系统的重要时间节点。内容很丰富，对于需要了解并实践设计系统的设计师来说很实用。当然，如果你有要补充的设计系统相关内容，也可以在这个网站提交。

把你的设计嵌套在 iPhone 8 或 iPhoneX 中去展示。 这些外壳都是矢量的，你可以随意拉伸而不失真。

一个命令行工具，可以保持你的本地样式文件和 Figma 中的样式库保持同步。

一个帮助你将 Figma 文件转为谷歌幻灯片的应用，可以点[这里 📽️](https://twitter.com/alyssaxuu/status/1086934646959558656)查看效果。 生成幻灯片时会按照 Figma 中 frame 的顺序从上至下，也就是说最上面的一个 frame 会变成最终生成的幻灯片的最后一张，最下面的会变成第一张。