DAY19-网站构思之figma(一)

前言：

接下来就要进入网页构思的阶段了，在开始写网站之前，如同画画一样，一定都需要先打一个草稿，除了让之後写code可以有一个方向，也可以先预览看看之後网站的效果！

在这里阿森要介绍一个很好用的meme制造器UI设计软件，那就是figma!!

阿森会示范做几个简单的设计，当作之後网页的草图，那我们就开始吧。

Figma是什麽？要下载吗？

在使用figma之前一样先让我们看一下官方介绍："Figma是一个向量图形编辑器和原型设计工具，主要基於网页，透过macOS和Windows的桌面应用程序可启用额外的离线功能。"

也就是说要使用figma设计其实只需要到他的网站上注册，之後透过网页就可以操作了，非常的方便。同时他还有强大的共编功能，像是google document一样，这在沟通上大大的减少了负担，可以更快速地交换意见并视觉化。

那就让我们先去他的官网吧：

https://www.figma.com/?fuid=

注册完成後会来到这个页面。

这时候我们可以按左边Team project的加按钮，新增一个file。

然後就来到编辑页面啦：

开始设计：

这里我们可以先透过左上角的frame功能新增一个frame：

再来我们把背景颜色调成黑色，同时将宽跟高设成1920 x 1080也就是full HD的长宽比：

这时候可以把准备好的背景图片摆到空白页面中间：

这都是阿森厉害的夥伴们画的！真的超强的。

再来这里我想要在上面做一个NavBar的设计，透过讨论我们决定这个网页会有以下内容：

Gallery, Roadmap, Opensea, news, about us

所以我们可以使用T这个功能来新增文字，并直接拖到我们想要的位置，在完成编排後大概会长这样：

这时候还不够，我想要再加个Logo在左上角，同时新增个title在图中间，所以文字部分我们一样使用T的功能，图片的话可以直接拖曳到figma中：

这时候我觉得右上角的字有点太单调了，想增加一点底色，可以再使用刚刚的frame功能，拉一个和他一样大的矩形，叠在字下面，选一个颜色，再透过radius功能把他变成圆形：

就可以变成这样啦：

然後我们可以同时选取这两个物件，按右键选择Group Selection，就可以把两个东西绑在一起，之後操作也会更方便。

接下来在右下角加上一个简单的slogan，都完成之後会变这样：

封面页的设计就完成啦！

小结：

今天介绍了一些figma的基本用法，明天我们再来讲更多厉害的figma功能，把整个设计串联在一起吧！