编注：Figma 是一个完全免费的在线 UI 界面设计软件，支持 Windows 和 macOS 等多个平台。根据 UXTOOLS 的数据，Figma 已经是目前使用排名前五的设计工具了。与 Sketch 等传统工具不同的是，Figma 是第一款真正支持协作的 UI 设计软件，可以让整个团队的成员同时查看并修改协作的项目。

每个人都会有设计的欲望，无论是设计一个网页还是设计一个 App，都希望自己能创造出一款有风格的作品。但是面对市面上的诸多设计软件，哪一款才更适合新手呢？

俗话说「工欲善其事必先利其器」，想要简单入门 UI 设计，试试 Figma 吧。

设计一个全新的少数派网站首页

如果你之前接触过类似的 UI 设计软件，你可能会发现 Figma 这个界面的操作逻辑有点类似于 Sketch，为了方便你的快速入门，官方在右下角的帮助按钮放置了一堆东西，能够帮助我们方便查找 Figma 自带的各类教程，快捷键等。

此时我们按下键盘上的 A ，呼出快捷键功能，创建一个画板，然后在右侧选择你喜欢的产品类型便能够得到一个对应的 UI 大小的网格。因为现在我们是要 redesign 少数派的首页，所以我们选「MacBook Pro」。

但是你也发现了，空白的界面并不适合设计，我们需要一些网格来帮我们辅助定位和分配空间。点击右边的加号，能够看到 LAYOUT GRID 下面的 Grid (10px) 会帮我们自动生成一个铺满当前白色页面的网格。

你也可以点击 Grid (10px) 进行详细的进一步设置（此处我选择默认的设置）。

我们现在来观察一下少数派的首页，大致由顶栏、导航栏、展示栏、文章、侧边栏等组成。

那么我们根据这个矩形分割的思路，点击网页左上角的矩形按钮，在 Figma 里面先画好一个矩形，把这个矩形作为我们网页的背景。

在左边的控件栏里面，我们单击创建好了的矩形，同时在右边的颜色控制里面，更改他的颜色为黑色，当然你也可以选择你喜欢的颜色或是图片来作为背景。

设置好背景后，我们可以尝试先做一个顶栏和导航栏的融合，使他成为一个全新的顶栏。通过再次点击矩形按钮，创建一个全新的矩形，放在最上面作为顶栏，颜色设置为浅黑色使我们能更好地看清它和背景颜色区别，添加上 logo 和相关的导航，在添加的时候会有自动生成的参考线帮助我们判断位置。

为了方便管理和之后的升级维护，现在给左栏的各个组件都命下名。

如果遇到素材颜色不搭配的情况，可以尝试使用右边的工具进行调整，例如下图中的搜素图标，由原本的灰色调整为白色。

为了让我们的顶栏和背景融为一体，我们此时把颜色改回黑色，再通过同样的方法再次创建一个较大的矩形，同样为了方便我们制作的时候易于辨认，将它改为浅黑色。

少数派目前的 Power+ 2.0 正在火热售卖中，我们就把它作为我们的 Banner。拖拽背景图片进入矩形中，把图片铺满整个矩形，再输入宣传文字，文字的颜色为了方便与背景匹配，我们使用右侧的取色器工具来获取文字的颜色。

单纯的文字似乎没有太大的吸引力，我们再画一个圆角矩形，调整颜色为渐变色，方便用户购买。

这样我们全新的 Banner 也就完成了。是不是有点首页的样子了呢？

接下来我们制作页面的主体部分，先创建一个矩形作为主体，然后再创建四个矩形作为我们的商品展示位。

在四个矩形展位放置好我们需要展示的商品图片，如果遇到矩形挡住图片的情况，只需要右键单击图片，选择「bring to front」即可。

最后补全文字，然后把大矩形的背景颜色改回黑色。

这样我们的主体部分就完成了，最后我们选择「File」-「Export…」进行导出，便能将我们做好的主页发送给其他人了。

总结

Mac 上目前主流的设计软件之一是 Sketch，Sketch 有许多优秀的地方，但它的缺点是只支持 Mac 系统，每年的订阅价格也是不菲，导致把许多新人拒之门外。

Figma 适用于任何能够运行现代浏览器 (Chrome) 的系统，能够让我们随时随地开展工作。如果是团队使用，在 Figma 中共享文件也非常容易，只需共享链接即可。对于程序员们来说，Figma 支持直接从设计文件中复制 CSS，省去了许多繁琐的工作。但 Figma 缺点也很明显，Figma 到目前为止，对中文的支持还是不够好。

希望本篇文章能帮助你打开 Figma 设计的大门。