Figma - 新手入門指南，從零開始快速掌握設計工具

Figma 是一個雲端的設計工具，設計師可以使用 Figma 來建立高質量的視覺設計、互動設計及設計系統，即使團隊成員在不同的地理位置，也可以在同一個文件上協作，並支持即時預覽、評論和版本控制。

Figma 也提供了大量的第三方 Plugins，並且新的 Plugins 也不斷增加，相較其他的設計工具，Figma Plugins 生態系統更加成熟。

Figma 是基於瀏覽器的應用，這表示它可以在多種平台，包括 Windows、Mac、Linux 使用，也適用於 macOS 及 Windows desktop apps。如果需要在手機即時預覽，可以下載 Figma Mirror APP，支援 iOS 及 Android 系統。

免費註冊後即可開始使用：

✨ 網頁版：https://www.figma.com/

✨ Download：https://www.figma.com/downloads/

#檔案建立與權限

首頁面板主要分為四大部分：

• 草稿 Drafts：可創建 Figma、FigJam 以及匯入 fig、jam、sketch、jpg、png、gif，且文件沒有限制檔案及頁面數。

  

• 最近查看 Recents：顯示最近查看過的最多 50 個文件。包含自己的文件、其他人及團隊的文件。
• 已刪除的文件 Deleted：刪除的個人和團隊文件。可以按右鍵單還原、永久刪除或複製到草稿。
• 團隊 Teams：項目可以包含任意數量的文件，並共享整個項目或單一文件。

分享權限：

• Viewer：查看和評論，但不能對文件進行任何更改。
• Editor：與 Viewer 一樣，可以查看和評論任何文件，同時也可以對文件進行任何更改。

Figma 對個人用戶是免費的，也可以分享瀏覽權限，但如果需要共同編輯文件及共享資源 Library，必需先建立團隊。

下圖為各版本的權限差異及計費方式：

#探索Canvas

Figma 中的 Canvas 是所有 Frame、Group 和其他圖層所在的背景。它的使用範圍上限大小為 -65,000 到 +65,000。

#上方工具列

左側：

• Menu：包含 Figma 的搜尋和各種其他功能
• 移動和縮放工具
• Frame、Section、切圖工具
• 形狀工具：矩形、線段、箭頭線段、圓形、多邊形、星形、上傳圖片或影片
• 鋼筆和鉛筆工具：可以自定義形狀，使用矢量路徑、錨點、貝茲曲線建構複雜的圖標
• 文字工具
• 資源模式：可以瀏覽已啟用的 Libraries 組件、Plugins 及 Widgets
• 手形工具：在文件中點擊、移動視圖範圍，而不會調整到任何元件【快捷鍵 Space】
• 評論工具：使用評論來反饋、與合作者交流想法

中間：

• 沒有選取物件：顯示項目和文件名，下拉選單：歷史紀錄、發佈團隊 Library、輸出、複製、重新命名…等文件相關功能
• 若有選取物件：建立 component、遮罩、布林運算、擴展選取項目

右側：

• Share：打開共享視窗，可以設定邀請人員的權限、建立分享連結
• Present：開戶演示模式，查看已完成的原型
• View Settings：調整文件縮放級別和其他視圖選項

#歷史版本紀錄

• Name this version：除了系統自動保存版本以外，也可以手動創建新版本。
• Restore this version：恢復版本，並在歷史紀錄創建新的自動保存版本。
• Duplicate：複製版本會建立一個新文件，沒有歷史紀錄、留言評論及分享權限。
• Delete version info：將命名或保存版本時添加的標題和描述清除，還原為版本時間資訊。
• Copy link：複製連結分享該版本。

#左側面板

• Layers：添加的 Frame、Group 或是元件都會顯示在圖層中。
  

  

• Assets：在這裡可以找到所有的 Components，可以將任何 Components 拖到畫布中創建 Instance 使用。團隊 Library 可以發佈文件中的 Components，讓其他文件也能使用。
  

  

  1. 透過搜尋可以查找特定組件。
  2. 切換網格或列表瀏覽模式
  3. 開啟團隊 Library
  4. 當前文件建立的 Components
  5. 此文件私有的 Components
  6. 此文件使用其他文件的 Components
  7. 任何已啟用的團隊 Libraries
   
• Pages：可以添加無限個頁面，作為設計的迭代、區分設計稿版本、針對不同裝置平台進行設計…等。

#右側面板

• Design：查看、添加、修改或刪除設計屬性，包含設計稿的尺寸、方向位置、約束、自動佈局、樣式以及切圖輸出設定
• Prototype：可以建立 Frame 之間的連接，預覽交互或展示設計
• Inspect：查看如何在程式碼中表達設計元素，可選擇 CSS、iOS(Swift)、Android(XML) 格式，下個段落會有詳細說明。

#如何使用 Inspect 面板

面板說明

• A：圖層名稱和類型
• B：圖層尺寸、自動佈局屬性或約束
• C：查看 Hex、RGB、CSS、HSL 和 HSB 顏色樣式和值
• D：查看效果，例如陰影、邊框
• E：文字樣式，包含字體、粗細、行高…等
• F：查看組件名稱、描述、狀態和連結至組件來源

複製屬性和值

• A：將區塊中所有屬性複製起來，或是點擊標題旁的複製 icon
• B：點擊單行項目，可複製單一屬性

程式碼

程式碼可選擇 CSS、iOS(Swift)、Android(XML) 格式，右側可切換 Code 和 Table 模式。

• Code：以選擇的程式語言顯示程式碼，例如：Components 名稱、樣式、文字內容…等。
• Table：顯示屬性列表，例如：圖層的X、Y座標、寬高、文字屬性、色碼…等。

#從 Figma 輸出圖檔及 Assets

輸出權限分為Viewer、Editor，而輸出設定的位置也會因你的權限級別不同，如下圖：

• Editor：右側欄【Design】可以添加輸出設定與輸出 Assets，還能使用切片工具【快捷鍵 S】，對畫布上的任一項目設定輸出細部或是範圍的設定
• Viewer：右側欄【Export】可以添加輸出設定與輸出 Assets

• 設定：在 Export 點擊右邊的 + 號設定輸出，點擊 - 號為刪除輸出設定
• 格式：四種不同的格式輸出，PNG、JPG、SVG 或 PDF
• 尺寸：可使用倍數定義輸出大小，例如：2x、指定寬度或高度(等比縮放)，例如：1024w或是512h
  * SVG 和 PDF 僅支持 1x 輸出
• 批次：也可以選擇多個 Assets 批次設定輸出
• 預覽：查看輸出 Assets 的外觀；如果選擇多個項目，則不會顯示

Figma 具有協作性強、易於使用且免費的特點，適合設計師和開發者使用，可以輕鬆入門 Figma，掌握設計工具的核心功能，並加速設計流程，無論是初學者還是有經驗的設計師，都可以透過 Figma 實現高效的設計工作。