Figma 簡介

🎨 學習內容：

• 認識 Figma 的介面與基本操作
• 繪製基本形狀與元件（Frame, Rectangle, Text, etc.）
• 使用 Auto Layout 打造彈性 UI
• 設計簡單的 App 介面（如登入頁）
• 設計原則與排版基礎概念
• 匯出設計稿與原型分享

🧠 核心概念解釋

1. Figma 是什麼？

Figma 是一個雲端的 UI/UX 設計工具，可以多人即時協作，廣泛用於 App、網站等界面設計。

2. 基本元素介紹：

• Frame：相當於設計的「畫布」或手機畫面框架。
• Shape：矩形、圓形、線條等基本圖形，用來構成 UI 元素。
• Text：文字區塊，用於標題、說明等。
• Component：元件，可以重複使用、統一樣式。
• Auto Layout：讓元件自動排列、對齊，適應不同內容長度。

💻 操作範例與步驟

範例：製作簡單的登入畫面

步驟 1：建立畫面框架

• 選擇 Frame 工具 → 點選 iPhone 13 畫布
• 背景填上淡灰色 #F5F5F5

步驟 2：加入 Logo 與標題

Text：「Welcome Back!」
Font: Inter Bold, Size: 24, 顏色: #333

步驟 3：建立輸入框（使用 Rectangle + Text 組合）

• Rectangle：寬 320, 高 48, 圓角 6px, 邊框顏色 #CCC
• Text：「Email」放在上方，Size: 14

步驟 4：加入按鈕

• Rectangle：320x48, 顏色 #007AFF, 圓角 6px
• Text：「Log In」, 白色，置中對齊

步驟 5：使用 Auto Layout 打包成元件

• 選取輸入區塊與按鈕 → 點擊右側「+ Auto Layout」
• 設定間距與 Padding

🧪 實作練習

練習題 1：設計一個註冊畫面（Register Page）

• 包含：Logo、輸入欄（姓名、Email、密碼）、註冊按鈕
• 使用 Auto Layout 排列整齊
• 色彩風格自由發揮，但要保持視覺一致性

練習題 2：建立元件庫

• 把按鈕、輸入欄做成 Component
• 拖曳複製進不同畫面使用

📤 分享與輸出

• 點右上角「Share」設定權限，產生連結分享
• 或「Prototype」切換頁面連結 → 產生互動式畫面