# Figma 是什麼與能做什麼

* 用於設計網頁與手機等使用者介面
* 可展示操作時的互動功能
* 支援團隊即時溝通與協作
* 可直接透過瀏覽器操作，檔案存放雲端
* 提供 Windows 與 Mac 桌面版可下載使用

# 註冊與登入方式

* 可從首頁右上角進行免費註冊
* 可直接使用 Google 帳號登入

# 建立新文件與設定畫布

* 透過「新增」建立空白 Figma 文件並命名
* 設計 App 前需先建立放置設計元素的畫布
* Figma 提供多種預設畫布尺寸（桌機、平板、手機等）
* 範例以 iPhone 11 Pro 作為畫布大小

# 匯入 Logo 與縮放技巧

* 直接從資料夾拖曳 Logo 進入 Figma
* 直接拖曳邊框縮小可能造成文字被裁切
* 按住 Shift 可鎖定長寬比例避免剪裁
* 可用縮放工具（工具列啟用，快捷鍵 K）縮放圖形避免裁切

# 位置調整與瀏海安全區

* Logo 放在主頁頂端時需避免太靠近邊緣
* 使用下方向鍵微調位置，落在約 Y = 55
* Logo 放入畫布後會自動成為畫布的子圖層
* 移動畫布時子圖層會一起移動
* 將圖形移出畫布後，子圖層關係會解除

# 建立頁首矩形與圖層管理

* 在 Logo 位置繪製矩形作為頁首背景
* 將矩形圖層移到 Logo 下方
* 雙擊圖層可重新命名
* 可在右側面板調整填色與外觀設定

# 填色、漸層與輪廓設定

* 填色可用單色，也可使用漸層樣式並在圖形內編輯
* 需要改回單色可切換回 Solid
* 可設定輪廓色彩並套用淺灰
* 將輪廓位置設定在圖形外側

# 網格系統的設定與儲存樣式

* 使用網格系統提升版面編排效率與一致性
* 將網格類型設為「欄」
* 欄數設定為 4
* 版面邊界加寬到 25
* 將網格設定儲存成「樣式」以便套用到其他版面

# 文字工具與文字樣式建立

* 先輸入文字內容，再於右側面板調整字體、大小、顏色
* 在右上角點擊「+」將文字格式儲存成文字樣式
* 後續其他標題可直接套用相同樣式

# 假文字與外掛擴充

* 初期缺少正式文案與圖片時可先用圖框作替代
* 文字可使用排版常用的假文字
* Figma 無內建假文字功能，但可透過外掛加入
* 範例同時安裝假文字外掛與插入圖示的外掛

# 使用外掛產生假文字

* 點擊已建立的文字框後將字體大小改為 14
* 右鍵選單啟用假文字功能
* 點擊「自動產生」填入裝飾用文字

# 使用外掛插入圖示與修改顏色

* 透過外掛插入常見 App 圖標（例如 menu）
* 將 menu 圖標放在 Logo 左側
* 以 search 關鍵字插入放大鏡並放在右上角
* 插入的圖標為向量格式，可依需求修改顏色
* 若外掛不滿意可在外掛管理介面點擊「-」移除

# 鋼筆工具與分隔線繪製

* 工具列提供鋼筆工具繪製各角度直線
* 拖曳可產生曲線
* 按 Enter 結束線段繪製
* 範例用鋼筆工具在文字框底部繪製分隔線並設為淺灰

# Constraints 的用途與應用


* 放大或縮小畫布時，若未設定限制版面可能會破碎
* Constraints 可讓元件在縮放時自動適應畫布尺寸
* Logo 可固定在水平中央
* 放大鏡可貼齊網格右邊緣
* 頁首方框、圖片、文字方塊與分隔線可同時對齊網格左右兩側
* 設定後再測試縮放，版面內容會自動適應新畫布大小

# 插入圖片與替換圖框內容

* 使用左上角「插入圖片」指令選取影像檔
* 用滑鼠點擊灰色矩形即可把圖片置入
* 若網格暫時用不到可隱藏
* Windows 按 Ctrl + Shift + G，Mac 按 Ctrl + G 隱藏網格

# 圖片裁剪與影像調整

* 圖框與原始圖檔長寬比不一致會導致裁剪
* 可在工具列啟用裁剪功能調整顯示範圍
* 右側面板可調整亮度、對比等基本影像參數
* 調整完成按 Enter 結束

# 複製版面內容與延伸畫布空間

* 要製作第二則訊息時可先複製第一則並替換內容
* 若底部空間不足可先拉遠視圖再延伸畫布底部
* 按住 Ctrl/Command 搭配滑鼠滾輪可縮放視圖
* 按住空白鍵拖曳可平移畫布視角
* 選取畫布後可將底部空間向下延伸

