生活在数字时代，每个人应该或多或少都需要给自己设计一些东西。比如说做公众号运营，需要设计文章封面；发布活动通知，需要做活动海报；找工作时需要给自己设计一份简历。
在上一篇文章中我们简单认识了一下 Figma，今天我们就直接进入编辑器，通过设计几个封面，来快速熟悉 Figma。
公众号文章封面
公众号的封面有两种尺寸——长方形和正方形，分别用于不同的场景。一般单条图文的封面和多条图文的首条封面会使用长的，而多条图文消息的后面几条会使用方形的。但是这些图还可能在其他地方显示，规则比较多，所以我们一般是做一张长图，裁切其中一部分作为方形封面。
在公众号写作后台，当你选择封面时会被要求你裁切为 2.35:1 和 1:1 的两种尺寸，以便在不同场景展示。
假如今天我要给这篇文章做一张公众号封面，我们一起看看在 Figma 里面是怎么做的。考虑到这张封面出现时一般下边或右边都会有标题，所以我不建议大家在封面上写太多字。一个常见的做法是，我们可以使用背景加重点文字，下图这三种样式是我常用的，今天我们也以这三种为例来讲解。
认识一下编辑器界面
在此之前，让我们来认识一下 Figma 的编辑器界面。它就像是你的工作台，中间是你的画布，四周摆满了各种各样的工具。从下图中可以看出，Figma 的编辑器界面并不复杂，除了中间的画布区域，主要由三部分组成。
- 顶部导航栏：
- 工具栏：形状、文字等工具
- 文件信息：文件名、文件历史等
- 分享与其他：分享、查看原型和视图比例等
- 左侧页面和图层：主要显示你的文件页面和图层结构
- 右侧属性区：当前选中的元素的属性，比如颜色等
开始吧
接下来我们就开始设计上面这三种封面吧。
Cover 1
我们先来尝试做第一个，也是最简单的一个，只需要把文字叠加在一张图片上就好了。
新建设计文件后，进入文件，按下 F 键然后用鼠标在画布中拖拽一个矩形区域，画一个 Frame。Frame 是 Figma 中的容器图层，它里面可以放置其他图层甚至另一个 Frame，让设计具有父子级结构。这里我们在画布中直接画的 Frame 可以看作是一个画板，方便我们组织设计稿。
还记得前面所说文章封面的要求吗？2.35:1，也就是宽度是高度的 2.35 倍，真是一个奇怪的比例，不过在 Figma 中不需要我们自己计算，Figma 的数字输入框都自带计算器。保持这个 Frame 选中（选中时有蓝色边框），看下右边属性面板中它的高度（H）是多少，在宽度输入框中输入 高度*2.35（* 代表乘号）。比如我随手画的这个高度是 766，那么我就输入 766*2.35，然后回车，Figma 会帮我自动计算出宽度。
接下来我们添加背景图片，添加图片有多种方式，你可以截图后直接 Cmd V（Windows 下是 Ctrl V） 粘贴进去，也可以直接从文件夹拖拽图片进去，我更习惯使用快捷键 Cmd Shift K（Windows 下是 Ctrl Shift K）。按下这个快捷键之后会调出文件选择器，选择图片后在画布中需要添加的地方点一下就把图片加进来了。注意我点的是这个空白画板，因为这样才能把图片添加到这个画板内部。
我们来调整一下图片尺寸，先在触控板上两指捏合，或者按下 Ctrl 不松手同时滚动鼠标滚轮，将图片缩到可视区域内。然后同时按下 Shift Option （Windows 下是 Shift Alt）拖拽图片右上角的操控点，来缩小图片尺寸。这里按下 Shift 可以让图片保持宽高比缩小，按下 Option (Alt) 可以让图片缩小时以其中心为缩放中心。
接下来调整一下图片位置。我们可以直接拖拽让它对齐画板的边缘，当图片的一边接近画板边缘时会被自动吸附对齐，然后按下 Shift 并拖拽一个操控点，让它在保持宽高比的情况下和画板一样宽。
现在我们可以添加文字了。按下 T 键，在图片上点一下，就创建了一个文字图层，此时输入文字即可。
在右侧修改一下字体为 Noto Sans SC，并把字号调大一点。Noto Sans SC 是一个谷歌云端中文字体，不需要安装，你也可以改成你自己本地的字体，不过需要注意的是这里只能输入字体的英文名。
我们把文字居中对齐，直接拖拽文字图层，此时会显示红色的对齐辅助线，当辅助线为“十”字形的时候就表明它是水平和垂直居中对齐的。
看起来有点单调，我们给它前面加一个 Emoji。如果你使用的是 MacOS 自带输入法，按下 Cmd Ctrl 空格 就能调出 Emoji 选择器，Windows 系统可以参考这篇文档。添加 Emoji 之后需要再次调整位置，把它居中对齐。
我们再加上第二行副标题，同样地按下 T 来创建一个文本图层，然后拖拽它的右边，让它和「小试牛刀」图层一样宽。这个过程中红色辅助线可以帮助你判断是否对齐。
然后我们增大副标题的文字间距，让它充满一整行。点击右边的字间距输入框，然后按上下方向键就可以调整了，不过这时候每按一下字间距会增大或缩小 1%，可以同时按下 Shift 和上下方向键，这样每按一次的变化就是 10%，可以快速调节到想要的值。
按下 Shift 同时选中这两个文本图层，拖拽它们将其居中对齐于画板中央，注意红色辅助线可以帮我们判断是否对齐。
看起来文字有一点不明显，我们给它们加上投影。将右侧的属性面板滚动到最下方，可以看到 Effects（效果），点击它右边的加号，就可以添加一个 Drop Shadow （外部投影）。在弹出的投影属性面板中调整它的各个值，直到你满意为止。我们把 Blur 调为 0，这样投影就有了清晰的边缘。
看起来不错，不过这个图有点暗，我们稍微调整一下它的色调吧。你不必打开 Photoshop，直接选中图片图层（可以按下 Cmd 并点击图片），然后双击，就会调出图片调节面板，我们只需要把前三项的滑块往右边稍微拉一点就好了，它们分别是：曝光、对比度和饱和度。现在图片颜色看起来是不是更鲜艳一点了呢？
这样我们就完成了 Cover 1 的设计。
Cover 2
第二种风格和第一种类似，不过更适合背景比较复杂的情况。
我们直接截一张 https://figma.com 首页的图作为背景，因为它里面本身带有文字，我们写的「小试牛刀」叠在上面就看不清了。我们可以在文字和背景图片之间加一个半透明的矩形，把背景弱化，这样子就能看清文字了。
按下 R 键，点击画板并拖拽，画出一个矩形，它默认是灰色的，并且盖在文字上放了。在左边图层列表中直接拖拽它，把它移动到文字和背景图片之间。
拖拽它的左上角和右下角操控点，把它的尺寸调整为和画板一样。
在右侧属性面板中找到 Fill 输入框，在里面输入 f 并回车（Figma 会自动补全为 #FFFFFF，也就是白色的十六进制色值），把它的填充颜色变为白色。
同样地，我们选中两个文字图层，把它们的颜色调整为黑色（输入 0 回车）。
白色矩形已经把背景图片全部遮挡了，我们需要调整一下它填充颜色（Fill）的不透明度。在左侧图层列表中选中白色矩形，在右侧属性面板中找到 Fill，在色值右边输入一个小于 100 的数字，把它变为半透明的。注意不要改成了上面的 Layer 那里，那里是图层整体的不透明度。
接下来，我们给白色矩形添加毛玻璃效果，让它后面的图案变得模糊。在右侧属性面板中找到 Effects，点击加号添加一个效果，默认添加的是投影，我们把它切换为 Background blur，也就是背景模糊。
点击旁边的小太阳，调整 Blur 也就是模糊值为一个合适的数字，让背景看起来不会干扰前面的文字。
这样我们就完成了第二种风格的封面。
Cover 3
其实有时候我们并不需要背景图案，一个简单的渐变就可以让我们的设计变得很好看。
复制一个 Cover 2，删掉里面的矩形和图片背景，只留下两个文字图层。
选中最外层的画板，我们把这个白色换为一个渐变。点击右侧属性面板中的 Fill 颜色值，在弹出的颜色选择器中，点击顶部的 Solid，将其切换到 Radial，也就是从单色填充切换为径向渐变。
然后我们调整一下径向渐变两端的颜色，使其中间为白色四周为浅黄色，有一种聚光灯打在中间的感觉。
现在看起来还是有一点单调，我们可以在后面放一些图标点缀一下。不过图标不需要我们自己画，Figma 有一个社区，里面有全球设计师分享的各种设计资源（遵循 CC BY 4.0 协议，可参考这篇文章），我们可以去那里找找。在社区搜索 icon，就能看到很多图标。
找到喜欢的，点击右上角的 Duplicate 复制一份到你的草稿箱里面，就可以直接复制里面的图层使用啦。我比较喜欢使用 Feather 图标，同时打开两个文件，在左边文件中按 Shift 选中想要的多个图标，按 Cmd C 复制，到右边文件中按 Cmd V 粘贴到画板中。
调整一下它们的大小、位置、角度、颜色，直到满意为止。当鼠标靠近图标的某个操控点时，会变为两头弯曲的箭头，此时在画布中拖拽可以旋转图标。
结语
现在我们已经完成了这三种风格的封面设计，做出的效果很简单，但是可以帮助你快速了解 Figma 中的一些工具和概念。当然，你也不必完全严格按照我这个流程操作，在设计时可以多尝试尝试，说不定能做出更加惊喜的效果。
最后我把这个文件链接放在这里，你可以复制一份到你的草稿箱研究一下图层结构和设置，有问题也可以直接在我的文件中按下 C 键留下评论。
文件链接：https://www.figma.com/file/0kgC960LDLmzeJcW3RVFs8/Let's-Figma?node-id=50%3A2
