Figma 基礎教學

介紹與安裝

主畫面

• 個人帳號資訊跟提醒訊息 (那個小鈴鐺)
• Recent 最近使用的檔案，裡面會混雜著自己的 draft 跟 project 的檔案。
• Community 社群，是 Figma 很重要的功能，在裡面可以找到許多設計資源還有 plug-in，設計資源幾乎都是免費的，想要就可以直接複製回來用。
• Draft 草稿檔案，也可以直接按上面的 + 新增一個草稿檔案。
• Team project 這是團隊專屬的區域，在這裡之前，都還算是屬於個人的檔案，但到了這邊，就可以建立團隊專用的檔案區域，裡面的檔案都會跟有受邀的團隊成員共用，也是 Figma 目前主要的收入來源。

開始設計

上方工具欄

選單

• Back to files 回到主選單
• File 檔案
• Edit 編輯
• View 檢視
• Object 物件
• Text 文字工具
• Arrange 對齊工具
• Plugins 外掛工具列表
• Integrations 整合工具
• Preferences 系統設定
• Libraries 共用設計資料庫

上方工具欄左邊區域

Move 移動物件工具

Move 移動物件工具是移動物件用的指標，可以用來選擇物件，選擇到的物件會在右邊的工具列顯示該物件的狀態，也可以直接移動物件，擺放到任何你想要擺放的位置。

Scale 縮放工具

在 Figma 裡面，縮放有不同的方式，取決於那個物件是在哪一個圖層裡面而有不同的縮放方式，因此縮放工具在這邊提供的用處則是確保所有元件都是等比例縮放的。

Frame 框架

在 Figma 裡面，Frame 框架的作用相當廣泛，有多種功能與概念包含在裡面，他最常見的作用是當成畫布，畫布在設計軟體的概念就是類似做設計圖用的畫面，例如你想要建立一個 iPhone 的設計圖，選擇了 Frame 之後，就可以選擇你的畫布尺寸並開始設計。在進階的使用方式上，它還能是一個群組或是一個單獨的物件。

Slice 切圖工具

在 UI 的設計裡面，有時必須要將單一元件單獨交付給工程師進行開發，切圖工具是其中一種方法，但現今實際工作上已比較少用了，現在比較常用的切圖方式會是在右邊工具欄的 Export 工具。

Shape 圖形工具

裡面有很多圖形描繪的工具，包括矩形，圓形，線條，箭頭，多角形，星形，還有放入圖片，這邊將一一介紹這些功能的用法與用途。

Rectangle 矩形工具

這個工具可以說是 UI 設計最基本的構成方式了，每個 UI 設計都會用到這個元素，可以在底下的截圖看到使用範例，不僅如此，矩形工具還可以變化成圓角矩形工具，並且在某些地方取代了橢圓工具的作用，相當的富有變化性。在畫圖時同時按住 Shift 就能畫出正方形。

Line 線條

這裡的線條與隔壁的 Pen 曲線工具類似，但不相同，這裡的線條只能建立一條單一的線條，並在右邊的物件資訊欄上擁有單獨的狀態數值，而且享有 Stronk 邊框的樣式可調整，甚至可以加箭頭，在實際的使用上有時會用在 UI 上作為分隔線之類的方式使用，但分隔線也有使用矩形工具來做的做法。

Arrow 箭頭

這個工具最常用的地方其實是在工作區域說明每個畫面的順序與流程，有了 flow 之類的外掛工具之後，箭頭的工具就變得比較少用了。

Ellipse 橢圓工具

在現代 UI 設計的工作中，橢圓工具能使用的地方並不算多，因為在有些設計上，圓形的部分反而會使用矩形工具加上圓角取代，後者不但在調整造型上更有彈性，也避免重新選擇構成圖形的風險。但在向量插畫上，橢圓工具則有更多的發揮空間，製造出更多圓形的變化。在畫圖時同時按住 Shift 就能畫出正圓形。

橢圓工具還有自己獨特的 Arc Tool 弧形調整工具，只要將游標移到在完成的圓形上，就會在右邊出現一個 Arc Tool 弧形調整工具的小圓點，點選後就可以直接拖曳剪掉你要的角度，這在做 Pie Chart 圓餅圖很好用，可以稍加利用。