Figma UI3 新手入門教學：Frame 框架、Auto Layout 自動佈局與基礎組件

打開空白畫布不知從何下手？先搞懂 Frame 與 Auto Layout 兩大基石

剛接觸 UI/UX 介面設計的新手，第一次打開 Figma 時常常會把畫布當成一般繪圖軟體，用矩形工具拉出一堆方框，結果只要改一行字或換一張圖，整個版面就瞬間走位崩潰！😭 這份入門選集先從文字、圖片與外框的關係切入。要把 Figma 用得順手，核心關鍵在於建立「結構化容器」的思維——也就是理解 Frame（框架） 與 Auto Layout（自動佈局） 的運作邏輯。

特別是更新到 Figma UI3 介面之後，底部浮動工具列與右側屬性面板變得更加精簡，但像是 Hug contents（貼合內容）、Fill container（填滿容器）以及 Gap（間距）與 Padding（內距）等設定，依然是決定版面能否自動適應不同螢幕尺寸的靈魂所在。只要把這套彈性盒子概念打通，日後修改按鈕或卡片列表就再也不用逐個像素手動拖拉了！💡

從零基礎介面導覽、自動佈局實作到第一個基礎組件的 3 階段學習路線

為了幫大家省去在茫茫片海中摸索的時間，兔兔精選了 7 部針對零基礎與初學者設計的中文實戰教學，並分成三個循序漸進的階段：第一階段先用 30 分鐘快速熟悉 Figma 下載安裝、UI3 工作環境與完整設計流程；第二階段集中火力攻克新手最容易卡關的 Auto Layout 自動佈局 與 Suggest Auto Layout 智能排版技巧；第三階段則帶你建立第一個可重複使用的 Component（基礎組件） 與簡易頁面跳轉原型。跟著影片一步步練習，對照範例練習第一張 App 介面卡片。