生活在数字时代，每个人应该或多或少都需要给自己设计一些东西。比如说做公众号运营，需要设计文章封面；发布活动通知，需要做活动海报；找工作时需要给自己设计一份简历。

在上一篇文章中我们简单认识了一下 Figma，今天我们就直接进入编辑器，通过设计几个封面，来快速熟悉 Figma。

公众号的封面有两种尺寸——长方形和正方形，分别用于不同的场景。一般单条图文的封面和多条图文的首条封面会使用长的，而多条图文消息的后面几条会使用方形的。但是这些图还可能在其他地方显示，规则比较多，所以我们一般是做一张长图，裁切其中一部分作为方形封面。

在公众号写作后台，当你选择封面时会被要求你裁切为 2.35:1 和 1:1 的两种尺寸，以便在不同场景展示。

假如今天我要给这篇文章做一张公众号封面，我们一起看看在 Figma 里面是怎么做的。考虑到这张封面出现时一般下边或右边都会有标题，所以我不建议大家在封面上写太多字。一个常见的做法是，我们可以使用背景加重点文字，下图这三种样式是我常用的，今天我们也以这三种为例来讲解。

在此之前，让我们来认识一下 Figma 的编辑器界面。它就像是你的工作台，中间是你的画布，四周摆满了各种各样的工具。从下图中可以看出，Figma 的编辑器界面并不复杂，除了中间的画布区域，主要由三部分组成。

接下来我们就开始设计上面这三种封面吧。

我们先来尝试做第一个，也是最简单的一个，只需要把文字叠加在一张图片上就好了。

新建设计文件后，进入文件，按下 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 的设计。

第二种风格和第一种类似，不过更适合背景比较复杂的情况。

我们直接截一张 https://figma.com 首页的图作为背景，因为它里面本身带有文字，我们写的「小试牛刀」叠在上面就看不清了。我们可以在文字和背景图片之间加一个半透明的矩形，把背景弱化，这样子就能看清文字了。

按下 R 键，点击画板并拖拽，画出一个矩形，它默认是灰色的，并且盖在文字上放了。在左边图层列表中直接拖拽它，把它移动到文字和背景图片之间。

拖拽它的左上角和右下角操控点，把它的尺寸调整为和画板一样。

在右侧属性面板中找到 Fill 输入框，在里面输入 f 并回车（Figma 会自动补全为 #FFFFFF，也就是白色的十六进制色值），把它的填充颜色变为白色。

同样地，我们选中两个文字图层，把它们的颜色调整为黑色（输入 0 回车）。

白色矩形已经把背景图片全部遮挡了，我们需要调整一下它填充颜色（Fill）的不透明度。在左侧图层列表中选中白色矩形，在右侧属性面板中找到 Fill，在色值右边输入一个小于 100 的数字，把它变为半透明的。注意不要改成了上面的 Layer 那里，那里是图层整体的不透明度。

接下来，我们给白色矩形添加毛玻璃效果，让它后面的图案变得模糊。在右侧属性面板中找到 Effects，点击加号添加一个效果，默认添加的是投影，我们把它切换为 Background blur，也就是背景模糊。

点击旁边的小太阳，调整 Blur 也就是模糊值为一个合适的数字，让背景看起来不会干扰前面的文字。

这样我们就完成了第二种风格的封面。

其实有时候我们并不需要背景图案，一个简单的渐变就可以让我们的设计变得很好看。

复制一个 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