>本文首发于：https://mp.weixin.qq.com/s/mRtHMo6P8cLzKtnDjpd4Hw

[Figma](https://figma.com) 是我最喜欢的设计工具，它把设计从本地带到云端，让设计协作成为可能，更重要的是可以[通过 API 获取云端的设计数据](https://www.figma.com/developers/api)，让设计的工程化更加容易。而 GitHub 设计团队很早就开始使用 Figma 了，他们的设计师发布了一套[如何从 Figma 自动生成图标的流程](https://github.blog/2018-04-12-driving-changes-from-designs/)。2018 年 GitHub 发布了 Actions，可以通过编写脚本自动化一些流程，借助于社区的力量，我们可以轻松地组合各种已有 Action 来实现自己的自动化工作流。

![GitHub Icon Workflow](https://lc-kjcS77HU.cn-n1.lcfile.com/f4325c0ba19a3a40bf60.jpg)

GitHub 的图标自动化给了我很大启发，于是在 Figma 去年开放自己的[插件平台](https://www.figma.com/blog/plugins-are-coming-to-figma/)时，我就开始研究[如何通过 Figma 插件来交付图标](https://mp.weixin.qq.com/s/7_hb1rB2KF-1D7d2GNjl9g)，直接从 Figma 文件生成图标的 React 组件代码。我觉得这应该是东半球最先进的图标交付方式了，因为**从始至终都不需要设计师和开发离开自己熟悉的工作环境，也不需要他们讲一句话**，极大地提升了交付效率。

![Figma Icon Automation](https://lc-kjcS77HU.cn-n1.lcfile.com/1501d05a2a76d7df9343.jpg)

不过最开始的时候这个插件只支持直接从设计文件生成 React 组件代码，后来很多朋友问我什么时候支持 Vue，毕竟 Vue 还是比 React 用得多。最近我经过一番折腾，终于搞定了，现在它支持生成 Vue 组件代码啦！而且，我还给它加了通知功能。

下面我想给你讲一下整个交付流程是如何工作的，以及它是如何使用的。

## 它是如何工作的？
我在上文提到的[文章](https://mp.weixin.qq.com/s/7_hb1rB2KF-1D7d2GNjl9g)中说到过，经过这些年的演进，图标从雪碧图到 iconfont，再到 SVG 图片，以及内联 SVG 代码的 React/Vue 组件，组件无疑是目前最方便的模式了。但是和其他形式的图标一样，我们也需要手动处理设计师给我们的 SVG 文件，把它变成 React/Vue 组件代码才可以使用。

但是因为 SVG 本身就是代码，所以这中间有很多流程都可以通过自动化的方式去解决。总的来说，我所实现的这个流程分为以下几步：

- 首先，设计师在 Figma 中设计图标，并将每一个图标设置为设计组件；
- 每次更新后打开[插件](https://www.figma.com/community/plugin/739395588962138807/figma-icon-automation)点击发布，这个插件会向一个 GitHub 仓库提交一个版本更新的 PR；
- 在 GitHub 中合并 PR 后会触发 GitHub Actions 自动脚本，这个自动脚本会通过 Figma API 拉取 SVG 代码，经过处理后生成 React/Vue 组件代码；
- 将生成的组件代码并发布到 NPM，发布成功后通过企业微信或者飞书的 Webhook 在群里通知开发更新；
- 最后，开发收到通知后在终端通过 yarn 或 npm 命令更新，就可以使用最新的图标了。

![图标自动化流程](https://lc-kjcS77HU.cn-n1.lcfile.com/48d34fe4a919b28a0a3e.jpg)

在下文中，我将详细介绍 Vue 版本的使用方式。

## 它是如何使用的？
### 在 Figma 中设计
最开始，设计师在最喜欢的 Figma 中精心打磨每一个图标，并将它们都做成组件。这里需要注意的是，我们要给图标合理命名（目前不支持包含斜线，否则会被识别为文件夹层级）。

![在 Figma 中设计图标](https://lc-kjcS77HU.cn-n1.lcfile.com/6eab35e401c21cb7bc0b.jpg)

### 安装并配置插件
我们先到 [Figma Icon Automation 插件主页](https://www.figma.com/community/plugin/739395588962138807/figma-icon-automation)中安装一下这个插件，然后需要在插件中填写一些基本配置。前面提到，这个流程需要涉及到 GitHub，所以我们要现在插件中填写 GitHub 的仓库地址和 token。

![插件配置](https://lc-kjcS77HU.cn-n1.lcfile.com/ac1c96133366073045c9.jpg)

仓库地址我分别写了一个 [React 版本](https://github.com/leadream/juuust-icon)和一个 [Vue 版本](https://github.com/leadream/juuust-vue-icon)的，大家可以根据自己当前项目技术栈去选择 fork 一个仓库，把自己的仓库地址填在这里。GitHub token 可以在 [GitHub 开发者设置](https://github.com/settings/tokens/new)中生成，**记得勾选下面的 repo 全部权限**。

![GitHub token 生成](https://lc-kjcS77HU.cn-n1.lcfile.com/bfb15f1f672d326739ed.jpg)

### 配置代码仓库
前文中提到，自动化的流程都在代码仓库中通过 GitHub Actions 执行，这个过程是通过代码仓库中的 `.github/workflows` 里面的脚本定义的。

![github workflows](https://lc-kjcS77HU.cn-n1.lcfile.com/6001a35c0db99ad8cb42.jpg)

从上面的脚本中可以看到，这个流程需要使用到的一些密钥，比如 Figma 的文件链接和 token，NPM 的 token，企业微信机器人的 webhook 链接等，我们需要先在仓库的 settings->Secrets 中添加好。

![secrets](https://lc-kjcS77HU.cn-n1.lcfile.com/48f0b0252a15c6b0a766.jpg)

这些密钥的获取方法如下：
- FIGMA_FILE_URL：Figma 图标文件链接
- FIGMA_TOKEN：在 Figma 的个人设置页面获取![Figma token](https://lc-kjcS77HU.cn-n1.lcfile.com/1a56579cd658f9f9feda.jpg)
- GH_TOKEN：上文生成的 GitHub token
- NPM_AUTH_TOKEN：NPM 账号 token![NPM token](https://lc-kjcS77HU.cn-n1.lcfile.com/db2fac8aa578f0934587.jpg)
- WECHAT_WORK_BOT_WEBHOOK：企业微信机器人的 webhook（不需要发消息通知可以不要）![企业微信机器人的 webhook](https://lc-kjcS77HU.cn-n1.lcfile.com/c6d3d2fbed73935cdce7.jpg)

### 通过插件一键更新
上面那些都配置好之后，我们就可以在 Figma 中一键发布新版本图标了。插件会自动获取到当前的版本号，我们只需要填写一个高于当前版本的版本号，以及更新内容，如果想要获得通知还需要填上企业微信机器人的 webhook 地址和通知内容，就可以发布了。

![发布更新](https://lc-kjcS77HU.cn-n1.lcfile.com/4c69291383107bdd79c2.jpg)

发布成功后，在企业微信会收到一条通知。可以看到，刚才的操作为我们生成了一条新的 pull request。

![企业微信收到通知](https://lc-kjcS77HU.cn-n1.lcfile.com/741646966174c4f02113.jpg)

### 合并 PR 触发自动化流程
现在，我们打开这个 PR 地址，前往代码仓库去合并它。

![合并分支](https://lc-kjcS77HU.cn-n1.lcfile.com/9e8676430d31b0bc1218.jpg)

这个合并的操作，会触发 GitHub 的自动化流程。

![GitHub Actions](https://lc-kjcS77HU.cn-n1.lcfile.com/9d341a099ce6d1b3370c.jpg)


因为我在里面配置了企业微信通知，所以在这个过程执行完之后，会自动往企业微信发送通知。

![企业微信通知](https://lc-kjcS77HU.cn-n1.lcfile.com/2b4e6eed41f2c632767a.jpg)

可以看到，上面的自动化流程还是用 GitHub Pages 的 Action 自动生成了一个在线网页，我们可以在这个网页中查找和复制图标名称。

![图标展示网页](https://lc-kjcS77HU.cn-n1.lcfile.com/f11d4259a34dc45684a5.jpg)

### 在终端执行命令更新并使用
接下来，我们就可以在终端执行命令安装或者更新图标了。更新之后，在代码中使用 `import { Clock } from 'juuust-vue-icon'` 的方式引入图标组件，还可以通过 `size` 和 `color` 来控制尺寸和颜色。

![更新图标并使用](https://lc-kjcS77HU.cn-n1.lcfile.com/3510be89b933eaff0414.jpg)

## 它为什么高效？
上面的过程看起来有点复杂，我为什么说它高效呢？因为这是第一次使用，需要配置很多东西所以看起来有点复杂。在第一次配置完成之后，后续的使用就很简单了。**设计师每次更新时打开插件，填写新的版本号和修改内容，一键提交；企业微信机器人通知开发，开发点击 PR 链接合并它，触发自动化流程；图标被发布到 NPM 之后，企业微信机器人再次通知，开发就可以使用命令行更新图标。**

同时，它也是很灵活的，这个插件只是通过 GitHub 的 API 生成一个版本更新（只改动了 package.json 中的 version）的 PR，图标的处理过程都在 GitHub Actions 里面。所以你可以根据自己的需求修改代码仓库中的自动化流程，修改图标展示页面，如果你想用其他代码托管平台（比如 GitLab），甚至可以修改我的[插件代码](https://github.com/leadream/figma-icon-automation)，不过就没有这么丰富的 GitHub Actions 可以使用了，需要使用对应平台的 CI 来自己实现。

目前，我们团队已经使用这套流程来交付图标了，整个过程只需要设计师和开发在接收到通知后点几下即可完成交付过程，节省了不少时间。现在很流行「设计系统」这个概念，它的作用主要就是减少设计到开发之间交付的一些阻力，而图标自动化交付就是我对「设计系统」的一个实践。


使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付

3…2…1！我整理了一些最新和最方便的 Figma 快捷方式和技巧，帮助你节省时间，让你设计快如闪电（译者注：不是《[疯狂动物城](https://movie.douban.com/subject/25662329/)》里的闪电）。

下面开始啦，看看有没有你不知道的。

![](https://player.bilibili.com/player.html?aid=65563117&cid=113770303&page=1)

详细文字版：

## 复制图层

要复制图层，只需要选择图层并按住 Option（Windows 下是 Alt，下同） 拖动就可以复制一个出来。之后，你就可以使用 Cmd + D 进行更多的复制。

![Cmd + D 多重复制](https://lc-kjcS77HU.cn-n1.lcfile.com/27b12d79a2181f9d0a37.gif)

## 重置图层名称

如果您想重置文本层的名称，只需删除旧名称并按回车——该图层将自动使用文本内容为图层名。

![回车重置图层名](https://lc-kjcS77HU.cn-n1.lcfile.com/a310b518dc8a6bb16718.gif)

## 有趣的的圆形

画一个圆形，用 Arc 工具把它变成一些很酷的环形进度条。

![有趣的的圆形](https://lc-kjcS77HU.cn-n1.lcfile.com/bd4d311aec5ee43ed635.gif)

## 快速设置不透明度

选中图层，使用键盘上的数字来快速更改所选对象的不透明度，快速按下两个数字可以设置更精确的值。

![快速设置不透明度](https://lc-kjcS77HU.cn-n1.lcfile.com/0cdb06bf1ffe7d879c3c.gif)

## 复制样式

使用 Cmd + Option + C 复制所选图层的样式，然后 Cmd + Option + V 将其粘贴到另一个对象上。

![复制样式](https://lc-kjcS77HU.cn-n1.lcfile.com/056efca58d13e1be2226.gif)

## 复制选定的属性

你只需在右侧属性面板中点击选中某个属性（按下 Shift 可以选中多个），然后用 Cmd + C 复制，再用 Cmd + V 粘贴到另一个对象上，想复制任何属性都可以这样做。

![复制选定的属性](https://lc-kjcS77HU.cn-n1.lcfile.com/c42b6e012c4e98e61917.gif)

## 拖拽改变属性值

将鼠标悬停在属性面板中的属性名（按住 Option 也可以放在输入框之上）上，按下鼠标并左右拖动可以平滑地更改属性值。此时如果鼠标往上滑动，光标变宽，滑动很少则属性值变化很大；鼠标往下滑动，光标变窄，滑动很多属性值变化很小。你可以上下移动鼠标来调整精度。

![拖拽改变属性值](https://lc-kjcS77HU.cn-n1.lcfile.com/a33946c31c1f6fcd9b86.gif)

## 智能选择

一次选择多个元素，并拖拽它们之间的线来调整间距，你还可以单击对象中心的圆圈并拖动它来重新定位元素。

![智能选择](https://lc-kjcS77HU.cn-n1.lcfile.com/918f470553d9a2f2135c.gif)

## 移动选择区域

用鼠标在画布上拖动选中一块区域，此时不要松手，按住空格键并拖动鼠标以在画布中重新定位选择区域。

![移动选择区域](https://lc-kjcS77HU.cn-n1.lcfile.com/177fc0d09cfbc5c8492b.gif)

## Figma 性能

在菜单中(可以使用 Cmd + / 访问)，搜索“Resource Use”，查看 Figma 的资源使用状态。

![Figma 性能](https://lc-kjcS77HU.cn-n1.lcfile.com/42ccb8e930e2bbf2d11f.gif)

## 你用了哪些快捷键？

我们来玩一个快捷键游戏！按下快捷键 Ctrl + Shift + ? 看看你最近使用了哪些快捷方式。那些没有变蓝色的就是还没用过的，快一个个都试一遍吧。

![你用了哪些快捷键](https://lc-kjcS77HU.cn-n1.lcfile.com/f67618f3bde21ee5e8e3.gif)

## 设置弹出层过渡效果

在原型功能中将两个 Frame 连接起来，将一个作为另一个的弹出层，你还可以调整弹出层遮罩的透明度，或者设置过渡动效，比如从下方渐显移入。

![设置弹出层过渡效果](https://lc-kjcS77HU.cn-n1.lcfile.com/9d05ef28011e73bafaa3.gif)

## 精准定位弹出层

当你选择弹出层位置为手动（Manual）时，可以轻松地将其拖到目标位置。如果你将鼠标悬停在它的外面，但此时仍处于选中状态，你仍然可以使用方向键精准地移动它。

![精准定位弹出层](https://lc-kjcS77HU.cn-n1.lcfile.com/e57ef83dd39a26888a03.gif)

## 多状态的弹出层

给弹出层创多个版本，并添加它们之间的交互以使其具有多个状态。然后为不同状态之间创建交换（Swap）连接，这样就可以实现多状态切换效果。

![多状态的弹出层](https://lc-kjcS77HU.cn-n1.lcfile.com/abe452ea8d227a64d73e.gif)

## 隐形点击目标

你可以一个创建不透明度为 0% 的矩形，将它作为一个点击区域。

![隐形点击目标](https://lc-kjcS77HU.cn-n1.lcfile.com/24c2a789a3432794e8b6.gif)

## 特殊的动作和触发器

在创建原型连接时，你可以选中一个 Frame 作为链接目标，也可以选中一些特殊的动作和触发器，比如上一个页面或者关闭弹出层。

![特殊的动作和触发器](https://lc-kjcS77HU.cn-n1.lcfile.com/9815cdab2db04ad07c33.gif)

## Shift 位移的大小

在菜单（Cmd + /）中搜索“Nudge”，我们可以看到它的值默认为 10px，这就是我们按住 Shift 时属性变化的大小，你可以将它设置为自己习惯的值，比如你在使用以 4px 为基准的栅格，就可以将其设置为 4px。

![Shift 位移的大小](https://lc-kjcS77HU.cn-n1.lcfile.com/50d89f5f45d281f6279d.gif)

## 快速选择图层

按住 Cmd（或 Ctrl）并右击，可获得光标下的元素列表，这样就可以快速选中需要的图层，包括锁定的层。

![快速选择图层](https://lc-kjcs77hu.cn-n1.lcfile.com/8e10f7359a188299a60d.gif)

## 批量解锁/隐藏对象

在 Figma 的菜单（Cmd + /）中搜索“Unlock”或“Unhide”，就可以批量操作所选项。

![批量解锁/隐藏对象](https://lc-kjcS77HU.cn-n1.lcfile.com/fb20bf1b304a6fb5b680.gif)

## 批量导入的图片

按下 Cmd + Shift + K 开始选中并导入多张图像，然后你就可以点击单独的形状来一个个填充这些图像。

![批量导入的图片](https://lc-kjcS77HU.cn-n1.lcfile.com/ae861d0d5b9664f9f1c8.gif)

## 导入图片和 Gif

直接将图片拖拽至“属性”面板的“图像填充层”上，就可以用图像填充形状。如果您正在使用 Gif，单击缩略图还可以调节画布上显示的帧。当你在原型中预览时，Gif 会播放。

![导入图片和 Gif](https://lc-kjcS77HU.cn-n1.lcfile.com/edfabaaf640a49517e5f.gif)

## 复制粘贴小技巧

使用 Cmd + C 复制图层，然后按下 Cmd + Shift + V 可以将其粘贴并对齐到另一个图层的左上角。

![复制粘贴小技巧](https://lc-kjcS77HU.cn-n1.lcfile.com/32f9d07684a1a45b0c4f.gif)

## 回车快速选择

选中一个形状后，你可以按下回车来进入矢量编辑状态。而当你选中一个组并按下回车时，会自动选中组里面的图层。如果按住 Shift 再按回车，则可以选中其父图层（组）。

![回车快速选择](https://lc-kjcS77HU.cn-n1.lcfile.com/075b12df57e3ec557725.gif)

## 使用方向键调整颜色值

在调整颜色时，可以使用方向键来调节，按下 Shift 可以更大跨度地调整，一般在调整不同程度的灰色时很有用。

![使用方向键调整颜色值](https://lc-kjcS77HU.cn-n1.lcfile.com/33ba8d1ad21e0e842c57.gif)

## 从 CSS 粘贴颜色值

从 CSS 中复制任何包含颜色值的代码，无论是 rgba、hex 还是 hsla，都可以将其粘贴到 Figma 中的 hex 输入框中——它将会自动设置该色值。

![从 CSS 粘贴颜色值](https://lc-kjcS77HU.cn-n1.lcfile.com/204d37b9331ac6195f35.gif)

## 实时预览颜色

如果要预览形状的最终颜色，在使用颜色选择器时单击并拖动，可自动实时预览所选颜色效果。

![实时预览颜色](https://lc-kjcS77HU.cn-n1.lcfile.com/f5689afabc83cc5c7ac1.gif)

## 更改文本排布方式

双击文本框的边框以更改文本排布方式（宽度固定、高度固定或宽高都固定）。

![更改文本排布方式](https://lc-kjcS77HU.cn-n1.lcfile.com/01e8d824696efc556846.gif)

## 批量更改文本图层属性

在菜单（Cmd+/）中搜索“Select All the Same Fonts”来选中具有相同文字属性的图层，然后在面板中批量更改其属性。

![批量更改文本图层属性](https://lc-kjcS77HU.cn-n1.lcfile.com/2f103236d199ff483c27.gif)

## 滚动调整颜色的 hue 和 alpha 值

当您在颜色选择器之中时，使用鼠标滚动来调整颜色 hue 值，或者按下 Option 滚动来更改 alpha 值。

![滚动调整颜色的 hue 和 alpha 值](https://lc-kjcS77HU.cn-n1.lcfile.com/1df2c13f01f6cddf3972.gif)

## 同时创建多个组件

你可以同时选中多个 Frame，再把鼠标移动到顶部组件图标上，在下拉菜单中选择“create multiple components”就可以创建多个组件了。

![同时创建多个组件](https://lc-kjcS77HU.cn-n1.lcfile.com/4521c31dff76e734789c.gif)

## 批量给名称添加前缀

在“重命名图层”对话框（右击->Rename）中给选定的元素批量添加前缀。

![批量给名称添加前缀](https://lc-kjcS77HU.cn-n1.lcfile.com/aae73fc8c759957e4212.gif)

## 快速切换组件实例

如果你使用了统一前缀命名一些组件，则可以在右键菜单中选中（swap instance）来快速切换实例。

![快速切换组件实例](https://lc-kjcS77HU.cn-n1.lcfile.com/86ae73ba96c29c13c7eb.gif)

## 快速回到 master 组件

选择一个组件实例，在右侧属性面板中选择 go to the Master Component 来快速切回到 master 组件。

![快速回到 master 组件](https://lc-kjcS77HU.cn-n1.lcfile.com/e1c832f11efd64d0b472.gif)

## 将实例组件更改同步到 master 组件

选择一个实例组件，更改其一些属性，然后可以在右侧属性面板中将这些改动同步到 master 组件。

![将实例组件更改同步到 master 组件](https://lc-kjcS77HU.cn-n1.lcfile.com/04f38e16d36479f6c7db.gif)

## 更好的预览背景

如果您想在 Assets 面板中为组件预览添加一些背景色，只需要将该组件移动到带有黑色背景的 Frame 中。

![更好的预览背景](https://lc-kjcS77HU.cn-n1.lcfile.com/e7a8fdb9711d902937a8.gif)

## 设置文件封面

现在 Figma 文件列表中会使用设计截图作为封面，如果你想让这些封面更加整齐好看，可以在文档的第一页只画一个 Frame 封面，并将画布背景色和其设置相同，再将设计的其他部分放在第二页。

![设置文件封面f](https://lc-kjcS77HU.cn-n1.lcfile.com/acf24f4a07aa1d17aea6.gif)

## 高级批量图层重命名

在选择要重命名的层之后使用 Cmd + R 调出图层重命名面板，并使用正则表达式进行复杂的图层匹配和重命名。

![高级批量图层重命名](https://lc-kjcS77HU.cn-n1.lcfile.com/5a954721356b3c34b366.gif)

## 批量删除图层命名的共同部分

在上述图层重命名窗口中删除图层名称的公共部分，比如，你可以删除斜杠之间的一段以更好地组织图层。

![批量删除图层命名的共同部分](https://lc-kjcS77HU.cn-n1.lcfile.com/65b861193fb7a6673576.gif)

## 快速定位图层

如果你想在画布上快速找到一个图层——只需要在左侧图层面板中找到它，双击左边的图层缩略图，就可以自动定位到图层啦！

![快速定位图层](https://lc-kjcS77HU.cn-n1.lcfile.com/2429390d986413955a6c.gif)

## 给共享样式分组

类似于可以用斜杠对图层名称进行分组，你也可以使用相同的方法对颜色样式中的颜色进行分组。

![给共享样式分组](https://lc-kjcS77HU.cn-n1.lcfile.com/32b939fa5dd5d0592710.gif)

## 给组件添加描述

你可以给任何 master 组件添加描述，这些描述在切换过程中会以 CSS 注释的形式出现，因此向组件添加一些给开发人员的注释是一种很好的方法（译者注：比如夸他两句）。

![给组件添加描述](https://lc-kjcS77HU.cn-n1.lcfile.com/b0f173523acd677ccf3a.gif)

## 存储时增加额外信息

当你希望在保存文件时添加一些额外信息到版本历史记录中，请使用 Cmd + Option + S 快捷键。

![存储时增加额外信息](https://lc-kjcS77HU.cn-n1.lcfile.com/b741d349829a83344a16.gif)

## 分享文档的特定版本

你可以在历史记录中查看每一个保存过的版本，还可以右击来分享某一特定版本。

![分享文档的特定版本](https://lc-kjcS77HU.cn-n1.lcfile.com/0b87b13221b71981367d.gif)

## 在客户端复制链接

当你使用客户端时想要复制文档链接，请右键单击顶部的文档 tab 并选择 Copy link 选项。

![在客户端复制链接](https://lc-kjcS77HU.cn-n1.lcfile.com/a5caf7cc68f0fd097a60.gif)

## 从剪贴板打开文件

如果你已经复制了一个 Figma 文件链接，并且你想直接在桌面应用程序中打开它，只需选择 file→open URL From Clipboard 就可以了。

![1_YI8_AEbzmQz43s2CZK7C4g.gif](https://lc-kjcS77HU.cn-n1.lcfile.com/a5599320b8222e52a799.gif)

以上就是所有的小技巧啦，如果你想学到更多，还可以去查看作者的课程：https://learnux.io/course/figma?autoplay=1

更清晰的讲解请查看视频：https://www.youtube.com/watch?v=Vo0sEPqArRQ
原文链接：https://blog.prototypr.io/figma-tips-tricks-superpower-your-workflow-%EF%B8%8F-d03f418d1db3



50 个 Figma 提示和技巧，让你设计时快如闪电 ⚡️

> icon 在设计系统或产品体验中是很重要的元素。 icon 可以帮助我们快速导航，并且不受语言限制，即使是不同的国家的用户也都明白它的意思。还有一点特别重要的是，它体积很小，不会消耗大量资源。icon 一般是设计系统的一部分，也在市场宣传材料中发挥很大作用。它们是最基础的绘制图形元素，但同时也包含着大量的设计和技术细节。

这个世界上喜欢绘制 icon 的人并不太多，而精通这项工作的人更少。但是认真读完我这篇文章，你就会变成这少部分人中的一个。

![icon 绘制的位置](https://lc-kjcS77HU.cn-n1.lcfile.com/01228542ad8e6d5aaeb3.jpg)

无论你是精通于构建设计系统的大牛，或者一个插画师，还是一个产品设计师，这份指南都可以帮助你学会如何绘制 icon，如何让它和你的品牌保持一致，以及如何在设计系统中加入一套 icon 库。

让我们从最基础的部分开始吧。

##  icon 的基础部分
### 尺寸
**对于 icon 来说，保持统一是最最最重要的**，当你在设计时请确保所有 icon 都有相同的尺寸。首先，确定你设计稿栅格的基准多少像素（比如说 8px 和 10px）。然后，你的 icon 尺寸应该是基于这个基准值来设计的。比如说，如果你的栅格基准是 8px，那么你的 icon 尺寸最好是 16px、24px 或 32px 等。

一般来说，你可以只设计一种尺寸的 icon ，然后和开发人员沟通好可以在产品中以一些倍数变化，再让开发在写代码时给 icon 设置对应的尺寸，这样就不需要因为尺寸不同而一遍遍去绘制了。

但是，当你需要绘制比较复杂的 icon 时，可能就需要为不同的尺寸单独设计了。可能在产品设计中只需要 24px 的 icon，但是在市场宣传材料中需要 80px 的 icon，这时候就需要给 icon 增加一些细节让其看起来更加丰满。

![不同尺寸的 icon](https://lc-kjcS77HU.cn-n1.lcfile.com/64c973cf7f20e66af2ef.jpg)
>一个商店 icon 分别在 24px、40px、80px 时的不同展现

我一般习惯先绘制大一些的 icon，这样当我需要一个小尺寸的变化时，只需要适当地移除一些细节就好了。简化的过程要比反过来逐渐添加细节要简单，而且这样做也会让你在简化时更加清楚哪些要移除。

### 颜色
对于产品中的 icon 来说，使用一种黑色就可以了。任何多于一种色值的 icon 都将变得复杂，并且很难和其他设计师一起协作。也许一些市场部人员需要多色 icon，这也有助于品牌的展示，但是我始终认为 icon 就应该是单色的，任何多于三色的图案都不再是 icon，而是插画。

![插画和 icon](https://lc-kjcS77HU.cn-n1.lcfile.com/0058480a3bbe2aad7b95.jpg)
>左：插画；中：带透视 icon；右：扁平 icon。

### 栅格
**像素栅格**是最基础的栅格，它使用最小的参照单元：像素。当你在设计 icon 时，总希望能够将元素对齐到每一个像素上，尤其是直线。如果你是使用 Figma，它可以自动帮你贴合到像素。像素对齐不只会更好地渲染，也能够让 icon 处理起来更加直观方便。你可以通过下图感受一下在 Figma 中像素对齐的 icon 和没对齐的 icon 之间的差异：

![对齐或不对齐](https://lc-kjcS77HU.cn-n1.lcfile.com/de6531cdd8f50a452fa2.jpg)
>左：像素对齐；右：未对齐。

我一般会在画 icon 之前先设置好像素栅格，下面是我的设置：

![像素栅格](https://lc-kjcS77HU.cn-n1.lcfile.com/fcf3dcb472f853705fe3.jpg)

现在你应该掌握了像素栅格，让我们来看一下视觉上的栅格。视觉栅格可以帮助我们找到 icon 的重心所在，以及它在设计中所呈现的大小。通常，圆形或者曲线会显得比方形小一些。我们一般会把 icon 绘制在一个固定尺寸的容器中，这样导出时他们的尺寸就一致了。我们需要给不同的 icon 添不同的内边距，以保持每个 icon 在视觉上看起来重心和大小一致，而不需要在开发时再次调整。

我一般喜欢设置一个和描边粗细一致的内边距，但如果是 1px 的描边我会使用两倍的内边距。从下图中，你可以看出我为不同的形状设置了不同的内边距，以保持视觉上的一致。

![不同的内边距](https://lc-kjcS77HU.cn-n1.lcfile.com/c27d8454108efa4a603e.jpg)

在视觉上，icon 中的主要物体应该水平垂直居中。

![主要物体水平垂直居中](https://lc-kjcS77HU.cn-n1.lcfile.com/851e68c07812b6c68777.jpg)
>主要物体（矩形）居中

如果你已经使用了像素对齐和视觉栅格，那么你绘制 icon 的水平已经领先了。

### 描边和填充
还记得我说的保持统一是最重要的嘛？现在我再强调一遍。最让我抓狂的事情就是，两个并排的 icon，一个是描边的而另一个是填充的。请确保你的产品中 icon 都是统一风格的，这非常重要。也许有时候你想用填充的 icon 来表示选中状态，但请一定要确保大部分都使用一种风格，只有少部分变体。

一般来说，填充 icon 更加易于识别，而描边 icon 则更加方便增加细节。当你想要确定哪一种风格更加合适时，还需要考虑品牌的调性。

当你选用描边风格时，要保证都是一样的粗细，空白处最好也和 icon 的线条保持一样的宽度。

![icon 粗细](https://lc-kjcS77HU.cn-n1.lcfile.com/c508e126ea7ad78609e2.jpg)
>空白处和线条尽量宽度一致

也许有时候你想要从一种风格的 icon 创建另一种风格。当你想要从描边风格 icon 创建填充风格 icon 时，可以适当地简化一下线条。一般来说，填充的部分是投影，而不是直接将描边 icon 进行反向转换。从填充风格创建描边风格的 icon，你需要确定好线条的粗细，以及需要保留多少细节。

![不同风格的 icon](https://lc-kjcS77HU.cn-n1.lcfile.com/ab550e7f10572159f515.jpg)

我不推荐使用小于 10px 的尺寸来绘制描边 icon（假如线条粗细是 1px-2px 的话），因为这样将很难绘制细节。

### 风格选择
icon 也是品牌的一种展示。开始绘制 icon 时，需要理解品牌的核心价值以及如何呈现它。这有一些形容词可以参考：坚硬/柔软、随意/正式、奢侈/经济、具象/抽象等等。或者你也可以参考你们品牌插画的风格。

有一些比较通用的 icon，比如关闭的叉叉、菜单、箭头，这些 icon 需要你先确定好整体风格之后再来绘制。我推荐你先绘制复杂一些的 icon，这样就能先搞清楚一些绘制规则，当你绘制简单的 icon 时就变得轻车熟路了。

![不同风格的细节处理](https://lc-kjcS77HU.cn-n1.lcfile.com/16be9eb98adcecf0a2e1.jpg)
>5 种风格的 icon，可以观察一下每一种为了保持一致性在细节上的处理

这里有一些能展现其品牌特性的 icon 可供参考：

- [Uber](https://www.uber.design/case-studies/rebrand-2018#section-5)
- [Google](https://material.io/tools/icons/?style=baseline)
- [Apple](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/)
- [Airbnb](https://www.zachroszczewski.com/airbnb/)
- [Square](https://www.bonniekatewolf.com/icon-system.html/)

## 绘制 icon
### 几何图形
除非我要设计一个非常接近自然物体的 icon，否则我一般都使用基本形状来排列组合。矩形、方形以及圆形都可以帮助你来绘制非常细腻的 icon。

![形状组合绘制橡胶鸭](https://lc-kjcS77HU.cn-n1.lcfile.com/e1452166251bb90c2878.jpg)
>这个橡胶鸭是由几个圆形和一个圆角矩形组成的

当你需要绘制多边形时，你可以在方形或者矩形的基础上绘制，也可以直接使用钢笔来逐点连线。最好你能够有一个清晰可见的像素栅格，可以参考绘制节点位置。

当你想要绘制一个旋转的图形时，我不推荐你先画一个形状再旋转它，最好是根据像素栅格来逐点连线绘制。

![旋转物体](https://lc-kjcS77HU.cn-n1.lcfile.com/446003cd146c030e4445.jpg)
>左：形状旋转，像素不能贴合；右：逐点连线，像素完美贴合。

### 自然形状
在 Figma 中绘制自然形状 icon 也很简单。你可以使用传统的方式添加一个个节点并连接曲线，也可以使用 Figma 的智能节点弯曲工具（Bend Tool）。我一般是先用点连线，画出笔直的图形，再使用智能节点弯曲工具把每个节点变成自然曲线。当你创建比较自然或平衡的形状时这很有帮助，因为它是自动的，当你移动节点时曲线和圆角都会自动调整。

![绘制小狗 icon 示例](https://lc-kjcS77HU.cn-n1.lcfile.com/b0c4caa62f2c83fe9a6c.gif)

### 角和连接
角有很多选项：方角、斜角和圆角。我强烈推荐你为所有 icon 设置同样风格的角。

### 圆角半径
当使用圆角的形状时，你需要保证圆角半径一致。而当你的 icon 中有几个同心的形状时，还需要对其圆角半径稍作调整，以保证看起来更加和谐。一般来说，内部形状的圆角半径比外部形状的圆角半径小一些。

![同心形状圆角](https://lc-kjcS77HU.cn-n1.lcfile.com/2c899a5dab42015c6a39.jpg)
>在这个公文包 icon 中可以看到几个形状的圆角半径是不同的

你可以在右侧的属性面板中快速调节一个形状的圆角半径。当你选择了一整条路径时，它将改变这条路径的每一个角。你也可以进入编辑模式，单独设置某一个节点的圆角半径。

### 端点
端点可以设置为圆的、方的，还可以设置为箭头。

### 内部物体
当你的 icon 中的主物体中还有另一个物体，比如一个房子中有一扇窗户，一般都是在描边形状放置描边形状，或者在填充形状中放置填充形状。当一个描边形状内部不足以放置另一个描边形状时，你可能需要放置一个和描边粗细成比例的填充形状，但最好保证内部形状不要太宽。举个例子，当外部描边为 2px 时，内部放置一个大于 4x4px 的填充图形就会看起来很奇怪。

### 隐喻
icon 中的隐喻元素很重要，它可以让我们一看到这个 icon 就知道是什么意思。比如，一个房子代表首页，一个叉叉代表出错或关闭。当我缩小一个 icon 时，我都会保留隐喻元素，来保证 icon 仍然可以准确传达信息。

![icon 的隐喻](https://lc-kjcS77HU.cn-n1.lcfile.com/5ada77f5c77bfb39e247.jpg)
>缩小 icon 时，保留主要的隐喻元素，删减部分不重要元素，而不是直接缩小

![15692140928787.jpg](https://lc-kjcS77HU.cn-n1.lcfile.com/7c1918c497e488199850.jpg)
>当 icon 不能直接缩小适配时，保留最重要的元素

![15692141656130.jpg](https://lc-kjcS77HU.cn-n1.lcfile.com/464ecd1eb6ab4a867fde.jpg)
>如果受限于空间大小，可以适当减少细节，而不是直接移除它们

### 透视
给 icon 添加透视效果有点棘手——icon 尺寸一般较小，而透视会占用额外的空间。因此，如果要添加透视要么整体都添加，要么只是在一些必要的地方添加，来增强易读性和辨认度。

![icon 的透视](https://lc-kjcS77HU.cn-n1.lcfile.com/0e23f5842a2972d87852.jpg)
>上一行：扁平的 icon。下一行：带有透视效果。

### 文字（尽量避免！）
尽量避免在 icon 中使用文字，因为 icon 会在各种想不到的地方使用。如果你一定要添加一些文字，比如币种符号，可以自己照着文字绘制一遍，而不是直接使用文字。

## 工具使用建议
### 布尔操作
布尔操作使用四种方式——结合、减去、相交以及排除，来组合图形。用它来绘制 icon 非常方便，因为它会保留每个图层，这样就可以随时回来编辑每一个细节。你不用进入到编辑模式裁切路径，也不需要手动寻找相交的部分，直接使用布尔操作会更加方便。

![布尔操作](https://lc-kjcS77HU.cn-n1.lcfile.com/014a6ed4db7d49950f98.gif)

布尔操作之后的图层组会被视为一个图层，他们拥有相同的填充色和描边属性，还可以继续和其它布尔操作元素组合，做出更复杂的图形。

- **结合**：图形结合会把选中的形状打包成组。新的图层组是由它们相结合，并将重叠部分只算一次而组成的。如果给它添加描边，则只会在外圈起作用，而不会给重叠部分的路径描边。
- **减去**：图形减去和图形结合正好相反。图形减去会以最底层的图层为基础，减去上面各个图层和它重叠的部分。
- **相交**：相交则只取图层相重叠那一部分。
- **排除**：排除和相交相反，它会减去重叠部分，而保留其它部分。

一般我经过上面一顿操作，画完一个 icon 之后，都会把它变成一个“图形结合”，这样当其他小伙伴需要调整颜色时，只需要在右侧面板统一调整填充色，而不用进入里面一会调填充色一会调描边颜色。

### 矢量网格
矢量网格是 Figma 比较独特的一个功能。大多数设计工具都只能按照一个方向绘制路径，一般到最后会闭合到初始点。矢量网格则完全不同，它不需要你按照一个方向绘制，你可以在任何时候从任何节点再引出一条路径，而不用单独分离画一个节点。这样的话，一些复杂形状就可以在一个图层中绘制，并且统一调节属性，大大节省了时间。想了解更多你可以看看[这篇文章](https://help.figma.com/article/63-vector-networks/)。

## 在设计系统中使用 icon
在设计系统中使用 icon，并且让你的团队能够正确使用它，这里主要有三点：icon 的命名和组织、资源管理和交付。

### 命名和组织
让我们先说一下文件的命名和组织。首先，**你的 icon 应该以英文单词命名，因为开发的代码是使用英文写的，这样最后交付给开发可以节省很多沟通成本**（这一句是译者添加的）；其次，你的 icon 命名应该基于它是什么、长什么样，而不是它代表什么。比如说，一个秒表就应该命名为 stopwatch，而不是 speed。一个灯泡就应该命名为 lightbulb，而不是 idea。这样，大家一看就知道它是什么，并可以将其用于多个语境；最后，命名应该尽量简短明了，如果需要多个单词，最好用短线（-）隔开。

![icon 命名](https://lc-kjcS77HU.cn-n1.lcfile.com/fa284114b61bd405581b.jpg)
>比如这个 icon 就需要多个单词描绘，例如：chef-hat

在 Figma 中，你最好将 icon 做成组件，这样当你复制组件时它会产生一个实例组件，而不只是一个简单复制。做成组件后，你就有了一个公共组件库，可以随时在其他文件中使用。当团队中的人更改了一个 icon 的 master 组件时，其他所有用到的地方就可以同步更新，方便维护统一性。在左侧面板的 Assets 中，你可以搜索 icon 组件，如果你想给它添加一些额外信息以方便搜索，可以在组件的描述中添加。当选中 master 组件时，在右侧面板中会有一个可以填描述的地方，你可以在里面添加一些关键词，比如你可以给一个房子 icon 添加“首页,主页,房子”这样的描述，这样当搜索时就不需要那么精确地输入 icon 名字。

你可以借助页面和 Frame 来组织 icon 的分类。页面代表最外面的层级，Frame 作为第二个层级。比如我一般是按照尺寸（页面）> 分类（Frame）> 文件名来分的。

![icon 的分类](https://lc-kjcS77HU.cn-n1.lcfile.com/73181470ca9c01d652d5.jpg)

一般一个 icon 会有一些变体，比如不同尺寸，不同风格，我一般这样处理：

**不同尺寸**：用不同页面来放置不同尺寸的 icon，这样尺寸就是最外面一个层级，因为你不会经常切换不同尺寸的 icon（在右侧快速切换组件显示的是最内层级下的相关组件）。

**填充 vs. 描边**：当你同时使用了两种风格，可以使用斜线命名区分。

![不同风格区分](https://lc-kjcS77HU.cn-n1.lcfile.com/ee591a3dc04dec69fb43.jpg)
>左：coffee/stroked；右：coffee/filled

**细微图像变化**：有时候一个 icon 会有一些细微的图像变化，你也可以使用上面这种方式命名以区分。

![细微图像变化的 icon](https://lc-kjcS77HU.cn-n1.lcfile.com/1432b9176bd8ba7b5a1b.jpg)
>最左的原始 icon 叫 `shield`，后面的依次叫 `shield/dollar`、`shield/euro`、`shield/pound`、`shield/yen`、`shield/plus`

### icon 资源管理
当你画完 icon，肯定希望最终能够导出整洁清晰的文件。你可以使用布尔操作（记得上面提到的最后图形结合的操作吗）让 icon 方便更改属性，还要避免线条或形状超出 Frame 容器，最好能让另一个人来帮你检查一下。

Figma 很适合做这种工作，因为它鼓励协作和透明化。你可以给其他小伙伴添加文件编辑权限，这样他们就可以添加 icon 了。但我更推荐你单独搜集每个人画的 icon，经过审核后再将符合标准的加入 icon 库。这样，你只需要给他们添加查看权限，他们也可以在 icon 库完善的过程中参考绘制自己的 icon。也许有些小伙伴想要创建一个 icon 的不同版本，比如说不同的颜色或名字，一般在产品设计的某个特定场景下会需要这样做，这时候你就可以在组件描述中追加新的名字，并且让他们在自己的文件中给 icon 组件设置不同颜色，以避免 icon 组件库变得不统一。

当你需要导出 icon 时，可能需要为不同的人导出不同的格式。比如说，对于一些外部合作伙伴需要导出一倍或二倍的 png 格式，而开发小伙伴需要的是矢量的 SVG 格式，这样他们就可以使用代码对 icon 的属性做一些调整。导出 SVG 时，Figma 会自动帮你压缩，移除一些不必要的 SVG 代码。详细细节可以参考[这篇文章](https://www.figma.com/blog/with-figmas-new-svg-exports-less-more/)。

### 把你的 icon 交付到对方手里
也许你可以设计出很精致的 icon，但是如果你不能完美的让它们呈现于 App、网页或邮件中，那么你的工作并没有完成。在设计之前，你可以和开发对接人先聊一下，看看他们对 icon 交付的要求，好帮你确定 icon 的粗细或尺寸。同时，也和其他设计师同步一下信息，以免你们做了重复的 icon 。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多问一下别人，从而获得反馈和建议，这可以帮助更好地做设计决策。当你准备交付给开发人员时，可以[尝试借助 Figma 的开放 API 来自动化导出](https://johanronsse.be/2018/09/23/the-figma-api-for-the-rest-of-us/)。

## 其它资源
- 有任何问题你都可以通过邮件（bonniekatewolf@gmail.com）联系 Bonnie Kate Wolf。
- thenounproject.com 中有很多关于 icon 绘制的灵感和技巧。
- 本文中的示例模板：https://www.figma.com/file/v8WczgltywYcWbZyAqChfX/Design-Systems-Icon-Guide/duplicate

- 作者：Bonnie Kate Wolf
- 翻译：Juuun
- 首发：公众号 Codesigner
- 原文：https://www.designsystems.com/iconography-guide

一份完全的 icon 设计指南

这是一篇来自 Figma 官方博客的最佳实践指南，介绍了 Figma 最强大的两个特性——组件和共享样式，并通过一系列的实例讲述了什么时候该创建组件，如何合理创建组件，共享样式的使用，以及该如何组织这些共享的库。全文较长，这是第二篇，点[这里](https://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw)回顾上篇。

![组件最佳实践](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-21/0dFnzCqRMxsuQFMl-0%20(1).webp)

本文主要包含内容如下：

- 组件最佳实践
- 样式
- 组织和创建共享库
- 组织管理组件
- 最后的一些想法



Figma 最佳实践（下）

这是一篇来自 Figma 官方博客的最佳实践指南，介绍了 Figma 最强大的两个特性——组件和共享样式，并通过一系列的实例讲述了什么时候该创建组件，如何合理创建组件，共享样式的使用，以及该如何组织这些共享的库。

![0.webp](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-21/hoe3oeVyWMNn0c5p-0.webp)

## 包含内容

* 快速概览：组件和样式是什么？
* 什么时候该创建组件？
* 组件最佳实践
* 样式库和一些小技巧
* 组织你的共享库
* 最后的想法



Figma 最佳实践（上）

去年（2018）我转行做了交互设计师，一直在用 Sketch 进行设计，但是 Sketch 不便于交付，要借助其它工具把源文件转换为可以访问的链接；后来转为产品经理，我开始使用 Axure 制作原型，Axure 的一个问题是太重了，操作起来也不是那么顺滑，会影响到工作效率。

虽然我也知道“工具并不重要，重要的是想法”，但不顺手的工具真的会浪费很多时间，所以我就开始尝试各种各样的工具。因为我负责的产品是云端协作的工具，就想起了主打云端设计协作的 Figma。

![我的组件库](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-10/Oi59S3S-yETtP_sJ-0.webp)

主要内容：

- 创建样式库和组件库
- 展示产品逻辑
- 可交互原型

如果你是一个产品或者交互，想要尝试使用 Figma，可以看一下这篇。





使用 Figma 完成产品设计工作流

以前推荐过使用 Figma 制作了一个[插件推荐原型](https://figmacn.com/article/recommended-figma-pugins)的 [Tovi](http://tovi.fun/) 把这个项目做成了一个网站，现在你可以在这个[网站](https://figma.tovi.fun/)上找到他人工推荐的插件啦。

![人工推荐 Figma 插件的网站](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/Zh7sr0jPrhS7uEaC-39427ceebfb03f0faef7.png)



作者会定期更新，如果不想错过也可以关注他的公众号：

![二维码](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/Qo-0zVqvv0AD9a9C-7049029297ab31863b18.png)

作者的 Figma 主页：https://www.figma.com/@tovi



人工推荐 Figma 插件的网站

iFigma.design 是 Jaylee 制作的一个 Figma 网站，主要发布各种 Figma 绘图小技巧，非常实用。看了之后，你会发出“哇，原来还有这种操作 🤩”的感叹。

![iFigma 独门秘籍](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/HznoGsIy-2eaXv9q-WX20201115-164827@2x.png)





Figma 独门秘籍的日常

Figma 油管有一系列的教学视频，从最基础的概念比如文字、颜色等开始，到复杂的栅格、自动布局、样式和组件，非常适合刚接触 Figma 之前看一遍。

## 智能动画

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

![](https://player.bilibili.com/player.html?aid=81128214&bvid=BV1tJ411a76i&cid=138845606&page=1)

## 自动布局

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

![](https://player.bilibili.com/player.html?aid=81128946&bvid=BV1tJ411a7g7&cid=138847088&page=1)

## 基础知识

基础知识共 15 个视频，包含内容：

- 文字工具和字体
- 效果：投影、模糊等
- 渐变
- 布局栅格
- 图片的处理
- 智能参考线
- 圆角
- 遮罩
- 颜色取色器
- 布尔操作
- 对齐和分布
- 矢量网格
- 导入和导出
- 响应式约束
- 创建共享样式

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

![](https://player.bilibili.com/player.html?aid=67557460&bvid=BV1RJ411P7gT&cid=117129560&page=1)

## 快速入门

快速入门一共 8 个视频，内容包括：

- 账号、团队、项目和文件 (1 of 8)
- 编辑器概览 (2 of 8)
- 组件 (创建一个按钮) (3 of 8)
- 颜色共享样式 (4 of 8)
- 团队组件库 (5 of 8)
- 多人协作、分享和评论 (6 of 8)
- 原型及演示模式 (7 of 8)
- 交付给开发 (8 of 8)

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

![](https://player.bilibili.com/player.html?aid=69363810&bvid=BV1HE411R7gx&cid=120213650&page=1)

## 快速入门（旧）

这是很久以前的教学视频，和现在内容有一定脱节，推荐看上面最新的系列。

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

![](https://player.bilibili.com/player.html?aid=67284320&bvid=BV1nJ411K7Zt&cid=116665337&page=1)





Figma 官方教学视频

我做的 [Figma Handoff](https://mp.weixin.qq.com/s/6ygKUvGsmD5dkQqFEndRbA) 自发布已经快三个月了，为了不和官方的交付功能冲突，现在我决定将其更名为 Juuust Handoff（下文简称为 Handoff）。

在这段时间，我收到了[不少反馈](https://github.com/leadream/figma-handoff/issues)，针对这些反馈我不断迭代优化，包括开发了一个可以[更快导出标注的插件](https://mp.weixin.qq.com/s/-ELwsHjcxihoKkpjPqzNdQ)，让设计师和开发人员能够更好地协作。现在，我想针对这段时间很多人问到的一些问题统一解答，主要针对设计师和开发人员两个使用角度来说，希望可以帮助你更好地使用它。

## 设计师
### 像素密度和倍数
Handoff 支持在设置中选择平台像素密度，需要注意的是在平台为 Web 时选择的是「倍数」，平台为 iOS 和 Android 时选择的才是「像素密度」。

![Juuust Handoff 设置](https://lc-kjcS77HU.cn-n1.lcfile.com/b272ae63ec4c7faa3649.jpg)

这是很多设计师都容易混淆的地方。这个故事说来话长，首先我们要明白手机或电脑的屏幕是用一个个微小的方块组成的，类似于像素画。早期受限于屏幕技术，一个物理方块代表设计图中的一个像素，后来随着屏幕技术的进步，为了获得更好的显示效果，苹果推出了搭载 Retina 屏幕的 iPhone 4，它使用四个物理方块来显示设计图中的一个像素。

![图自维基百科](https://lc-kjcS77HU.cn-n1.lcfile.com/1b1ada65e40d8954a526.jpg)

这时候，其「像素密度」就是 @2x，设计图的尺寸也就需要变为 2 倍，比如之前使用 375 的宽度设计，现在则需要使用 750 的宽度。后来，随着屏幕技术进化，又出现了「像素密度」为 @3x，也就是九个物理方块来代表设计图中的一个像素。随着屏幕的种类越来越多，设计师就需要为不同「像素密度」的设备分别设计一套图，这得多累啊。

所以，后来 iOS 和 Android 分别有了 pt 和 dp 的虚拟单位，在你的设计中 10×10px 宽的元素在代码中被写为 10pt 或 10dp，而设备会自动根据屏幕的像素密度来解析，比如在 @2x 屏幕上用 20×20 个物理方框来显示它。

所以，这里的设置其实是为了解决历史遗留问题，如果你有一些设计图还是二倍图或三倍图，就可以用这个把它转化为 pt/dp 所需要的数值。所以这里当你选择了 @2x 它会把你的设计尺寸除以 2。**不过现在都 2020 年了，建议大家都使用一倍图做设计**。

![Zeplin 的像素密度设置](https://lc-kjcS77HU.cn-n1.lcfile.com/87a1609ff017556a2af7.jpg)

对于 Web，你写的单位 px 会被浏览器自动解析为对应的物理方块尺寸大小，它是屏幕像素密度无关的。在设置这里设置的也是「倍数」，也就是和 iOS、Android 反过来，选择了 2x 时会把你的设计尺寸乘以 2。这个其实没什么用，也就是在写小程序转换为 rpx 时有点用，不过有很多库可以把 px 转为 rpx 单位，比如 [px2rpx](https://www.npmjs.com/package/px2rpx)，所以也建议你使用一倍图做设计。

希望这个设置在以后可以被丢弃进历史长河中，更多细节可以查看[像素密度解密](https://intersection.tw/像素密度解密-630b3ac2e0bb)，以及[这个视频](https://vimeo.com/169809377)。

### 切图设置
切图这件事，我建议还是设计师自己来。在 Figma 右侧面板中有一个 Export 属性，你可以在那里添加 Export，每一个都会被 Handoff 识别到并按照你的设置导出。比如，按照下图中的设置会导出 `thumb-up-ios@3x.png` 和 `thumb-up.svg`（该图标命名为 thumb-up）。

![Export 设置](https://lc-kjcS77HU.cn-n1.lcfile.com/7465e850a808bfabe99f.jpg)

如果你想要快速给元素添加多个导出设置，比如 iOS 的 @1x/@2x/@3x/@4x，可以使用一些插件批量添加，比如这个 [Figgy exporter](https://www.figma.com/community/plugin/778302475291888898/Figgy-exporter)。

需要注意的是，Handoff 不会识别 Slice，Slice 可能是 Figma 为了兼容 Sketch 用户而做的，不太好用，所以还是建议使用 Export。

对于设计师特别烦的开发查看标注时总是会点到切图内部的问题，最近的一个更新可以设置不允许点到切图内部，在后文开发人员部分会详细说。

### clip content
Figma 的 Frame 有一个选项「clip content」，勾选之后可以隐藏超出的部分。这个选项常常会引起 Handoff 标注的错位，原因在于 Handoff 识别的是 Frame 自身的尺寸，但导出的图片是包含超出部分的，这样尺寸就对不上了。因此，我建议在设计时最外层 Frame 都勾选该选项，这样就不会错位了。

如下图，尽量不要出现左边这样内容超出 Frame 的现象，而右图最外层 Frame 本身带有投影什么的则没有关系。

![clip content](https://lc-kjcS77HU.cn-n1.lcfile.com/32610367dc6063426982.jpg)

### 样式及组件
Handoff 会自动识别本文件中所有的样式，显示在右侧，而组件可以在导出时选择是否导出组件列表。如果选择导出，就会生成一个组件列表在左侧。我建议在设计时把样式和组件单独放在某一个 page 内，这样就不需要单独导出组件列表了。

![单独的组件和样式 page](https://lc-kjcS77HU.cn-n1.lcfile.com/e2f194b65687e680b0a4.jpg)

目前，Handoff 还只能识别到当前文件内的样式和组件，如果你的样式和组件在单独的文件内，则需要单独将这个文件导出，目前还没有办法关联。

### 其它
Handoff 目前只会识别到第一层 Frame，也就是直接处于画布中的 Frame，因此在设计时请保持 Frame 都是直接处于画布中。

![识别不到的 Frame](https://lc-kjcS77HU.cn-n1.lcfile.com/e90b21d563d44d8e5e6b.jpg)

还有一个需要注意的，那就是有些设计师的元素只是看起来在 Frame 内部，实际上不在里面，这样识别出来的页面就是空白的。比如下图中，那些元素只是看起来在 home 这个 Frame 里面，实际上和它是同级的，需要拖拽到它的子级中。

![看起来在 Frame 里面](https://lc-kjcS77HU.cn-n1.lcfile.com/e1150303c3915d9af0db.jpg)

## 开发人员
### 画布操作及快捷键
Handoff 的操作主要集中于查看标注的画布中，目前支持的操作和快捷键如下：
- 两指捏放或滚动鼠标滚轮进行缩放
- 按住鼠标中键或空格键可以拖拽画布
- 按 Cmd +/- （Windows 下 Ctrl）放大缩小
- 按 ESC 可取消选择元素

![快捷键提示](https://lc-kjcS77HU.cn-n1.lcfile.com/f38ae38c02b05cf9ac37.jpg)

### 切图相关
Handoff 右侧面板中会显示所有切图，你可以单个下载也可以打包下载。如果查看的标注是本地文件，也就是直接双击 index.html 文件打开时，点击切图不是下载而是查看文件，你可以在解压后的文件夹内 data/exports 里面看到所有切图。如果你[使用一些工具将标注文件开启为静态网页服务](https://mp.weixin.qq.com/s/_IIVnhJiMUAWhnRBfhoh5A)，切图这里仍然是可以下载的。

![右侧的切图](https://lc-kjcS77HU.cn-n1.lcfile.com/a0bed3e4cf899aba58e6.jpg)

当你在查看某一个页面的标注时，可以选中最外层，这时候在右侧会显示当前所有的切图。需要注意的是，设计师最好不要在最下面放一个同样大小的背景矩形，否则你选择到的就不是最外层，而是这个背景。

![当前页切图](https://lc-kjcS77HU.cn-n1.lcfile.com/ffae6f77606fabb40f70.jpg)

在设置中，有一个「不允许选中切图（Export）内部图层」的选项。一般切图会作为一个整体，写代码的时候也需要写它的最外部尺寸，但有时候容易点到内部元素，导致查看到的尺寸不对。这时候我们就可以勾选这个选项，这样看到的尺寸就是切图外层的尺寸。

![不允许选中切图（Export）内部图层](https://lc-kjcS77HU.cn-n1.lcfile.com/bfd18167f90211164fea.png)

需要注意的是，当你更改这个选项之后还看不到效果，需要在左边切换一下 Frame 才可以生效。

### 多样式文本
多样式文本在产品设计中很常见，比如一段文字里面有一个链接，链接的颜色和其他文字不一样。在 Handoff 中我设计了一种比较方便的方式来查看多样式文本，右侧文本框内的文字会被自动分段，点击对应的片段就可以获取分段文字的样式，而双击文字片段会复制这个片段的文字。

![多样式文本](https://lc-kjcS77HU.cn-n1.lcfile.com/32cb4abe0ed6405d54b8.jpg)

以上就是我对于 Juuust Handoff 的使用说明，如果你有任何使用问题可以在下面留言，反馈 bug 或需求可以前往 [GitHub issues](https://github.com/leadream/figma-handoff/issues) 提新的 issue。

## 一些链接：
- 介绍页面：https://figmacn.com/handoff-landing
- 插件：https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff
- 在线版：https://figmacn.com/handoff/


从设计到交付到开发，Juuust Handoff 食用说明

来自 Figma 官方的 Auto Layout 入门教程。

![](https://player.bilibili.com/player.html?aid=81128946&cid=138847088&page=1)


通过自动布局，按钮可以通过调整文本来控制大小，列表可以通过简单地拖动项目来重新排列，当你添加或删除内容时，外部容器也会变大或缩小。

当使用真实数据进行设计时，比如使用[谷歌 Sheets Sync 插件](https://www.figma.com/c/plugin/735770583268406934/Google-Sheets-Sync)时，所有的自动布局元素都会立即根据文字内容自动伸缩，为你节省大量时间。

- 本视频中用到的文件：https://www.figma.com/community/file/842917001273016668
- Google Docs 数据：http://bit.ly/2ORlJLc
- 学习使用自动布局：https://help.figma.com/article/453-auto-layout
- 博文：https://www.figma.com/blog/announcing-auto-layout/
- 原视频：https://www.youtube.com/watch?v=NrKX46DzkGQ

## 时间戳:

- 0:22 演示开始
- 0:34 创建按钮与自动布局
- 1:02 当内容改变时，动态调整大小
- 1:46 通过复制将多个自动布局框架嵌套在另一个自动布局框架内
- 2:12 方向属性
- 2:49 重新排序一个自动布局框架的子节点
- 3:34 从多个对象创建自动布局框架
- 4:17 文本自动调整大小
- 5:02 添加对象到自动布局框架
- 5:26 使用命令/控制的深度嵌套
- 6:01 自动宽度/高度和固定宽度/高度
- 6:17 自动布局组件
- 6:44 滚动自动布局框架
- 7:36 添加真实的数据到我们的设计，使自动布局框架自适应



Auto Layout 入门教程

你是不是一开始接触 Figma 就被字体劝退了？是不是怎么样都打不出中文？找不到中文字体？没关系，草帽大神录了个视频，给你亲自讲解 Figma 中字体的各种问题，以及如何快速找到中文字体。你可以配合这个[常用字体中英文名称对照](http://www.zhangxinxu.com/study/201703/font-family-chinese-english.html)使用。

话不多说，咱们视频见：

![](https://player.bilibili.com/player.html?aid=68286883&cid=118358592&page=1)

草帽还制作了一个字体精选库：

<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%2Ffs0u38muDn43VtpYApX9zgS7%2F_%25E8%25B6%2585%25E8%2583%25BD%25E5%25AD%2597%25E5%25BA%2593%3Fnode-id%3D0%253A2" allowfullscreen></iframe></div>



Figma 中文字体安装和使用 - 所有问题给你整的明明白白

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。

**请欣赏视频**

![](https://player.bilibili.com/player.html?aid=45534233&cid=80679005&page=5)



Figma 教学 05 | 交互原型连起来

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。

**请欣赏视频**

![](https://player.bilibili.com/player.html?aid=45534233&cid=80677653&page=3)



Figma 教学 04 | 用设计规范临摹 APP（下）

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。

![](https://player.bilibili.com/player.html?aid=45534233&cid=80677653&page=3)



Figma 教学 03 | 用设计规范临摹 APP（上）

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。

![](https://player.bilibili.com/player.html?aid=45534233&cid=80677653&page=2)



Figma 教学 02 | 先做个设计规范

这是设计师 [lijxse](https://weibo.com/lijxse) 自制的系列视频教程，很详细，还有各种小 tips。

这一节是基础功能介绍。

![](https://player.bilibili.com/player.html?aid=45534233&cid=80677653&page=1)



Figma 教学 01 | 基础介绍

在 Figma 中可以使用 group（组）或 frame（画框）来组织元素，但它们又有一些不同。合理地选择如何使用它们，能够帮助我们更好地设计。

本文来自 Figma 官方博客，由卓浩翻译。

如何选择 group（组）或 frame（画框）？

这是来自于阅文集团 YUX 的一篇文章，主要介绍了他们在日常使用 Figma 时使用的几款插件。

>Figma 至今已上线有两百多款各种功能与特色的插件，可以帮助设计师快速完成填充数据、创建元素、整理图层、检查可用性等工作，进一步提升设计生产效率。

文章推荐的几款插件都非常实用，开篇还介绍了一个可以在 Figma 中玩游戏的[插件](https://www.figma.com/c/plugin/749261072790710247/Multiplayer-Pong)。

![Multiplayer-Pong](https://lc-kjcS77HU.cn-n1.lcfile.com/36152b803d0c161ab043.gif)

让你的 Figma 更好用的秘密

这是小红书 UED 的一篇文章，可以说是一份比较综合的 Figma 上手指南。不仅讲了和 Sketch 相比的优缺点，也从实际经验讲解了如何使用 Figma 的组件和样式以及协作、交付。

Figma 最重要的特点就是基于 Web，而随着云计算基础设施越来越好，加上 5G 的铺开，设计工具的 Web 化会成为趋势。但是，由于我们以往对 Web 的感觉是性能不够强大，总觉得在 Web 上做设计会没有脚踏实地的安全感。可是 Figma 会让你完全打消疑虑，它甚至比本地应用 Sketch 还要流畅。

![设计工具的 Web 化会成为趋势](https://lc-kjcS77HU.cn-n1.lcfile.com/538c538de08cea28a0ae.jpg)

而基于 Web 让 Figma 的优点更加突出：
- 易于分享，一个链接就是一切
- 自带标注交付工具
- 没有本地多处存储的分裂与不统一
- 团队内外协作更加方便
- 可以直接嵌入文档

Figma 还有一些特性，会让设计更加高效：
- 一个锚点可以连接出多条边（不止两条），作图更方便
![一个锚点可以连接出多条边](https://lc-kjcS77HU.cn-n1.lcfile.com/3c1addbeecbf8fb9ecf5.gif)
- 智能排版可以快速调整图层
![智能排版](https://lc-kjcS77HU.cn-n1.lcfile.com/9e0e84ac7b5ad1bbaaa6.gif)
- Google Fonts 免去安装字体的烦恼
![Google Fonts](https://lc-kjcS77HU.cn-n1.lcfile.com/0ef81e39c91dc4825a44.gif)

文章中还讲了 Figma 的组件思维，共享样式，以及和 Sketch 对比的优势。看完之后，你会对 Figma 有更加清晰的认识，也会知道这款设计工具会不会适合你。

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

这是来自阅文体验设计 YUX 的一篇 Figma 最佳实践文章。

作者主要讲述了阅文海外项目 Webnovel 迁移到 Figma 半年多时间里的一些经验，并对比了 Figma 和 Sketch 的一些优缺点。主要内容为：

- Figma 介绍：以为是个青铜结果是个王者
- Figma 与 Sketch
- 封闭与开放
- Figma 组件化实践
- 缺点以及 Figma 值得使用吗？

Figma 适不适合你自己，或者你的团队，相信看完这篇文章就有了答案。

Figma 实践：以为是个青铜结果是个王者

该文章作者过去一年我在自己的 UI/UX 工作流程中都一直使用 Figma，**它几乎能够覆盖从线框图、设计、设计系统构建、交互原型到协作的整个设计工作流程**。

在传统的工作方式中，作者的工作流程需要在多个软件中来回切换。

![传统的工作模式](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/mYb9bu3xfYJuJBpd-0.webp)

而用了 Figma 之后，作者所使用的工具大大减少，Figma 给她节省了很多时间。

![新的工作模式](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/ArEwrJiaMq-FNx-8-newFlow.webp)





入门前得看看