DAY5 绘制介面

上一篇我们完成了wireframe的绘制，这次我们要将草稿跟库拉皮卡一样，没有办法下船更具现化一点，我们今天要做的就是「模拟作品完成的样子」。

虽然不是整个做完给客户看，先制作一个雏形给客户了解一下产品最後的样子与使用逻辑是怎麽样的，这边我使用一个线上的工具，Figma！

Figma

Figam是一款线上介面设计工具(当然也可以下载桌面版本)，可以让多人在线上网页板一起多人协作UI、UX、网页、App应用程序，让你各位设计UI就跟大学在google文件上一起做报告一样高效率，大学时期做报告我都是躺着的那个。重点是.....免费啦！如果需要更多功能的话就付费解锁吧~~~

注册

使用之前需要有figma的帐号，你可以选择注册一个，或是用google帐号登入。

设定就跟着他的引导走，，如果需要更详细的教学，Figma也有提供一些教学，网路上也有很多资源。下面我直接去绘制出这次想要做出来的作品，我们直接进入一个空白专案！

我们先新增一个Frame，在右边有内建好的模组可以让使用者选择。

但是我希望线上的样子与现实中的样子相同，现实中我已google Pixel 3 XL去实作。但是在内建的模组里面没有Pixe3 XL，这时候我们可以向网路上的大哥哥大姊姊们求助，大哥哥大姊姊会在哪里呢？

在Figma的Community里！

会有很多大哥哥大姊姊把制作出来的素材放到 Community 上，像这次我们需要pixel 3 XL的外型样式，直接用关键字搜寻.......

.......

那将就使用一下pixel 3的

点进去之後点选右上角的Duplicate就会把这个Template复制一份进你的专案夹里，而且会直接打开方便你操作。

进入以复制的素材中，大部分的作者都会跟你说明各个元件之间要怎麽使用，没有说明的话大部分也都是标示的满清楚的啦，透过左边的Layers就可以知道一个Frame是怎麽组成的。

最後我们直接复制Add Design Here，你可以透过选取左边Layer的整个物件，也可以直接用滑鼠在中间的画面上选取，将这整组frame复制到我们要做的专案里。

你就可以在你的专案里面开始实作啦！

接下来讲一个满重要且方便的东西，叫做 Component。

Component

Component主要的功能就是把一个设计元素设为一个母物件，复制母物件出来的就是子物件(以上用语都是我自己去厘清的，可能真正的名称并不是这样，有错的话都可以跟我说明一下喔)，当有需要去修改的话，修改母物件的同时，子物件也会跟着修改。把设计元素设为Component主要有几个优点：

• 提高设计的一致性
• 提高设计效率(同步修改跟重复使用)

设定为component的物件在layers里面会有一个这样的符号：

如果是复制出来的话就是这样的符号：

下面放个Figma的范例影片给大家看一下。左边的是Component(母物件)，右边的是复制出来的子物件。

https://youtu.be/k74IrUNaJVk?t=140

非常简易的介绍与教学大致先这样，下一篇来说明一下prototype如何让设计好的专案动起来！

下一篇件写写打家打家摆掰。