前言說明

在進入設計 Mockup 之前，我們先來認識一下 Figma 這款設計工具🎨。Figma 可用來打造多種設備的美觀介面與互動體驗，還具備多人協作和雲端存取等實用功能，能夠在團隊設計流程實現即時共享與高效編輯，特別適合現代化的設計流程。
Figma相關篇章，將以我在職場上製作 Mockup 到 Prototype 常見的操作功能進行說明，並以 Windows 為操作範例，如果你是 Mac 用戶，稍微調整一下操作步驟，或上網查詢對應方法，一樣能玩轉 Figma 😉！

安裝Figma

在開始設計之前，我們先把 Figma 安裝下來吧！Figma 有兩種操作方式可以選擇，根據需求挑選最適合自己的方式，以下說明兩種方式的操作：

(1) 瀏覽器線上版
打開瀏覽器，直接到搜尋引擎輸入「Figma」，第一個出現的就是囉！（如果不是請記得找官方連結🤣）線上版完全免安裝，可直接使用瀏覽器開始製作，檔案自動存放在雲端，支援第三方Google登入註冊，而且不限裝置隨時隨地都能編輯，非常方便！

（搜尋引擎輸入「Figma」找到第一個 圖片來源）

(2) 桌面應用版
同樣透過瀏覽器搜尋「Figma」，點擊官方連結進入網站，打開導覽列 「Products」 找到 「Downloads」 點擊，接著找到 Desktop app ，挑選適合自己裝置的作業系統安裝包，點擊後下載並照著步驟安裝就可以囉！

（Desktop app在最左邊 圖片來源）

安裝完成後，在本地會看到 Figma 圖示「 」，點擊開啟就可以開始設計。

到首頁，點擊上方 「Design」標籤 建立並進入設計工作區，再來會介紹 Figma 這幾個部份：「介面&工具列介紹」、「圖層管理」、「常見操作」。

介面&工具列介紹

首先，我們來認識一下 Figma 的操作介面吧！Figma 擁有直觀且齊全的介面設計，讓設計師能夠在創作過程中輕鬆上手、得心應手。
接下來，會依照下方圖片中的編號進行介紹，了解每個功能的位置與用途 ：

（Design File 操作介面）

1. 導航面板（Navigation Panel）

位於左側，整合了「檔案（File）」和「資產（Assets）」兩個頁籤，方便快速管理專案圖層元件。

• 檔案（File）：裡面有分兩個部份，頁面與圖層。
     頁面（Pages）：管理多個設計頁面，可點擊旁邊的「+」新增多個頁面，在不同畫布內製作，列表預設展開，方便在不同頁面間切換。
     圖層（Layers）：顯示當前頁面的所有圖層，可以透過拖曳調整順序。圖層順序越靠上，堆疊順序越高，簡單來說跟一般繪圖軟體一樣，上面的a圖層如果跟下面的b圖層重疊，a圖層會蓋住下面的b圖層。可用滑鼠雙點擊名稱，幫圖層重新命名，方便管理與查找。

• 資產（Assets）：查看和管理元件庫（Component Library），包括內建的 iOS、Google Material 和 Figma 的使用者介面套件（UI kits），方便快速調用實例，一鍵拖入畫布就能使用。做成元件（Component）的資產也會自動歸納出現在這裡，管理元件更輕鬆！

2. 畫布（Canvas）

位於畫面中央，是一片無邊界的創作空間 🎨✨，可以在此編輯各種設計元素，像是 Frame、元件和圖層等，給予創作者無限發揮的彈性。

3. 屬性面板（Properties Panel）

在畫面右側，有「設計（Design）」和「原型（Prototype）」兩個頁籤。

設計（Design）：根據所選元素類型，會自動顯示對應的屬性選項，像是尺寸、位置、顏色、字體等等。面板可調整大小，並根據當前選中的元素類型顯示相應的屬性選項。
互動原型（Prototype）：可用於建立畫面之間的互動關係，模擬使用者實際操作產品時的流程與體驗。透過設定互動邏輯（像是點擊、滑動等等），協助團隊在開發前期驗證流程構想，提升溝通效率並降低後續修改成本。

4. 工具列（Toolbar）

在畫布最底部，包括常用工具，像是選擇、縮放、建立 Frame、形狀、文字等等。

Figma 在這些功能上其實有持續進行改版與優化，目的就是為了讓設計人員能更專注於創作、減少操作上的負擔，進一步提升整體工作效率。也因此，Figma 漸漸成為不少設計創作者的愛用工具，讓創意更輕鬆地轉化為具體成品 ✨。

常見操作

介紹一些在製作時，常用的快捷鍵操作：

• 複製元素：選起元素，Alt + 滑鼠拖曳。換句話說如果要複製多個，就是多選再Alt + 滑鼠拖曳即可。
• 縮放整體畫布：Ctrl + 滾動滑鼠滾軸。往上滾是放大，往下滾是縮小。
• 拖曳整個畫布 ：按住空白鍵 + 左鍵拖曳。
• 鏡像翻轉：按住Shift + h 。
• 一鍵對齊：選起要對齊元素，按住Alt + V 是垂直對齊 (align vertical centers)；按住Alt + H 是水平對齊 (align horizontal centers)。

安裝套件

在設計網站或應用程式時，經常會需要在畫面上擺放icon ( 像是搜尋欄位的放大鏡圖示、密碼欄位可見切換眼睛圖示等等 ) ，這些小巧的視覺元素能提升使用者體驗，提高辨識速度，讓畫面排版更清爽、簡潔。

安裝流程：在畫布上點擊右鍵，找到「Plugins」選擇「Manage plugins…」，在搜尋欄輸入「Iconify」搜尋，點擊要安裝的套件，進到套件說明頁點選右下角「Run」安裝就可以囉！要使用時一樣點擊右鍵，找到「Plugins」，就可以在列表上看到安裝好的套件名稱。Iconify 支援多種常見圖示素材庫（例如 Material Icons、Font Awesome 等等），也可以直接搜尋關鍵字快速搜尋匯入，使用上相當直覺與方便！

移除套件

如果要移除套件，在畫布上點擊右鍵，找到「Plugins」選擇「Manage plugins…」，找到要移除的套件後方「•••」選擇「Remove」即可！

結語

走到這裡，相信各位對 Figma 的操作應該有個基本的輪廓了，這篇分享了 Figma 的基礎操作與介面，常用工具與套件如何安裝等實用技巧。
接下來，將介紹建立 Frame 與如何方便地統一元件樣式，讓設計更加高效。
未來還會繼續分享更多進階應用與實戰經驗，讓我們邊玩邊體驗Figma的樂趣吧 ✨！

參考資料與延伸閱讀

⑴ 使用工具來源：Figma