# 複製到另一欄並替換標題與圖片

* 框選第一則訊息後按住 Alt/Option 複製到第二欄位置
* 將該欄標題改為「最新消息」
* 從資料夾拖曳新影像到右側 Fill 欄即可替換圖片

---

# 圖片瀏覽的水平捲動製作流程

* 將貼文往下複製到第三個欄位並輸入新的文字標題
* 刪除底下的文字框，並把上方圖片區塊拉高
* 將圖片內容清空，改回單色作為佔位

# 使用 Auto Layout 建立水平排列

* 按住 Alt/Option 複製矩形，再用 Ctrl/Command + D 重複複製直到共有四個矩形
* 全選四個矩形後，在右側面板套用 Auto Layout
* 透過 Auto Layout 快速調整排列方向、圖形間距與畫布邊界大小

# 批次匯入多張影像到指定圖框

* 在左上角執行「插入影像」
* 一次選取四個圖檔
* 用滑鼠依序點擊四個圖框，快速完成影像對應匯入

# 啟用水平捲動的必要條件與設定

* 捲動成立的前提是內容寬度必須大於可見範圍
* 先縮減畫布大小，讓圖片內容超出可視區
* 切換到第二個標籤並開啟「水平捲動」
* 將畫面拉回手機主頁並按右上角「播放」測試滑動效果

# 修正頁首跟著內容捲動的問題（固定位置）

* 發現頁首會被滑出畫面，導致功能選單與搜尋無法操作
* 回到編輯介面，按住 Shift 依序選取頁首所有元素
* 在右側面板勾選「固定位置」
* 再次測試後頁首維持不動

# 霧面玻璃效果：背景模糊＋透明度

* 選取矩形後在右側面板底部新增「背景模糊」
* 模糊強度設定約 30
* 將圖片透明度降低約一半
* 捲動時呈現類似霧面玻璃的視覺效果

# Components（組件）的用途與同步更新

* 以活動清單為例，先叫出網格並用矩形工具畫出正方形
* 將正方形拉到外面並透過工具列轉換成「組件」
* 組件會出現在資源庫，方便重複使用
* 當需求變更（例如照片改成圓角）只需改原始組件即可同步更新所有分身
* 文字內容完成後可用快速鍵再次隱藏網格

# 建立活動詳情的疊加圖層（Overlay）

* 建立與主頁同寬的白色矩形並調整圓角
* 若底部不需要圓角，可按 Alt/Option 將指定邊角還原
* 由於動畫以畫布為單位，將矩形透過右鍵轉成畫布
* 在畫布內用 Alt/Option 拖曳複製增添圖文內容
* 選取清單標題切到 Prototype，從小白點連結到詳情畫布
* 觸發方式維持 On tap，顯示方式為疊加且對齊主頁底部
* 疊加層外區域設為調暗，點擊暗色背景可關閉疊加層
* 動畫使用「進入」效果，方向從下方

# 頁面切換導覽：主頁到搜尋頁

* 用畫布工具建立搜尋頁並套用先前儲存的網格樣式
* 複製頁首到搜尋頁，新增搜尋框、放大鏡與提示文字
* 在搜尋欄下方建立四個圓角矩形作為作品瀏覽連結區
* 多張圖片可用紅線調整間距，拖曳中央紅點可交換圖片位置
* 搜尋頁完成後切到 Prototype，將放大鏡連結到搜尋頁
* 關閉先前的移動動畫以完成基本頁面導覽

# 搜尋欄呼叫鍵盤：疊加圖層應用

* 以 Prototype 將搜尋欄連結到鍵盤畫布
* 鍵盤顯示方式設為疊加，位置在搜尋頁底部
* 勾選相關選項讓鍵盤可自動收合
* 動畫採用「從下方移入」

# 社群資源與協作分享

* Figma 社群提供大量可複製的資源，進入頁面後按「複製」即可加入專案使用
* 透過右上角「分享」產生邀請連結，可讓客戶或同儕以留言進行即時討論

---

