Figma 初學者會這些就可以開始玩了！

在摸索 Figma 之前，我可是連 Photoshop、illustrator 都不會啊。這篇就是想用簡單的步驟，幫你快速建立手感～

1/ 選裝置、拉個方形

首先在左上方，點個看起來像井字鍵的 Frame，右上方就會出現一排手機裝置的大小，比如我的是 iPhone 8 Plus 選個手機開始做吧！

接著拉個方形出來，快捷鍵按 R，方形下方也可以用線條或別的形狀可以玩～
學會方形超重要，是手機介面的資訊或圖片欄位，也是製作按鈕的最基礎！

至於旁邊的 T，應該看得出來是拉文字框用的，就跟做簡報差不多，在右排也可以選字型、設定大小～

2/ 做出圓角和上色

把方形弄出來了，要怎麼做出按鈕的外型？在方形內部點一下會顯示四角的圓點，按住圓點往內縮，就會有圓弧出現啦～

在右排的 Design 欄位可以看到，圓弧的角度變成 40，從這邊更改數字也可以喔！

幫方形換個顏色，在 Fill 這邊點開，找自己想要的顏色，或是套用色碼。

3/ 設定元件和常用色

有了前兩步，應該就可以做出有字的按鈕造型了，試著把形狀和字都一起選取起來，然後按正上方的四個菱形，就是設成一個元件（Component）的意思，這樣要設計好幾個頁面的相同按鈕時，就可以直接用這個元件囉！（記得在左排修改方便自己辨識的命名）

貫穿在每一頁會有統一要用到的品牌主要、次要顏色，不用每次重新複製色碼，可以把常用的顏色在 Fill 這邊按＋號並命名，之後要套用顏色就可直接選～（Text style 整理常用字型也是一樣作法）

4/ 做出可互動的原型

要讓你的頁面連接起來、按鈕可以點擊，就需要在工作區的右排，從 Design 切換到 Prototype，移到你要增加互動設計的位置，點一下就會出現＋號，拉著箭頭到要連接的頁面就可以啦，別忘了返回到上一頁也要連喔！

5/ 善用模板和 icon 素材

如果你不是要做設計師，其實不用太糾結美醜問題，尤其在初期溝通時，wireframe 的呈現重點應該是在資訊架構和使用流程是否符合需求，過於細節的視覺元素反而會讓討論失焦。

而且很多常見的 icon 其實已經有現成的可以用了，比如 Google 提供的 icon 資料庫，選你需要用的下載 SVG 檔，再上傳到 figma，可以再修改顏色和大小 。

官方有提供各種模板素材包，或是參考 figma 社群提供的各種 UI kit，閒暇時多觀察別人為何這樣設計的方式，可能會比直接讀設計規範更有效率地吸收。比如我之前發想 IG 貼文時其實就是有用到這個模板給我的靈感。

更細節的應用技巧，Figma 都有課程教學影片，不習慣英文的話，也推薦我有在上 Hahow 的「產品設計實戰：用Figma打造絕佳UI/UX」課程。不過我之前是搭配 UX 觀念在學的，並沒有打算繼續深入學習 UI 設計，所以問我太專業的技巧問題，我恐怕無法回答XD

希望以上幾個簡單步驟可以幫到有興趣入門的朋友，接下來就多學多玩啦，加油！