在 Figma 中设计时间长了，里面的组件和样式肯定会非常多。在 Figma 中管理组件还好，但是样式只能在右侧面板中进行排序、重命名、调整，就显得比较局促。

为了弥补这个不足，有些人就做了一些插件。[Design System Organizer](https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer) 是最早的一个，你可以直接在 Figma 中打开它，在里面给组件或样式分组、重命名，支持批量操作。

![Design System Organizer](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-25/WVFqppSHe6U-4Y9B-2f65d527-6c0d-4bdd-b5b5-c1f3f69a0b8f-cover.gif)

Design System Organizer 目前可以免费试用 30 天，试用结束需要花 $2.99 元购买，可以前往他们的[购买页面](https://gumroad.com/l/dsoplugin)查看。

还有一个插件叫做 [Figma Manager](https://figmamanager.com/)，功能类似，但是看起来更强大一些，支持直接调整样式属性值。

![Figma Manager](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-25/bVqnVHVvWcg923zG-videoScreen.png)

这个就比较贵了，$24 一年，不过也可以免费试用。

- Design System Organizer：https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer
- Figma Manager：https://figmamanager.com





Figma 设计系统管理插件

草帽录制了一期关于 Mac 和 Windows 系统协作时字体不一致的问题，欢迎观赏：

![](https://player.bilibili.com/player.html?aid=457829455&bvid=BV1m5411V7F9&cid=258568511&page=1)



多人编辑时的字体问题，不要苹方、不要微软雅黑

万众期待的 Auto Layout 终于发布啦！新的 Auto Layout 几乎是重构了以前的功能设计，更加强大也更加灵活了。可以说，新版 Auto Layout 是在设计工具中实现了一个 [CSS Flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) 可视化编辑。

![Auto Layout 3.0](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-20/F2JUgSkYSAYkTxvQ-08zYzHNh1wtuxve1.mp4)

> 视频来源：https://twitter.com/figmadesign/status/1329455521355730945



下面，我给大家汇总一下这次更新带来的功能。

- 独立的四个方向内边距
- 更灵活的对齐方式
- 元素 Rezing 和 Constraints

## 独立的四个方向内边距

之前的 Auto Layout 元素内边距只能分别定义水平和垂直方向上的，如果你想实现左边 10px 右边 2px 这种是不行的。但是现在四个方向的内边距都可以单独定义啦。

点击右边的图标，就可以单独填写四个内边距啦，按 Tab 键还可以快速跳到下一个输入框。

![独立内边距](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/ssrD1WVr5956UlAa-image.png)

在外面的输入框中还可以输入逗号分隔的数字来快速定义四个方向的内边距，其顺序是按照上右下左顺时针走的，和 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 简写一样。比如 `8,10,8,10` 就可以设置上下为 8px 左右为 10px 的内边距。

![快速设置内边距](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/OYzju0hL1zu9pbkC-image.png)

## 更灵活的对齐方式

伴随着独立内边距一起的，是对齐方式的更新。以前 Auto Layout 内元素的对齐方式是在内部元素身上控制的，现在所有的对齐控制都从父元素控制（不能使用方向键快速切换元素的对齐方式了）。

在设置独立内边距的面板中间就是设置对齐方式的地方，这些图标含义很清晰，可以直接选取你需要的对齐方式。

![设置对齐方式](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/z6JtoLkag20-TRbi-image.png)

值得一提的是，我们还可以设置元素是抱在一团还是平均分布，如果抱团就是上图的效果，元素挤在一起，如果选择了 space between，元素会被自动分开，中间的间距是自动变化的，保持它们平均分布在一条线上。

![元素抱团还是分开](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/NGVAcNaL9sl_gb8D-image.png)

## 元素 Rezing 和 Constraints

现在 Auto Layout 元素多了一个 Rezing 控制，主要用来控制元素尺寸变化行为。以前 Auto Layout 元素尺寸随着内部元素变化而变化，现在更灵活了，我们既可以靠内部元素撑开父元素，也可以让父元素控制内部。

如下图，我们设置外部容器宽度固定，高度 Hug Content，也就是「适应内容」，那么当我们修改内部元素时它的宽度不会变，而高度会随着内部元素被撑高或缩小。

![Rezing](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/S1ZN6Qx4O14_-JWe-image.png)

对于内部元素来说，我们除了可以设置「固定宽高」和「适应内容」，还可以设置填满整个容器。比如下图，我们想让左边头像固定大小，右边文字自动填满剩余空间，就可以设置它为 Fill Container。

![fill container](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/Wd01cfRDIJAP-pjp-image.png)

更厉害的是，现在的 Auto Layout 和 Constraints 可以结合使用啦。如果你把一个 Auto Layout 放在一个普通 Frame 内部，可以给它设置响应式约束，比如下图中让卡片左右跟随屏幕宽度变化拉伸，同时又可以保持自己的自动布局特性。

![Rezing and Constraints](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-19/7Aj_d6q_t1OvbZ0J-image.png)

总的来说，新的 Auto Layout 非常强大了，基本上各种效果都可以实现了，我们再也不用一层层嵌套了。

如果你想了解更详细的内容，可以查看帮助文档和示例文件：

- [帮助文档](https://help.figma.com/hc/en-us/articles/360040451373)
- [Auto Layout 使用说明](https://www.figma.com/community/file/784448220678228461)
- [Auto Layout 使用说明中文版](https://www.figma.com/community/file/911267393900607489)
- [介绍博文](https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/)

更详细的细节让我们看这个叫做超能铜草帽的男人录制的最新讲解视频吧。

![草帽的介绍视频](https://player.bilibili.com/player.html?aid=245354944&bvid=BV1Uv411r7iD&cid=257618428&page=1)



Figma Auto Layout 3.0 终于发布啦！更新草帽的视频讲解

在 [Figma Config Europe](https://figmacn.com/article/figma-config-europe-new-features) 上介绍的组件变体功能上线啦！虽然大家更期待更强大的 Auto Layout，但是这个功能也是非常棒的。

组件变体是一个接近代码的概念，大概就是你可以将一些组件编组，然后它们的区别就可以被识别为不同的属性，你就可以通过这些属性来快速切换组件形态。比如一个 Switch 开关组件，在之前我们需要做两个状态：一个开一个关，现在我们可以把它变成一个，然后再面板中控制开关。

## 组件变体示例

我来用一个小例子讲解一下。首先我们做两个开关状态的组件，并选中它们，在右边就会出现一个组合为变体（Combine as Variants）的按钮。

![Switch 组件](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/JXYD8saUiexC-4Fd-fcda2559f6c9cc98c168.png)

因为我给这两个组件的命名是 `switch/on`和`switch/off`，所以它可以识别出一个属性，它有两个可选项：`on`和`off`，我们把它的属性名改为 `value`。

![识别到属性名](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/J_8pWScuFE8NhA7X-a18da1bce6af5d5a6413.png)
这时候，这两个组件就变成一个变体组件了，它的结构如下图左边图层列表所示。

![组件变体](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/y3AM3SvNlFE3L9UY-7c11618748b186d4b3ea.png)

在使用时，我们看到只有一个组件了，把它拖拽到画布中，在右侧面板中，就可以通过刚才设置的属性 `value` 来控制（`on/off` 会被识别为一个开关，其它的属性变化可能会被识别为输入框、下拉选择等）。

![使用组件](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-15/qag2g3P5c7Bj8Vh0-b19f1aecea6e2d33b38a.png)

## 更多

组件变体很强大，上面的例子只是最简单的一个，你还可以看下面的内容来深入学习。

- 官方教程：https://www.figma.com/community/file/903303571898472063
- 最佳实践：https://www.figma.com/best-practices/creating-and-organizing-variants/
- 博文介绍：https://www.figma.com/blog/bridging-design-and-code-with-variants/

更多细致的讲解，让我们一起欣赏那个叫做「草帽」的男人录制视频吧。

![](https://player.bilibili.com/player.html?aid=287532165&bvid=BV1Qf4y1B7LZ&cid=250776023&page=1)



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 如何收费？

Figma 以团队->项目->文件的结构来进行组织，其中“团队”分为**基础版、专业版和组织版，其中基础版免费**。* 基础版团队免费但只能有 3 个项目 2 个编辑者且历史记录只保存 30 天（文件永久保存），**可跨文件共享样式**；

* 专业版团队每个编辑者每月 $15（按年付 $12*12=$144），无限项目，自定义权限控制，**可跨文件共享组件**；
* 组织版团队每个编辑者每月 $45，除了专业版权益以外，还有私有插件、设计系统统计等高级功能。

举个例子，你同时创建了一个基础版团队和一个专业版团队，在基础版团队内可以最多有两个编辑者，而专业版团队内每增加一个编辑者要多付 $15（按年付 $144）。除此之外，Figma 还有[免费的教育计划](https://www.figma.com/education/)，更多其它细节详见[帮助文档](https://help.figma.com/article/209-figma-plans)
**以我的经验来看，免费的基础版足够前期使用了，等功能都熟悉了再付费使用。至于盗版，你舍得花钱买课舍不得花钱买软件？**

## Figma 在哪下载呢？

你可以去[这里](https://www.figma.com/downloads/)下载客户端，但是我仍然建议你使用 Web 版，无需下载并且非常顺滑。

## 有中文汉化版吗？

没有。其实大部分单词都不难，多用用就熟悉了。此外这也是学习英语的一个好机会，对设计师职业发展好处多多，而且英语不应该成为你的阻碍。

## Figma 要怎么入门呢？

推荐你观看[官方视频](https://www.figmacn.com/post/official-videos)和[超能铜草帽的视频](https://space.bilibili.com/108104104/)，然后上手练习。我还写过一篇[学习资源汇总](https://www.figmacn.com/post/figma-tutorial-and-resources)，可以参考参考。

## 为什么不支持中文输入呢？

其实是支持的，因为默认是一个英文字体，你只需要切换为一个中文字体就可以了。目前 Figma 字体列表这里显示的都还是英文，你可以手动输入 PingFang SC 或者 Noto Sans SC。

如果你使用的是 Web 端，可以安装一下 [Font Installer](https://www.figma.com/downloads/)，这样就可以使用本地字体了。推荐看一下[草帽的这个视频](https://www.figmacn.com/post/figma-font-why-and-how)，以后遇到字体问题就不怕了。

## Figma 怎么在手机预览效果呢？

去[这里](https://www.figma.com/downloads/)可以下载 Figma Mirror，你也可以直接在手机浏览器输入 [Figma.com/mirror](https://figma.com/mirror)，然后在电脑上选一个 Frame，就可以预览了。

## Figma 有哪些神奇的技巧？

Figma 有太多神细节和神技巧了。推荐你观看一下[这个视频](https://www.figmacn.com/post/figma-tips-tricks-superpower-your-workflow)，可以大大提高效率。此外还可以看一下[草帽的花式技巧视频](https://www.figmacn.com/post/figma-tips-and-tricks)和[Figma 独门秘笈](https://www.ifigma.design/)，以及我这个 [Figma 神奇的细节和技巧](https://space.bilibili.com/336488122/channel/detail?cid=98010)。

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

## 有没有 Figma 快捷键汇总？

有的，请看[这里](https://www.figmacn.com/post/all-figma-shortcuts)。

## 有没有 Figma 最佳实践？

我之前翻译过几篇，还有一些国内团队的实践心得：

* [使用 Figma 完成产品设计工作流](https://www.figmacn.com/post/juns-figma-workflow)
* [Figma 最佳实践（上）](https://www.figmacn.com/post/best-practice-1)
* [Figma 最佳实践（下）](https://www.figmacn.com/post/best-practice-2)
* [如何选择 group（组）或 frame（画框）？](https://www.figmacn.com/post/group-and-frame)
* [Figma 实践：以为是个青铜结果是个王者](https://www.figmacn.com/post/yux-figma-practice)
* [首先，你知道什么是 Figma 吧？](https://www.figmacn.com/post/figma-comprehensive-guide-by-red-ued)
* [最全的 Sketch 转 Figma 指南！](https://www.figmacn.com/post/sketch-to-figma-guide)

## Figma 有哪些好用的插件？

官方的[插件列表](https://www.figma.com/community?tab=plugins)可以看一下，此外也可以看一下[这个用户整理的一份插件列表](https://www.figmacn.com/post/recommended-figma-pugins)。不过 Figma 不安装插件已经很强大了，如无必要不用安装一堆插件。

## Figma 与 Sketch 相比有哪些优势？

好看、顺滑、符合直觉的组件机制以及云端统一文件管理，总的来说 Figma 是真正为设计师而做的产品，让你可以专心于设计本身而无需关心其他问题。目前唯一的问题可能是网络，但我觉得对一个追求上进的设计师来说这不算问题。

## Sketch 用户如何转向 Figma？

可以直接导入 Sketch 文件，但有可能会错乱，需要对文件稍作修改。有几篇文章可以看看：

- [最全的 Sketch 转 Figma 指南！](https://figmacn.com/post/sketch-to-figma-guide)
- [从 Sketch 转到 Figma](https://figmacn.com/post/figma-official-coming-from-sketch)
- [想从Sketch 切换到 Figma？送你一份详细的过渡指南！](https://figmacn.com/post/from-sketch-to-figma)
- [Figma 和 Sketch 组件（Symbol）对比](https://figmacn.com/post/figma-component-vs-sketch-symbol)



Figma 常见问题

Figma 一直特别注重用户的感受，可以说他们做的功能都是从用户中来到用户中去，所以他们也一直特别注重用户社区和关系的建设。
  
今年二月份 Figma 举办了[第一届 Config](https://mp.weixin.qq.com/s/1yPC3eCP26XogxY5uur3tQ)，而最近，Figma 举办了[第二届 Config Europe](https://www.figma.com/blog/config-europe-2020-new-feature-announcements/)，主题是**让设计和代码连接更紧密**。

在这次大会上，Figma 也针对这个主题预告了一些新特性：**组件变体、组件变换菜单、交互式组件、Auto Layout 大更新和开发者面板**。用一些朋友的话来说，这次大会看得比苹果发布会还要激动。

![本次大会预告的新特性](https://lc-kjcS77HU.cn-n1.lcfile.com/637d87952e603c673ca5.jpg)

目前这五个特性已经上线两个，关于它们的详细讲解请看：https://mp.weixin.qq.com/s/-xcDU5Q0c0-AMj8NNcCgZQ

其他相关链接：
- 目前大会的开场回顾视频（CEO 介绍新特性）：https://www.youtube.com/watch?v=lWy4fB3G9Gc
- Config 大会主页：[https://config.figma.com/](https://config.figma.com/)
- 关于这次大会的博文：[https://www.figma.com/blog/config-europe-2020-new-feature-announcements/](https://www.figma.com/blog/config-europe-2020-new-feature-announcements/)
- Config Europe Remixes：[https://www.figma.com/community/file/886112145900829499](https://www.figma.com/community/file/886112145900829499)


Figma Config 又给我们带来了什么新特性？

Chakra（查克拉？）UI 是一个开源的组件库，包含了常用的各种组件，还支持自定义，默认支持 dark mode。它的设计应该来源于 [Tailwind](https://tailwindcss.com/docs/box-shadow/)，偏中性柔和，即使是不会设计的人也可以搭建还不错的界面。

最近我正在使用它开发项目，整体感受是可以少写很多样式，反馈问题响应也很快，如果你正在使用 React，可以考虑使用这个组件库。

- 官网：https://chakra-ui.com/
- GitHub 地址：https://github.com/chakra-ui/chakra-ui

![Chakra UI，非常好用的组件库](https://lc-kjcS77HU.cn-n1.lcfile.com/52fdf556bcf2e5892649.png)

Chakra UI，非常好用的组件库

就在刚刚，Figma 原型支持了多事件交互和自定义曲线，对于使用 Figma 来做交互稿和动效的朋友来说可谓雪中送炭。

**多事件交互**：之前一个元素只能连一根线到其它元素，所以像一个列表点击进入详情，左滑删除这种效果就做不出来，现在一个元素可以支持多个事件并存，可以做出更加丰富的效果了。

**自定义曲线**：Smart Animate 可以帮你做出非常细腻的动画，但是动画曲线只有预置的几个，现在你可以自定义曲线啦，做出更加细腻的动画。

请看大屏幕：

![多事件交互和自定义曲线](https://lc-kjcS77HU.cn-n1.lcfile.com/55842ce31348261824f7.mp4)

![大更新](https://lc-kjcS77HU.cn-n1.lcfile.com/c210583a2cd87517132c.png)

- 推特原文：https://twitter.com/figmadesign/status/1291402217132396545
- 自定义曲线教程：https://www.youtube.com/watch?v=cAkOH9uaXHA&feature=youtu.be



原型功能大更新，多事件交互和自定义曲线！

以前推荐过使用 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 插件的网站

这篇文章算是比较实战的，作者主要分享了他们团队使用 Figma 构建组件库的经验，主要针对 toB 场景。文章主要从主题样式、基础组件、框架模式、拓展控件、通用模板、规范映射表几个模块进行讲解，无论对于想使用 Figma 构建组件库的新手，还是对想要提高设计效率的老手都非常有帮助。

非常贴心的是，作者还整理了一份相关资源和模板，值得一看。

[https://www.figma.com/file/mMYDONBcxYAdEcwjb5jKlj/如何利用Figma创建组件库](https://www.figma.com/file/mMYDONBcxYAdEcwjb5jKlj/如何利用Figma创建组件库)

![如何利用 Figma 构建组件库](https://lc-kjcS77HU.cn-n1.lcfile.com/359673014b863bdb2e1d.png)


如何利用 Figma 构建组件库

Arrow Auto 是一个可以帮你快速创建 Frame 之间连线的插件，创建后可以锁定连线，也可以在移动 Frame 之后更新位置。

请看大屏幕：

<video controls src="https://lc-kjcS77HU.cn-n1.lcfile.com/31b3f748905f428647f9.mp4"></video>

Arrow Auto，快速创建连线

在 CSS 中投影支持 x、y 轴坐标偏移，模糊（Blur），和扩大收缩值（Spread），在设计中我们也熟悉了设置这些值来实现各种各样的效果，但是由于 Figma 采用的是 [Canvas](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial) 技术，而 [Canvas 中绘制阴影本身不支持 Spread 属性](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#%E9%98%B4%E5%BD%B1_Shadows)，所以一直以来 Figma 也不支持。

但是这个属性设计师会经常使用，有了它就可以做出很多效果。现在，Figma 自己实现了这个投影属性，还做了不少优化，你可以使用它来做更多事情了。贴心的 Figma 还给出了一个官方文件示例，可以快速把玩一下。

博文：https://www.figma.com/blog/behind-the-feature-shadow-spread/

![阴影支持 spread 属性及其玩法](https://lc-kjcS77HU.cn-n1.lcfile.com/f9ee25249c72efaff962.png)


阴影支持 spread 属性及其玩法

之前发布过 [远程设计冲刺模板中文版](https://figmacn.com/resource/Remote-Design-Sprinting-Chinese-Version) 的 [iFREEGROUP](https://www.figma.com/@iFREE) 又发布了一个响应式组件模板。

这个文件中的组件都是使用 Auto Layout 制作的，覆盖了很多使用场景，包括：备忘录、弹出窗口和下拉菜单、表单、卡片、时间轴

- 更多的细节可以参考：https://ifreegroup.design/responsive-component-with-auto-layout
- 作者主页：figma.com/@Nefi

![Auto Layout 响应式小组件](https://lc-kjcS77HU.cn-n1.lcfile.com/55f95494ab087ecd5b22.png)

Auto Layout 响应式小组件

今年疫情期间，很多设计师都远程工作了，使用合适的工具，可以有效提升远程工作效率。之前我曾推荐过一个[远程设计冲刺模板](https://figmacn.com/resource/remote-design-sprinting-kit)

现在 [Sasha Johnson](https://figma.com/@sashaJ) 和 [Clu](https://twitter.com/designedbyclu) 在征得原作者同意后，将其翻译为中文版，希望可以给母语为中文的用户一些帮助。用得上的朋友可以过去给加个 💖 呀！

原模版链接(Original)：https://www.figma.com/community/file/822141660209426062/Remote-Design-Sprinting-(RDS)

![远程设计冲刺模板中文版](https://lc-kjcS77HU.cn-n1.lcfile.com/d4f8f0c3a2a600da9884.png)

远程设计冲刺模板中文版

这算是网上更新最频繁的 Figma iOS 14 UI Kit 了。

一开始这个文件中的组件使用了响应式约束（Constraints）、自动布局（Auto layout），可以使用内部 instance 交换。Figma 更新了 Variants 和 Auto Layout 3.0 之后，作者又立即使用这些新特性更新了组件库。如果你想快速构建 iOS 应用，可以使用这个组件库。

- 作者：[Joey Banks](https://twitter.com/joeyabanks)
- 设备模型来自于 [@FacebookDesign](facebook.design/devices)

![iOS 14 UI Kit for Figma](https://lc-kjcS77HU.cn-n1.lcfile.com/b444c710e65927e167c1.png)



iOS 14 UI Kit for Figma

这是一个非常简单易用的插件，可以帮助你快速创建 2.5D 图形。

Figma 其实支持图形的 3D 变换、斜切什么的，但是没有相关的功能。SkewDat 插件就可以帮你快速实现图形的变换，只需要拖拽几下，就能实时看到效果。

插件功能:

- 实时预览效果
- 一次调整多个对象
- 恢复到原来的状态

![2.5D 图形绘制插件 SkewDat](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-22/0s1CXWkqQUkpoEMD-3d95526c7d9d0b85f31c.png)



2.5D 图形绘制插件 SkewDat

Figma 中最重要的一个概念就是 Frame，它是一个比 Group 更好用的东西。如果你还不了解它，还在使用 Group 和蒙版做设计，那你就白用 Figma 了。

- Frame 和 Group 的区别：https://mp.weixin.qq.com/s/FsuuJBXr3es9D2Yg-NZP9g
- 本视频文件：https://www.figma.com/file/Hw1nGIGdYEExnFfQZ9uKrt/Bilibili?node-id=8%3A14

请欣赏视频：

![](//player.bilibili.com/player.html?aid=243783101&bvid=BV1Tv411z7bw&cid=211639499&page=1)



多用 Frame，不然 Figma 白用了

这个插件可以帮助你快速生成一个文件封面，包括文件名、日期及版本，方便在众多文件中快速查找。

![Quick Thumbnail](https://6678-fx-2g8sb0jud25ff34e-1255718578.tcb.qcloud.la/cloudbase-cms/upload/2020-11-22/_rJkwt80TLOccvqr-7d6864983fd336147c88.png)

## 使用步骤

- 选择一个你喜欢的表情。
- 选择一个你喜欢的背景颜色。
- 单击“完成”按钮。
- 我们将创建一个「Thumbnail」页面，右击并选择「Set as thumbnail」即可设置它为缩略图。



快速生成一个好看的文件封面

Figma 本身自带选择相似属性图层的功能，但是只能选择那么几种属性可选。

![Figma 自带的选择相似图层功能](https://lc-kjcS77HU.cn-n1.lcfile.com/89ee61ea3c031e70fc2a.png)

而这个插件扩展了内置功能，你可以通过它选择具有相同属性的图层，还可以组合使用。比如说，导入一个 Sketch 文件之后，我想选中所有 Slice 图层，并把它们删掉，就可以用这个插件。

使用方法也很简单，选择一个图层后，直接运行这个插件来选择所有其他基于特定属性的图层。

![Similayer](https://lc-kjcS77HU.cn-n1.lcfile.com/55ebf3543eedcf97e0a0.png)

## 常见用例:
- 选择一个特定组件的所有实例，用另一个替换
- 选中所有与特定的文本样式一样的图层
- 选择所有具有相同角半径和填充颜色的”卡片“

Figma Jobs

更多

所有文章