上一篇我們完成了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如何讓設計好的專案動起來！

下一篇件寫寫打家打家擺掰。