Figma X AI 介面動效實戰：從 Prototype 到 UI Motion 打造流暢的互動體驗
0 seconds of 1 minute, 6 secondsVolume 0%
Press shift question mark to access a list of keyboard shortcuts
鍵盤快捷鍵
播放/暫停空白鍵
音量增加↑
音量減少↓
快進 5 秒→
倒退 5 秒←
開啟/關閉字幕c
全螢幕/離開全螢幕f
靜音/取消靜音m
Decrease Caption Size-
Increase Caption Size+ or =
跳轉至%0-9
Figma X AI 介面動效實戰：從 Prototype 到 UI Motion 打造流暢的互動體驗
從 Figma 元件、Prototype 到 AI 動效企劃，做出按鈕回饋、頁面轉場、Loading 等必要動效，完成一套可放進作品集的 UI Motion 作品。
Hahow AI 學習升級
現有募資優惠
募資倒數50天12時33分
進度 0/10 人
預計於 2027-02-12 凌晨 04:00 開課
關於課程
預計包含
預計 10 章 56 單元、3 項作業
預計課程時長
5 時 0 分鐘
當前購買數
0 位同學
觀看限制
不限觀看次數，還會附贈完課證書
學習升級
Hahow AI 學習助教
無需額外付費
即時問答、重點整理、測驗理解，讓知識派上用場
課程內容
課前問題 & 作業回覆與頻率
- 課前問題回覆：購課前的問答，老師會在 3 天內進行回覆
- 課程討論回覆：課程討論區的問題，老師預計在 3 天內進行回覆
- 批改作業的頻率：老師預計在 7 天內進行回覆批改作業，並將按照繳交順序依序回覆批改
哪些人適合這堂課？
適合
UI／UX 轉職準備者：作品集只有靜態畫面，想補上 Prototype 與動效，完整呈現操作流程。
接案設計師：想從靜態介面進階到互動提案，讓客戶看得懂頁面怎麼切換、按鈕怎麼回應。
Figma／網頁設計新手：會畫基本介面，但不知道按鈕回饋、頁面轉場、Modal、Loading 怎麼做。
平面／視覺設計師：想把視覺能力延伸到 UI Motion、AI、2D 與 3D，拓展作品類型。
較不適合
想學 After Effects、Cinema 4D 等專業動畫軟體做影片特效的同學。
想學前端程式、直接把動效寫成網站或 App 程式碼的同學。
你可以學到
實際做出來的成果
一套旅遊 App 的可操作 Prototype，包含按鈕回饋、頁面轉場、彈窗、Loading、成功畫面
一份自己的品牌動效 AI Skill，定義動畫速度、Easing、風格與禁用效果
Loading、Success、404 等常用 2D 動態素材，以及能回應滑鼠的 3D 互動元素
一個可以放進作品集的完整 UI Motion 案例
學會的能力
判斷什麼時候該動、為什麼要動，掌握時長、Easing、節奏
熟練 Figma Component、Variant、Prototype、Smart Animate 與 Motion
用 AI 分析互動情境、規劃動效分鏡，加快設計流程
分辨 Lottie、GIF、MP4、WebM 的差異，知道怎麼交付給工程師或客戶
不同程度的收穫
新手：從 Figma 元件與狀態開始，一步步做出第一個可操作的介面。
已有基礎：建立動效判斷力與品牌規範，用 AI 加速，把作品提升到提案、交付等級。
上課前的準備
需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）
電腦一台（Windows 或 Mac 皆可），建議搭配滑鼠
Figma：免費版即可，桌面版或瀏覽器版都可以
ChatGPT 或其他生成式 AI 工具：免費版即可
Lottielab：免費版可完成基礎練習
部分 AI／3D 工具有免費額度限制，進階功能依官方方案付費，課程中會另外說明需要具備的背景知識
不需要動畫製作經驗，具備基本電腦操作能力即可
課程會從 Figma 基礎開始，完全沒用過也能跟上
有 UI／UX、平面或網頁設計經驗的話，上手會更快預計單元
預計 10 章 56 單元｜預計總時長 300 分鐘
全部展開1
課程介紹
影片單元
單元 1 - 從好看的畫面，到流暢的體驗：動效如何影響使用感受
影片單元
單元 2 - 作品展示：學完能做出什麼
影片單元
單元 3 - 課程地圖與案例介紹
影片單元
單元 4 - 工具準備：Figma、AI 工具、Lottielab
2
先修｜Figma 基礎快速複習
影片單元
單元 1 - 介面導覽：圖層面板、屬性面板、工具列
影片單元
單元 2 - Frame、Group、Section 的差別
影片單元
單元 3 - 基本繪圖與文字：形狀、填色、描邊、文字樣式
影片單元
單元 4 - 對齊、間距與 Constraints
影片單元
單元 5 - Color / Text Style 與 Variables 基本概念
影片單元
單元 6 - 常用快捷鍵與檔案整理習慣
3
Figma 元件與狀態設定
影片單元
單元 1 - 為動效而建立的版面結構：Frame 巢狀與圖層層級
影片單元
單元 2 - Auto Layout：間距、對齊、Hug/Fill、元件伸縮
影片單元
單元 3 - Constraints 與裁切：元素在轉場時的位置與遮罩
影片單元
單元 4 - Component 與 Instance：主元件、覆寫、替換
影片單元
單元 5 - Variant 與元件屬性：Boolean、Instance Swap、Text 屬性
影片單元
單元 6 - 狀態設計：Default、Hover、Pressed、Disabled、Loading
影片單元
單元 7 - 圖層命名與結構一致性：Smart Animate 成功的關鍵
影片單元
單元 8 - 實作：建立貫穿案例的按鈕、輸入框、卡片元件組
作業單元
作業 1 - 作業一｜做出可以操作的介面
4
動畫的加法與減法
影片單元
單元 1 - 五種動畫類型：功能型、回饋型、轉場型、引導型、品牌型
影片單元
單元 2 - 判斷該不該動：從使用情境找出動畫的目的
影片單元
單元 3 - 動畫的參數：時間、速度、距離、延遲
影片單元
單元 4 - Easing 曲線：讓動作看起來自然
影片單元
單元 5 - 層級與連續性：讓使用者感受到變化
影片單元
單元 6 - 實作：製作出「動效需求清單」
5
用 Figma Prototype，串起可以操作的介面
影片單元
單元 1 - Prototype 基礎：Flow、起始畫面與畫面跳轉
影片單元
單元 2 - Trigger 與 Action：點擊、Hover、按住、延遲觸發
影片單元
單元 3 - Overlay：Modal、下拉選單、提示框
影片單元
單元 4 - Scroll 與固定元素：捲動區塊、固定導覽列
影片單元
單元 5 - 用 Variables 做出不同狀態
影片單元
單元 6 - 實作：按鈕狀態、選單展開、Modal、頁面轉場、進度條
6
從 Smart Animate 到 Motion，做出更細緻的介面動畫
影片單元
單元 1 - Smart Animate 原理：圖層如何被配對、為什麼動畫會失敗
影片單元
單元 2 - Interactive Component：讓元件自己帶著動畫
影片單元
單元 3 - Figma Motion 入門：Timeline 與 Keyframe
影片單元
單元 4 - Easing 與 Motion Variables：統一控制動畫參數
影片單元
單元 5 - 實作：為貫穿案例升級按鈕回饋與頁面轉場
7
用 AI 整理動效想法、規劃分鏡
影片單元
單元 1 - 先把互動目的說清楚：給 AI 的情境描述框架
影片單元
單元 2 - 請 AI 分析情境、提出多個動效方案
影片單元
單元 3 - 用 AI 規劃 Storyboard 與分鏡
影片單元
單元 4 - 生成提示詞，並帶進 Figma 製作
影片單元
單元 5 - 設計師的判斷：檢查 AI 方案是否適合這個操作
影片單元
單元 6 - 實作：用 AI 為一個新流程規劃動效並完成製作
8
打造品牌專屬 AI Skill，建立自己的動效規範
影片單元
單元 1 - 為什麼需要動效規範：一致性與團隊溝通
影片單元
單元 2 - 定義規則：速度分級、Easing、風格、禁用效果
影片單元
單元 3 - 撰寫品牌 AI Skill：結構與寫法
影片單元
單元 4 - 用 Skill 讓 AI 提出符合規範的動效建議
影片單元
單元 5 - 用 Skill 檢查既有動畫是否符合規範
影片單元
單元 6 - 實作：建立專屬動效 Skill
作業單元
作業 1 - 作業二｜動效升級與品牌規範
9
製作 2D 動畫素材
影片單元
單元 1 - Lottielab 介面與基本操作
影片單元
單元 2 - Loading 動畫
影片單元
單元 3 - Success 與錯誤回饋動畫
影片單元
單元 4 - 角色/吉祥物動畫
影片單元
單元 5 - 格式選擇：Lottie、GIF、MP4、WebM、透明背景的差異與交付方式
10
把動效放進你的作品集
影片單元
單元 1 - 整合檢查：從規劃、製作到交付的完整流程回顧
影片單元
單元 2 - 作品集呈現：錄製操作影片、展示動效思考過程
影片單元
單元 3 - 交付與溝通：如何向客戶或工程師說明動效
影片單元
單元 4 - 課程總結與延伸學習方向
作業單元
作業 1 - 作業三｜期末整合作品
關於講師
圈外設計
3堂課程0篇文章336位學生
你好！我是圈外設計的 Chris，擁有 9 年以上的介面設計與視覺設計經驗，畢業於國立台灣藝術大學多媒體動畫藝術系，並於 2019 年創辦「圈外設計」個人品牌，致力於將難懂的設計知識製作成易懂的懶人包。
專注於介面設計、視覺設計與插畫，並於介面與視覺設計上致力進行教學。
購買單堂課
募資價
NT$5,280
有什麼優惠可以用？
小蛙幫你找最佳優惠
登入看看 有什麼優惠用
