Figma Motion (Beta) 教學 (ft. Claude Code)
4.4K views · 2026-07-04
UI DesignInteraction & UX
這集我們來看一下 Figma Motion (Beta) 的使用方式。這是一個還蠻簡單的軟體操控簡介，不是關於動畫或動態設計的教學。這集裡，我們也會看到，利用Motion做出的動態，結合Claude Code，做出在實際工作裡可以用到的結合。
個人覺得這Figma Motion功能很陽春，所以想要依賴它來做互動設計，還有一段距離。
____________________________________________________
【參考連結】
學習Figma Motion: https://help.figma.com/hc/en-us/categories/41274596092695-Figma-Motion
基礎Motion動態設計: https://help.figma.com/hc/en-us/sections/41236726027287-Motion-design-fundamentals-collection
Claude Code Figma MCP: https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server
____________________________________________________
【章節】
00:00 主題前言
00:08 Motion基礎
07:06 Easing
10:43 Animation資料庫
13:42 Path路徑動畫
16:08 Arc動畫
18:11 Component動畫
20:49 Export輸出動畫
21:55 Anchor中心點
23:00 關於Motion的一些疑惑
25:36 實際Motion範例
28:07 Motion到Claude Code
32:00 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#FigmaMotion #Figma動畫 #Figma動態設計
個人覺得這Figma Motion功能很陽春，所以想要依賴它來做互動設計，還有一段距離。
____________________________________________________
【參考連結】
學習Figma Motion: https://help.figma.com/hc/en-us/categories/41274596092695-Figma-Motion
基礎Motion動態設計: https://help.figma.com/hc/en-us/sections/41236726027287-Motion-design-fundamentals-collection
Claude Code Figma MCP: https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server
____________________________________________________
【章節】
00:00 主題前言
00:08 Motion基礎
07:06 Easing
10:43 Animation資料庫
13:42 Path路徑動畫
16:08 Arc動畫
18:11 Component動畫
20:49 Export輸出動畫
21:55 Anchor中心點
23:00 關於Motion的一些疑惑
25:36 實際Motion範例
28:07 Motion到Claude Code
32:00 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#FigmaMotion #Figma動畫 #Figma動態設計