OK，咱们开始吧。以一个PC端的应用界面为例。
在本文中，我们在创建样式的同时，会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。
0.常量样式
重要的是要注意，在为明暗模式选择颜色时，颜色会略有不同。但是，某些中性颜色风格是不变的，在任何一种模式下都不会改变。在Figma Design System中，我们选择了白色和黑色作为固定颜色，无论您使用哪种模式，该颜色都将保持不变。另外，图像占位符的颜色也是恒定的，不会改变。
例如，在上图中，我们展示了该按钮在浅色和深色主题中的外观。图标，文本和计数器具有恒定的颜色。按钮的背景有变化，但其中的内容未更改。
1.可变样式
可变的颜色样式分别适用于亮和暗模式，并且它们都可以进一步细分为两个主要类别-颜色样式和效果样式。出于本文的目的，我们将主要讨论“亮”模式，并且在将这些步骤应用于“暗”模式时也稍作介绍。
1.1颜色样式-灰度样式
灰度颜色是可更改的样式，因为在黑暗模式下应用相同的颜色时时，您将不会获得与在明亮模式下相同的效果。这是因为，在黑暗模式下，背景已经完全为黑色，此时在黑色背景上使用100透明度的灰度颜色时，你的颜色会完全不可见。
将灰度颜色从“浅”模式切换为“暗”模式时，建议您使用白色（#FFFFFF）并在灰度上应用90％，70％，40％和10％的透明度效果，这将在应用于“深色模式”时提供很好的平滑过渡效果。
所以在此设计系统的亮色模式时，我们特别选择以下颜色：
· 100（＃1C1C1C）-主要用于标题和粗体文本。
· 200（＃585757）-主要用于正文。
· 300（＃969696）-用于小文本和填充图标。
· 400（＃E8E8E8）-用于较小的细节，例如边框，分隔线和线条颜色。
请注意，我们仅根据自己的喜好将所有四种灰度颜色分别命名为100、200、300和400，它们与任何规则都不相关，您可以根据需要命名灰度颜色。
1.2 系统颜色
系统颜色（也称为基础色）是你项目的主要颜色。我们建议您选择温暖和亲切的颜色，但是在某些情况下，选择调色板时，您可能需要考虑品牌的颜色，这将成为设计系统的一部分。
例如，在此设计系统中，原色是分别应用于这两种模式的蓝色，绿色，橙色和红色。每个原色由两种不同的颜色对比组成，第一个由较浅版本的原色组成，第二个类别由较暗版本的原色组成。如下图：
要创建较浅和较深的基础色，您需要在其之上添加20％，40％
Figma 本身自带选择相似属性图层的功能，但是只能选择那么几种属性可选。
而这个插件扩展了内置功能，你可以通过它选择具有相同属性的图层，还可以组合使用。比如说，导入一个 Sketch 文件之后，我想选中所有 Slice 图层，并把它们删掉，就可以用这个插件。
使用方法也很简单，选择一个图层后，直接运行这个插件来选择所有其他基于特定属性的图层。
常见用例:
- 选择一个特定组件的所有实例，用另一个替换
- 选中所有与特定的文本样式一样的图层
- 选择所有具有相同角半径和填充颜色的”卡片“
官方出马，制作了一系列教程来讲解最新的 Auto Layout，帮助你学会如何制作复杂自动布局的设计。
提示：可以开启自动翻译字幕观看
第一集：制作一个自动布局按钮
https://www.youtube.com/watch?v=PNJxeD29ZTg
第二集：制作一个自动布局顶栏
https://www.youtube.com/watch?v=bh98SF7OjUk
教程文件：
图标是大家都非常熟悉的东西，但是绘制图标并且最终交付给开发却有很多细节需要注意，这篇文章就写了在做一套图标系统时需要注意的地方，包括：
- 把图标画在相同大小的 Frame 中
- 注意调整 icon 的视觉平衡
- 把图标做成组件，方便快速替换
- 设置好 icon 的 constraints，保证拉伸不变形
- 内部图形记得布尔合并，以便替换时能够自动保持颜色，并且导出的 SVG 代码更干净
我一直都很喜欢设计工具 Figma 的愿景：Make design accessible to everyone。一直以来设计都是一件「看起来很专业」的事，这一点从设计师们使用的工具就可以看出来。就拿 Photoshop 来说，复杂的操控界面和对设备较高的性能要求都会让大多数人望而生畏，可现实中，除了设计师以外很多人也偶尔需要去做一些简单的设计。
Figma 降低了大多数人走入设计的门槛，你不需要多好的设备，只要电脑安装了浏览器，注册个账号就可以去设计。它的界面也足够简洁，并且操作都十分符合直觉，即使新手也能很快学会基础操作。
不过，软件的操作只是设计最基楚的部分，对于非设计师来说，最难的是审美意识的提高。在 Figma 的网站上有一个设计通识课，如果你不是一个设计师，它可以帮你了解一些设计的常识，比如色彩、排版。
有了基本的设计通识，提升设计技能最好的办法是从其他设计师那里学习，而我今天要介绍的 Figma 社区，就是这样一个地方。
社区简介
Figma 社区从去年十月份开始内测，简单来说，就是设计师可以将自己的 Figma 文件直接发布到社区，发布的源文件采用 CC BY 4.0 协议，其他设计师可以基于此自由创作，甚至商业使用，只要你对作品按照作者要求的方式进行署名。它有点像 Dribbble 这种展示设计作品的网站，不同之处在于你每次发布的是设计的源文件。
曾投资过 Figma 的 A16Z 评价 Figma 社区将 GitHub 的开源文化带到设计师群体中。来自全球的设计师或公司都在社区分享自己的设计，甚至包括微软、Salesforce、Spotify、Slack 这些知名公司。Figma 之于设计师，就像 GitHub 之于工程师，我们不需要重复造轮子，可以直接使用别人分享的设计来做自己的项目，或者从中学习别人的一些设计技巧和习惯。当我们站在巨人的肩膀上的时候，设计这件事就变得更加触手可及了。
社区使用指南
在社区探索
在浏览器直接输入 https://www.figma.com/community 就可以访问 Figma 社区了，如果你用的是客户端，点击左侧边栏的 Community 即可进入。
从下图可以看到，Figma 的的社区中主要有文件、插件和创作者三类。你可以自由探索，喜欢哪个就点进去查看详情。在封面上显示 Fig pick 的是 Figma
图片来自 Figma官网
Figma作为一个线上协作设计平台，因其强大的组件功能，越来越受到设计团队的青睐。
为帮助用户对组件进行更加高效的管理，2020年11月初，Figma在其网站上发布了组件的变体功能。
Figma官网：https://help.figma.com/hc/en-us
本文主要通过变体组件的创建过程
翻译自https://help.figma.com/hc/en-us/articles/360040451373#Add_and_remove_objects
自动布局允许您创建响应其内容的动态框架。
有很多方法你可以使用自动布局:
1、创建可以在编辑文本标签时增大或缩小的按钮；
2、快速建立适应新项目的列表；
3、结合自动布局框架构建完整的界面；
4、向现有组件添加自动布局；
注意:我们使用术语父和子来表示框架和对象
添加自动布局
您可以添加自动布局到一个框架或对象的选择。这包括:
1、新或空的框架；
2、包含现有内容的框架；
3、组件；
4、组或其他对象或图层；
注意:
我们只支持框架添加自动布局。如果你选择一个框架之外的对象，Figma会在它们周围创建一个框架并添加自动布局。
删除自动布局
当您删除自动布局时，您将有权访问框架的常规属性。
有两种方法来移除自动布局:
1、右键单击框架并选择移除自动布局；
2、在属性面板中，单击自动布局旁边的减号图标；
注意:
您不能使用“添加自动布局”键盘快捷键来删除自动布局。如果您这样做，您将在当前选择的周围创建一个新的自动布局框架。
你可以在几个地方添加自动布局:
1、右侧边栏:点击旁边的自动布局；
2、右键单击框架并选择添加自动布局；
3、使用键盘快捷键:Shift +A；
调整框架的填充，边框，效果和角半径属性!了解更多在我们的框架在Figma文章。
https://help.figma.com/hc/en-us/articles/360041539473
自动布局属性
自动布局的框架与常规框架有不同的属性。当您应用自动布局时，您将在右边栏(属性面板)看到一些变化。
当你框架添加了自动布局，你将不能:
🚫向该框架添加布局网格；
🚫对自动布局框架中的任何对象应用约束；
🚫在框架内使用智能选择；
有自动布局父(框架)和自动布局子(对象)的属性。我们已经分组自动布局属性基于你选择的对象:
1、父自动布局(框架)；
2、子自动布局(对象或框架)
注意:
由于可以嵌套自动布局，一个框架可以同时扮演自动布局父元素和自动布局子元素的角色。这意味着你可用这两组属性。
父自动布局
以下属性在属性面板的自动布局部分中。
1. 方向
方向允许你选择自动布局框架将流动的方式。你可以在垂直和水平之间选择。
垂直允许您沿着y轴添加、移除和重新排序对象。例如:列表中的对象，或新闻提要或时间轴中的文章。
水平允许您沿着x轴添加、移除