嗨～從今天開始就是Figma教學了！不知道大家對網頁設計是否有初步的概念了呢？今天會簡單介紹Figma及基本操作方法，再用穿插教學的方式帶著大家使用Figma繪製Wireframe(線框稿)，也是內容很多的一天呢！一起加油吧！一樣會以

Figma介紹

Figma是這幾年快速竄升成為UI、網頁設計等方面熱門工具，雖然各軟體都有自己的優缺點，但其他市面上的軟體相比，Figma不僅持續進步，而且一直維持免費使用的狀態。

Figma優點：

• 跨平台，macOS、Windows使用者都能線上同時協作
• 免費版的功能就很足夠個人使用，付費版比較適合公司、團隊
• 介面簡易、易學、好操作
• 可以設定元件庫，重複的元件可以同時一起修改
• 多元、大量插件可供輔助使用
• 可製作簡易Prototype(原型)，且效果呈現不差

唯一的缺點大概是只有英文版吧！
官方網站：https://www.figma.com/

建立檔案

Figma可直接使用google帳號註冊登入，登入後會進到自己的檔案頁面(如上圖)。

• 點擊「Design File」建立檔案(我是用筆電版，桌機應該會在中間上面的地方)。
• 下方區塊為「過去有開過的檔案」，檔案都會記錄在這。

基本操作介面

建立檔案後，會進到操作頁面，整體分為四大區塊

• 最上方為主要「功能面板」，需要添加元素使用這塊的功能。
• 左側為「圖層、元件面板」，有用過adobe PS、AI的人應該不會陌生，簡單來說每個元素都會在這邊呈現，有不同層級、群組關係。
• 右側為「樣式設定面版」，每個元素需要調整屬性都是在這塊進行。
• 中間為主要「繪圖區」，為成品展現。

繪製Wireframe

Luna線上作品集的 Figma 設計稿
簡單介紹操作面板後，一起來繪製Wireframe吧！我會以Header為例，說明操作方式。

拉一個frame

1. 點擊上方「功能面板/井字符號」，找到「Frame」

2. 右側會顯示尺寸列表，先來製作桌機版尺寸吧！

3. 點選後，繪圖區會出現白色區塊，這就是主要繪圖區，超出區域的部分，匯出時會被忽略
4. 但因為很多桌機的螢幕尺寸會是1920px或更寬，所以我會調整成寬度為「1920px」

開啟格線

Figma有個格線系統的功能，以前用PS做，只能加入外掛來使用，但Figma直接把這個功能加入，而且不影響操作，我非常喜歡這一點！
格線系統的重要性
格線不是必要的，但近年來響應式已經是網頁設計的基本款，使用格線來輔助可以更好的排版、對齊。

1. 點選你的Frame後，在右側樣式設定面板往下找到並點擊「Layout Grid」
2. 預設為方格狀樣式，點選項目左側icon，開啟設定
3. 最上方可挑選「格線樣式」，選「Columns」
4. 並修改設定為「行數12」、「間隔30」、「與兩側邊界距離300」

為什麼要這樣設定呢？ 後面會使用到Bootstrap的CSS框架，而Bootstrap就是將網頁分成12等份，為了符合這個框架，我先設定為跟他一樣的樣式。當然可以依照情況調整。

Header

1. 拉一個矩形，當作Header的區塊
2. 再拉出LOGO，文字可在右側設定，Figma收集許多字型

網頁設計適用字型
跟平面設計不太一樣，網頁是在瀏覽器中執行，所以需要以瀏覽器能辨識的字型為準，要用其他特殊字型時，需要先匯入才能使用，基本的「微軟正黑體」、「Noto Sans」都是常用字型，另外「Google font」可以找到許多免費可商用字型。網路上也還有很多其他資源。

3. 同一個組合的元素，可以使用「右鍵」，合成群組。

4. 最後的成果。

拉Wireframe是很適合當一開始練Figma的方式，因為沒什麼色彩，用到的功能不多，相信初學者也能很迅速上手！這幾天太多東西了，明天來談談比較輕鬆的Figma插件，明天見～～