Figma 基礎操作要先懂哪幾件事？
Figma 基礎操作的重點，是先看懂介面、會建立物件、能調整樣式，最後完成分享或匯出，不需要一開始就學完整 UI/UX 理論。
Figma 是雲端介面設計工具，常用在網站、App、後台系統與簡單互動畫面。新手第一階段只要掌握工作區、Frame、文字、形狀、Auto Layout、Prototype、匯出與分享，就能做出第一個可討論的設計稿。
Figma 可以做什麼？
- 畫 UI 畫面：建立手機、桌機、網頁或後台介面。
- 做簡單 Prototype：用點擊事件串接畫面，讓別人看懂流程。
- 多人協作：設計師、PM、工程師可以在同一個檔案留言與檢視。
- 匯出素材：輸出 PNG、JPG、SVG 或 PDF。
- 建立元件：把按鈕、卡片、導覽列做成可重複使用的 Component。
Figma 要學多久？
| 目標 | 大約時間 | 先學內容 |
|---|---|---|
| 看懂檔案與留言 | 半天內 | 工作區、圖層、Comment、Share |
| 做出簡單畫面 | 1 到 3 天 | Frame、Text、Shape、Auto Layout、Export |
| 能做作品集畫面 | 需搭配專題練習 | Component、Prototype、版面規則、交付整理 |
Alice Wang 的建議是：不要把第一週花在背術語。能把一個登入頁、商品卡片或活動頁首做出來，學習速度會比只看功能介紹快很多。
第一次打開 Figma：工作區、檔案與畫布怎麼看？
第一次開 Figma 先認四個區域：左側圖層、中間畫布、右側屬性面板、上方工具列，這四個地方就是日常操作的核心。
| 介面區域 | 用途 | 新手先會做什麼 |
|---|---|---|
| 左側圖層面板 | 管理頁面、圖層、元件資源 | 找到物件、整理命名、調整層級 |
| 中央畫布 | 放置 Frame、文字、圖片與元件 | 縮放、拖曳、選取、排列畫面 |
| 右側屬性面板 | 調尺寸、顏色、文字、Prototype 與交付資訊 | 改寬高、字級、圓角、陰影、互動 |
| 上方工具列 | 切換選取、Frame、形狀、文字、留言等工具 | 建立物件與切換操作模式 |
左側圖層面板
左側圖層面板用來找物件、看層級、切換 Page，也能進入 Assets 找可重複使用的元件。新手常卡住的原因，是畫面看得到物件，卻不知道它在圖層裡叫什麼。
- Pages：同一個檔案中的不同頁面，例如 Wireframe、UI、Prototype。
- Layers：目前畫布中的 Frame、文字、形狀、圖片與元件。
- Assets：已建立或已引用的 Component。
實務上，圖層命名不用一開始就完美，但「Button / Primary」「Card / Product」會比「Rectangle 38」更容易交接。
中央畫布
中央畫布是放置所有設計物件的工作區，按住空白處拖曳可以移動畫布，用縮放快捷鍵可以快速檢查細節與整體版面。
- 用滑鼠滾輪或觸控板縮放畫面。
- 按住 Space 再拖曳，可以移動畫布視角。
- 點選物件後拖曳，可以移動位置。
- 框選多個物件，可以一起對齊、群組或套用 Auto Layout。
右側屬性面板
右側屬性面板會隨著選取物件改變，是調整尺寸、顏色、文字、Prototype 與工程資訊的主要位置。
| 分頁或區塊 | 主要用途 | 新手使用時機 |
|---|---|---|
| Design | 調整位置、尺寸、顏色、文字、效果 | 做畫面視覺時最常用 |
| Prototype | 設定點擊、導向、互動流程 | 需要展示流程時使用 |
| Inspect 或 Dev Mode | 查看尺寸、間距、顏色與程式相關資訊 | 工程交付或協作時使用 |
Figma 常用工具怎麼用？
Figma 常用工具先學選取、Frame、形狀、文字、圖片即可，鋼筆和鉛筆等向量工具可以等到需要畫圖示時再深入。
| 工具 | 用途 | 新手情境 |
|---|---|---|
| Move | 選取、移動、調整物件 | 幾乎每一步都會用 |
| Frame | 建立畫面或區塊容器 | 手機畫面、網頁區塊、卡片容器 |
| Shape | 建立矩形、圓形、線條 | 按鈕底色、卡片、分隔線 |
| Text | 新增文字 | 標題、段落、按鈕文字 |
| Image | 匯入圖片或填入物件 | 頭像、商品圖、封面圖 |
| Pen / Pencil | 繪製自訂向量圖形 | 圖示、特殊線條、插畫細節 |
選取工具與移動畫布
- 點一下物件：選取單一物件。
- 拖曳框選：選取多個物件。
- 按住 Shift：加入或取消多選。
- 按住 Space 拖曳：移動畫布視角。
- 滑鼠右鍵：開啟物件相關操作，例如複製、建立元件、排列順序。
如果一直選不到想要的物件，先看左側圖層面板。很多新手以為是工具壞掉，其實只是點到上層 Frame 或被其他透明圖層蓋住。
Frame、形狀、文字、圖片
- 按 F 建立 Frame，選擇手機或桌機尺寸。
- 按 R 畫矩形，做卡片、背景或按鈕底色。
- 按 T 新增文字，輸入標題、內文或按鈕文字。
- 拖入圖片檔，或把圖片填入矩形作為封面。
- 選取物件後，在右側調整尺寸、顏色、圓角與對齊。
鋼筆與鉛筆什麼時候才需要？
鋼筆和鉛筆適合畫自訂圖示、路徑與不規則形狀；如果只是做 App 畫面、網站區塊或作品集排版，前期不用把時間放在向量細節。
我通常會讓新手先用現成 icon、Community 資源或基本形狀完成畫面。等你知道自己缺哪個圖示，再回頭學 Pen Tool，會比較有效率。
Frame、Group、Section、Component 什麼時候用？
Frame 用來建立畫面與容器，Group 用來暫時整理物件，Section 用來分區說明，Component 用來管理會重複出現的 UI。
Frame vs Group vs Section
| 項目 | 適合用途 | 什麼時候用 | 新手提醒 |
|---|---|---|---|
| Frame | 畫面、卡片、版面容器 | 需要尺寸、背景、裁切、Auto Layout、Prototype | 做 UI 時優先用 Frame |
| Group | 暫時把物件綁在一起 | 只想一起移動或整理 | 不要拿 Group 當正式版面容器 |
| Section | 整理畫布上的大區域 | 分 Wireframe、UI、Prototype、交付區 | 適合讓團隊快速看懂檔案 |
| Component | 重複使用的 UI 元件 | 按鈕、卡片、表單欄位、導覽列會重複出現 | 改主元件會影響 Instance |
Component 主元件與 Instance
Component 是可重複使用的元件，主元件負責定義基礎樣式，Instance 是放到各畫面中的副本。當按鈕、卡片、導覽列需要在多個畫面出現時，就該考慮建立 Component。
例如你建立一顆「立即註冊」按鈕，把它做成 Component 後，每個畫面都使用 Instance。之後若要統一調整圓角或顏色，只要改主元件，就不用一顆一顆重畫。想進一步整理可維護的元件庫，可以看 Component Library 建立教學。
什麼東西不該每次重畫？
- 主要按鈕、次要按鈕、文字按鈕。
- 表單欄位、搜尋框、下拉選單。
- 商品卡片、文章卡片、會員卡片。
- 底部導覽列、頁首導覽列。
- 狀態標籤，例如成功、警告、錯誤。
樣式怎麼調？尺寸、顏色、文字、圓角、陰影
Figma 的樣式主要在右側屬性面板調整，常用項目包含尺寸、位置、Fill、Stroke、文字、圓角與 Effects。
| 要調整的項目 | 右側常見設定 | 用途 |
|---|---|---|
| 尺寸與位置 | W、H、X、Y | 控制寬高與座標 |
| 背景色 | Fill | 設定按鈕、卡片、區塊顏色 |
| 描邊 | Stroke | 建立邊框、分隔線、輸入框外框 |
| 圓角 | Corner radius | 調整卡片、按鈕、圖片邊角 |
| 陰影 | Effects | 建立層次，但不要過度使用 |
文字與字體設定
文字設定要先處理可讀性，再處理風格。字級、行高、字重、段落寬度會直接影響畫面是否像正式設計稿。
| 設定 | 調整方向 | 常見問題 |
|---|---|---|
| 字級 | 標題大、內文穩、註解小 | 全部一樣大會沒有層級 |
| 行高 | 內文不要太擠 | 多行文字貼太近會難讀 |
| 字重 | 標題可加粗，內文保持清楚 | 整頁都粗體會失去重點 |
| 字體缺失 | 確認本機或團隊是否有該字體 | 別人打開檔案時可能顯示不一致 |
顏色、描邊、圓角、陰影
顏色和效果要服務操作判斷。按鈕要像能點，輸入框要像能填，卡片要能和背景分開，這比追求華麗陰影更重要。
| 樣式 | 常用做法 | 新手容易犯的錯 |
|---|---|---|
| Fill | 用主色標示主要操作 | 顏色太多，使用者不知道重點 |
| Stroke | 用在輸入框、次要按鈕、分隔線 | 邊框太黑太粗，畫面變重 |
| Corner radius | 按鈕和卡片維持一致規則 | 每個元件圓角都不同 |
| Drop shadow | 輕微建立層次 | 陰影過深，看起來像早期簡報模板 |
Auto Layout 為什麼是基礎操作？
Auto Layout 是 Figma 基礎操作，因為按鈕、卡片、表單、導覽列都需要穩定控制間距、Padding、對齊與內容伸縮。
很多新手會把 Auto Layout 當進階功能，結果每改一次文字就要手動拉按鈕寬度。實際工作裡，越早學會 Auto Layout，越少遇到版面一改就歪掉的問題。
用 Auto Layout 做一顆按鈕
- 按 T 建立文字，例如「開始使用」。
- 選取文字後按 Shift + A，套用 Auto Layout。
- 在右側設定 Padding，例如上下 12、左右 20。
- 設定 Fill 作為按鈕底色。
- 調整 Corner radius，讓按鈕有一致圓角。
- 確認文字置中，之後修改文字長度時，按鈕會自動跟著變寬。
按鈕是最適合練 Auto Layout 的物件。它小、常見、容易看出差異，也能接到 按鈕設計規範 的實務判斷。
Auto Layout 最常調的 5 個設定
| 設定 | 用途 | 常見情境 |
|---|---|---|
| Direction | 控制水平或垂直排列 | 按鈕水平，列表垂直 |
| Gap | 控制物件之間的距離 | 圖示和文字間距、卡片內段落距離 |
| Padding | 控制內容到外框的距離 | 按鈕內距、卡片留白 |
| Alignment | 控制對齊方向 | 置中、靠左、靠上 |
| Resizing | 控制固定、包住內容或填滿容器 | 響應式卡片、導覽列、表單欄位 |
從 0 做出第一個 Figma 畫面
第一個 Figma 畫面可以從手機 Frame 開始，依序建立標題、卡片、按鈕、Prototype，最後匯出 PNG 或分享連結。
建立手機 Frame
- 按 F 開啟 Frame 工具。
- 在右側選擇手機尺寸預設，例如 iPhone 或 Android 常見尺寸。
- 命名 Frame，例如「Home」。
- 設定背景色，避免預設白底和畫布混在一起。
新手不要一開始就做太多畫面。先完成一個首頁或登入頁，會比同時開五個空白 Frame 更有成就感，也更容易修正。
畫出標題、卡片與按鈕
- 用 Text 工具建立頁面標題，例如「今日推薦」。
- 用 Rectangle 建立卡片底色，設定圓角與輕微陰影。
- 在卡片內放入圖片區、標題、簡短說明與價格或狀態文字。
- 建立一顆主要按鈕，套用 Auto Layout。
- 選取卡片內元素，調整對齊與間距。
做第一個畫面時，先求結構正確。顏色可以晚點微調，但標題、內容、按鈕、留白如果沒有邏輯，畫面再漂亮也很難交付。
建立簡單 Prototype 並預覽
- 複製第一個 Frame，建立第二個畫面，例如「Detail」。
- 選取第一個畫面中的按鈕。
- 切到 Prototype 分頁。
- 設定 On click，動作選 Navigate to，目標選第二個 Frame。
- 按 Present 預覽，確認點擊後會切換畫面。
匯出 PNG 或分享連結
- 要匯出圖片時，選取 Frame，在右側 Export 加入 PNG 或 JPG。
- 要讓別人看檔案時，按右上角 Share。
- 確認權限是 Can view 或 Can edit。
- 如果對方只需要看，不要直接給編輯權限。
更完整的學習路徑可以接著看 Figma 教學完整指南，但第一個畫面先做到能看、能點、能分享就夠。
新手必背 Figma 快捷鍵
Figma 快捷鍵先背 V、F、T、R、O、Space、Ctrl 或 Cmd + D、Ctrl 或 Cmd + / -，操作速度會明顯提升。
建立與選取快捷鍵
| 快捷鍵 | 功能 | 使用情境 |
|---|---|---|
| V | Move 選取工具 | 回到一般選取與移動 |
| F | Frame | 建立畫面或容器 |
| T | Text | 新增文字 |
| R | Rectangle | 畫卡片、背景、按鈕底色 |
| O | Ellipse | 畫圓形、頭像、狀態點 |
| Ctrl 或 Cmd + D | Duplicate | 複製物件 |
檢視與整理快捷鍵
| 快捷鍵 | 功能 | 使用情境 |
|---|---|---|
| Space + 拖曳 | 移動畫布 | 快速瀏覽不同 Frame |
| Ctrl 或 Cmd + + | 放大 | 檢查細節 |
| Ctrl 或 Cmd + - | 縮小 | 看整體版面 |
| Ctrl 或 Cmd + G | Group | 暫時整理多個物件 |
| Shift + A | Auto Layout | 把選取物件轉成自動排列容器 |
| C | Comment | 留下留言或標註問題 |
分享、留言、匯出與工程交付怎麼做？
Figma 協作收尾要確認四件事：分享權限、留言位置、匯出格式，以及工程師是否能看到尺寸、間距、顏色等交付資訊。
| 任務 | 操作位置 | 檢查重點 |
|---|---|---|
| 分享檔案 | 右上角 Share | 確認 Can view 或 Can edit |
| 留言 | Comment 工具 | 留言要貼近問題物件 |
| 匯出 | 右側 Export | 確認選到 Frame 或正確物件 |
| 工程交付 | Inspect 或 Dev Mode | 確認尺寸、間距、顏色、CSS 資訊 |
分享權限怎麼設定？
分享前先判斷對方需要看、留言，還是編輯。PM、客戶、行銷多半給 Can view 或留言權限；共同設計者才需要 Can edit。
如果對方打不開連結，先檢查檔案是否限制在特定 Team 或特定帳號。很多協作問題不是設計稿本身，而是權限沒有放到對方能進來的位置。
工程師要看的資訊在哪裡？
工程師通常需要尺寸、間距、顏色、字體、切圖與互動狀態。Figma 的 Inspect 或 Dev Mode 可協助查看這些交付資訊；依官方說明，Dev Mode 是付費方案中 Full seat 與 Dev seat 的功能，Starter 免費方案不包含完整 Dev Mode。
設計師交付時不要只丟一張截圖。把 Frame 命名清楚、元件狀態整理好、必要素材設定 Export，工程師才不用在檔案裡猜。
Figma 基礎操作常見錯誤排查
Figma 新手常見問題多半來自選錯圖層、Frame 裁切、Auto Layout 設定、Prototype 連線或分享權限，先查這幾項最快。
| 問題 | 可能原因 | 處理方式 |
|---|---|---|
| 物件對不齊 | 沒有使用對齊工具或 Auto Layout | 選取多個物件後用 Alignment，或改用 Auto Layout 控制間距 |
| 內容被裁切 | Frame 開啟 Clip content | 檢查右側 Clip content，或調整 Frame 高度 |
| 文字顯示不一樣 | 字體缺失或字重不同 | 改用團隊共用字體，或確認本機字體已安裝 |
| Prototype 點不到 | 連線物件錯誤、圖層被蓋住、Hotspot 太小 | 檢查 Prototype 連線與圖層順序 |
| 匯出尺寸不對 | 選到內部物件或倍率設定錯誤 | 選取完整 Frame，確認 Export 倍率 |
| 別人打不開連結 | 分享權限或團隊限制 | 檢查 Share 設定與對方登入帳號 |
物件對不齊怎麼辦？
先選取要對齊的物件，再用右側或上方的對齊工具。若物件本來就需要固定間距，例如卡片列表或按鈕內容，改用 Auto Layout 會比手動拖曳穩定。
Frame 裡的內容被裁切
選取 Frame 後檢查 Clip content。若開啟裁切，超出 Frame 邊界的內容會被隱藏；若要讓內容露出來，可以關閉裁切，或把 Frame 尺寸調大。
Prototype 點不到
Prototype 點不到時，先確認互動是否接在正確物件上，再檢查上方是否有透明圖層擋住。按鈕點擊區太小也會造成體驗不穩，必要時可以加大 Hotspot 或把互動接在整個按鈕 Frame 上。
哪些內容本文不深入？
Figma 基礎操作不需要一次學完整設計系統、Variables 多模式、企業權限治理或大型工具比較，這些主題適合等基礎工作流穩定後再看。
- 完整設計系統架構：可延伸閱讀 Design Token 與 Figma 管理方式。
- Variables 多主題、多模式管理：先知道它和樣式、元件有關即可，不必在第一週深挖。
- 大型元件庫治理：先能建立 Component，再學元件命名、變體與發布流程。
- 深度 Prototype 動畫：新手先會 On click 與 Navigate to 就能完成基礎展示。
- 課程推薦與工具比較：這些會分散操作焦點，不適合放在基礎操作教學裡。
- 費用方案細節：方案會調整，想看新手是否適合免費版，可參考 Figma 費用方案整理。
Styles、Components、Variables 的新手層級可以這樣記：Styles 管顏色與文字樣式，Components 管重複 UI，Variables 偏向設計系統與多狀態管理。第一階段先把 Styles 和 Components 用穩，後面再接 Variables 會比較順。
Figma 要學多久才會基礎操作？
如果目標是看懂檔案、建立簡單畫面、調整文字顏色與匯出圖片，通常 1 到 3 天可以上手。若要做到作品集等級，還需要用實際專題練習版面、元件與 Prototype。
Figma 有哪些主要功能？
Figma 主要功能包含介面設計、Prototype、多人協作、留言、元件管理、素材匯出與工程交付。新手先學 Figma Design 的畫面操作即可，FigJam、Plugin、Community 可以等有需求再補。
Figma 可以不用安裝、直接用瀏覽器嗎？
可以。Figma 是以瀏覽器為主的設計工具，桌機作業系統通常可透過支援的瀏覽器使用。若經常使用本機字體或想要更接近原生 App 的體驗，再安裝桌面版。
新手應該先學 Frame 還是 Component？
先學 Frame。Frame 是畫面和容器的基礎，會影響版面、裁切、Auto Layout 和 Prototype。當你開始重複畫同一種按鈕、卡片或導覽列時，再把它做成 Component。
Frame、Group、Section 差在哪裡？
Frame 適合當正式畫面或版面容器，Group 適合暫時把多個物件一起移動，Section 適合整理畫布上的大區域。做 UI 時優先用 Frame，整理檔案時再搭配 Group 和 Section。
Auto Layout 對新手來說一定要學嗎？
建議一定要學。Auto Layout 可以控制間距、Padding、對齊和內容伸縮，做按鈕、卡片、表單時非常常用。新手先從一顆按鈕練起，比直接挑戰整頁版面容易。
Figma 常用快捷鍵有哪些？
新手最常用的是 V 選取、F 建立 Frame、T 建立文字、R 畫矩形、O 畫圓形、Space 移動畫布、Ctrl 或 Cmd + D 複製、Shift + A 套用 Auto Layout。
Figma 免費版夠新手使用嗎？
夠新手練習基礎操作、個人草稿和簡單設計。依 Figma Starter 官方說明，Starter 是免費方案，但有功能限制，例如沒有團隊 Libraries、版本歷史較短，也不包含 Dev Mode。若要正式團隊協作或完整交付，再評估付費方案。
Figma 桌面版和瀏覽器版差在哪裡？
Figma 官方說明指出，桌面版和瀏覽器版提供相同核心功能。桌面版的優勢是較接近原生 App 體驗，也能直接使用裝置上已安裝的字體；瀏覽器版則適合快速開啟與跨裝置使用。可參考 Figma 桌面版官方說明。
可以用平板或手機做 Figma 設計嗎？
手機和平板較適合預覽、留言或檢查畫面，不適合長時間做完整介面設計。Figma 主要設計工作仍建議用桌機或筆電操作，因為圖層、快捷鍵、拖曳和細節調整都更穩定。
為什麼分享連結別人打不開？
常見原因是對方沒有權限、登入錯帳號、檔案限制在特定 Team，或連結設定不是公開可檢視。先打開 Share，確認對方帳號是否被加入，並確認權限是 Can view 或 Can edit。
匯出圖片尺寸不對怎麼辦？
先確認你選取的是完整 Frame，不是裡面的單一物件。再檢查 Export 的格式和倍率，例如 1x、2x。若匯出後邊界怪怪的，通常是 Frame 尺寸或內容超出邊界造成。