# Terminology
* 即時協作（Real-time Collaboration）：多人同時在同一份設計檔編輯、留言與同步更新的工作模式
* 雲端儲存（Cloud Storage）：檔案存放於雲端伺服器，跨裝置存取並保留版本紀錄
* 設計檔（Design File）：承載畫面、元件、樣式與原型設定的主要文件單位
* 專案空間（Project Space）：用來分組管理多份設計檔與權限的工作區結構
* 畫框（Frame）：作為介面畫布的容器，可套用裝置尺寸並承載子圖層
* 裝置預設（Device Presets）：快速建立特定手機/平板/桌機尺寸畫框的內建範本
* 資源面板（Assets Panel）：集中管理元件、樣式與外部資源以供拖拉使用的區域
* 圖層面板（Layers Panel）：檢視與管理所有圖層命名、層級與可見性的操作介面
* 圖層階層（Layer Hierarchy）：父子巢狀關係的結構，影響移動、約束與組織方式
* 子圖層（Child Layer）：被包含在畫框或群組之下、會隨父層移動與縮放的圖層
* 解除巢狀（Unnest）：將圖層移出父容器以解除從屬關係，避免跟隨移動
* 重新命名（Rename）：以一致命名規則提升可讀性與團隊協作效率的做法
* 填色（Fill）：設定物件內部顏色或影像填滿的屬性
* 漸層填色（Gradient Fill）：使用線性/放射等漸層在物件內建立色彩過渡效果
* 單色填滿（Solid Fill）：以單一色值作為物件填色的模式
* 描邊（Stroke）：物件外框線條的顏色、粗細與位置設定
* 外側描邊（Outside Stroke）：描邊向外擴張以避免侵入內容區的描邊定位方式
* 不透明度（Opacity）：控制圖層透明程度以建立層次、弱化或遮罩效果
* 網格系統（Grid System）：用規則欄列輔助版面對齊與一致留白的佈局方法
* 欄網格（Column Grid）：以多欄結構定義內容對齊基準的網格類型
* 版面邊界（Margins）：內容區與畫框邊緣之間的固定留白區域
* 欄間距（Gutter）：欄與欄之間的間距設定，用於維持版面節奏
* 樣式（Styles）：可重用的文字、顏色、效果等設定集合，用於一致化管理
* 文字樣式（Text Styles）：字體、大小、行高、字重與顏色等文字規格的可重用定義
* 色彩樣式（Color Styles）：品牌色與語意色的集中管理，確保跨頁一致與易於更新
* 外掛（Plugins）：擴充功能模組，用於補足假文字、圖示插入等工作流程需求
* 假文字（Lorem Ipsum）：排版階段用來模擬正文長度與節奏的占位文字內容
* 向量圖形（Vector）：可無損縮放的路徑圖形格式，適合圖示與介面元素
* 圖示外掛（Icon Plugin）：快速搜尋並插入常用 UI 圖示的外掛工具類型
* 縮放工具（Scale Tool）：以等比方式縮放物件並同步調整描邊/效果的工具
* 等比例縮放（Constrain Proportions）：鎖定長寬比避免變形或文字被裁切的縮放行為
* 微調位移（Nudge）：用方向鍵以小步進移動元素，精準調整位置
* 對齊（Alignment）：使多個物件在水平或垂直方向對準共同基準線的操作
* 分佈（Distribute）：讓多個物件間距平均化以建立整齊排列的版面規則
* 約束（Constraints）：定義物件相對於父畫框的黏著與伸縮規則以支援響應式
* 固定捲動位置（Fix Position When Scrolling）：讓頁首等元素在原型捲動時保持固定
* 自動排版（Auto Layout）：自動管理方向、間距與內距，使元件可隨內容自動伸縮
* 水平捲動（Horizontal Scrolling）：在原型中啟用橫向滑動瀏覽內容的互動行為
* 溢出行為（Overflow Behavior）：控制內容超出可視區時的捲動/裁切呈現方式
* 原型模式（Prototype）：用連結與動畫定義頁面流程、互動與轉場的功能區域
* 互動連線（Interaction Connector）：從節點拖拉建立畫面跳轉或觸發互動的連結線
* 觸發條件（Trigger）：定義互動發生的事件來源，如點擊、拖曳或滑入
* 點擊觸發（On Tap）：以手指點擊作為互動啟動條件的原型事件
* 疊加圖層（Overlay）：在不離開當前畫面下方疊出新層的呈現方式（如彈窗/鍵盤）
* 背景遮罩（Backdrop）：疊加層外的半透明暗色區，用於聚焦內容並提示可關閉
* 點擊外部關閉（Click Outside to Close）：點擊遮罩區即可收合疊加層的互動設定
* 動畫過渡（Transition）：畫面或狀態切換時的動態效果設定（如滑入、淡入）
* 智慧動畫（Smart Animate）：比對相同圖層名稱並自動補間，產生自然的轉場動畫
* 背景模糊（Background Blur）：模糊疊加層後方內容以營造霧面玻璃與景深效果
* 裁剪（Crop）：調整影像在圖框內的可視範圍以避免不必要的截切或失真