在线设计工具 Figma,让新手也能从零开始做网页

编注: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 和相关的导航,在添加的时候会有自动生成的参考线帮助我们判断位置。

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

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

调整 Exposure 能够改变颜色

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

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

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

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

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

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

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

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

总结

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

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

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