本單元主要介紹 Figma 的基本操作。
2025/3/26小於 1 分鐘
🎨 學習內容：
- 認識 Auto Layout 的基本概念與使用情境
- 加入 Auto Layout 到選取的物件或元件
- 編輯 Auto Layout 的屬性（方向、間距、對齊、填滿容器等）
- 巢狀 Auto Layout 的應用
- 使用 Suggest Auto Layout 自動轉換設計
- Auto Layout 在元件（Components）中的應用限制與技巧
🧠 核心概念講解：
Auto Layout 是什麼？
2025/3/26大约 2 分鐘
🎨 學習內容：
- 認識 Figma 的介面與基本操作
- 繪製基本形狀與元件（Frame, Rectangle, Text, etc.）
- 使用 Auto Layout 打造彈性 UI
- 設計簡單的 App 介面（如登入頁）
- 設計原則與排版基礎概念
- 匯出設計稿與原型分享
🧠 核心概念解釋
1. Figma 是什麼？
Figma 是一個雲端的 UI/UX 設計工具，可以多人即時協作，廣泛用於 App、網站等界面設計。
2025/3/26大约 2 分鐘
📚 學習內容：
- 認識 Prototype 原型設計的基本用途與流程
- 製作多個畫面（Frame）與元件（Component）
- 建立互動連結與動畫效果
- 使用 Smart Animate 增加動畫過渡
- 模擬點擊與拖曳行為
- 分享與預覽原型
🧠 核心概念講解：
🧩 Prototype 是什麼？
Prototype 是用來模擬使用者操作介面的流程，例如點選按鈕後跳頁、展開資訊、切換狀態等。可以用來：
- 使用者流程測試
- 設計提案展示
- 團隊溝通與開發驗證
2025/3/26大约 2 分鐘
🧩 學習內容：
- 什麼是 Wireframe 與 Prototype
- Wireframe 建立流程與注意事項
- 使用 Grids & Constraints 建立結構
- Prototype 工具操作與互動設定
- 實作簡易使用流程（使用者從首頁點擊進入產品細節頁）
- 分享與測試原型的方法
🧠 核心概念解釋
1. 什麼是 Wireframe？
Wireframe 是設計的草圖，專注在「資訊架構與版面配置」，不強調色彩與細節美化。通常是設計流程的第一步。
2025/3/26大约 2 分鐘
本單元簡介 JavaScript 的基本語法與操作 DOM 的方法。
2025/3/11小於 1 分鐘
📌 學習目標
✅ 了解 AJAX 概念
✅ 學會 Promise 和 async/await
✅ 串接外部 API 資料
✅ 整合非同步技術開發實用功能
AJAX 概念
AJAX 代表「非同步 JavaScript 與 XML」（Asynchronous JavaScript and XML）：
2025/3/11大约 3 分鐘
📌 學習目標
✅ 了解 陣列 (Array) 與 物件 (Object) 的基本概念與操作
✅ 學會使用 JSON 格式傳遞與儲存資料
✅ 熟悉 陣列的常見方法 (map、filter、reduce、forEach)
✅ 透過 API 串接學習 資料處理與篩選技巧
2025/3/11大约 2 分鐘
📌 學習目標
✅ 了解如何使用 JavaScript
✅ 修改 HTML 內容與屬性
✅ 監聽使用者行為（點擊、鍵盤輸入）
✅ 了解事件委派與事件冒泡
在 HTML 中使用 JS
內嵌 JavaScript（Inline JavaScript）
直接將 JavaScript 程式碼寫在 HTML 標籤的 事件屬性（如 onclick）中。 適合簡單的事件處理，但不利於程式碼維護。
2025/3/11大约 3 分鐘
📌 學習內容
✅ 了解 JavaScript 的基本語法與特性
✅ 掌握變數、資料型別與運算符
✅ 學會使用條件判斷與迴圈
✅ 理解函式的定義與呼叫方式
JavaScript 簡介
JavaScript 是一種網頁程式語言，可以使網頁具有互動性，目前已成為全球最受歡迎的程式語言之一。
JavaScript 能做什麼？
2025/3/11大约 1 分鐘