以畫布為基礎的動畫時間軸
從設計畫框切換到 Motion 模式，並在位於畫布旁的時間軸上工作，讓動畫與其餘設計保留在同一個檔案中。
Figma Motion
認領Figma Motion 是 Figma 的畫布式動畫工作區，可在與設計、元件和變數相同的檔案中製作動效。支援關鍵影格、預設動畫樣式、動效重用，以及時間註解和 Dev Mode 交接等協作功能。
Figma Motion 是什麼
Figma Motion 是 Figma 的動畫工作區，呈現在設計、元件、變數與團隊協作已存在的同一個畫布上。發佈文章將其描述為一種新的 Motion 模式，並在設計旁加入時間軸，因此動畫工作可在同一個檔案中完成，而不是在獨立工具裡進行。
這個產品的目標是讓動效更容易建立、審閱與重複使用。設計師可以為核心屬性建立關鍵影格、套用預設動畫樣式、使用動畫元件與動效變數，並透過時間註解與以 Dev Mode 為導向的交接與團隊協作。該頁面也將 Figma agent 定位為可根據提示詞產生關鍵影格、降低動效工作學習門檻的方式。
核心功能
時間軸控制與關鍵影格
透過拖曳圖層、拖動播放頭，以及分別為位置、縮放、旋轉和不透明度設定關鍵影格來調整時間。自動關鍵影格會在播放頭移動時記錄變更。
預設動畫樣式
使用淡入、移動和縮放等預設樣式快速開始，接著可在時間軸上將它們並行堆疊或串接成序列。
可重用的動效系統
使用動畫元件與動效變數，讓動效模式能與其他設計系統元素一起在畫面、協作者與檔案之間流動。
代理輔助建立
透過提示詞請 Figma 代理人在時間軸上直接建立關鍵影格，幫助剛接觸動畫的設計師開始上手，也減少有經驗使用者的重複設定。
審閱與交接支援
在畫布上加入時間註解，並使用 Dev Mode 功能，讓審閱與交接流程更順暢。
常見使用情境
為產品介面製作動畫
直接在與 UI 相同的檔案中建立動效，讓設計師可以在不交接到獨立動畫工具的情況下反覆調整互動。
建立可重用的設計系統動效
先為某個元件建立一次動效，再在多個畫面與檔案中重複使用，讓共用 UI 元素維持一致行為。
開始進行動效設計
當你需要協助把想法轉換成動效時，使用 Figma agent 產生起始關鍵影格或建議。
協作式動效審閱
使用錨定在時間軸特定時刻的註解與隊友一起審閱時間與行為，然後在交接前微調動畫。
Pros and Cons
Pros
- 讓動效與設計工作保留在同一個 Figma 檔案中，可減少工具切換。
- 支援透過關鍵影格、拖動播放頭與自動關鍵影格直接編輯時間軸。
- 可透過動畫元件與動效變數讓團隊重複使用動效。
- 包含時間註解與 Dev Mode 支援，方便審閱與交接。
- 使用 Figma agent 協助從提示詞產生動效，並幫助經驗較少的使用者。
Cons
- 公開來源是發佈文章與產品頁，涵蓋範圍不完整，因此某些工作流程細節未在此說明。
- 頁面指出自訂動畫樣式即將推出，代表部分功能尚未可用。
- 來源未清楚描述 Motion 本身的匯出或輸出選項。
FAQ
我要如何取得 Figma Motion 的使用權？
Figma Motion 內建於 Figma 的畫布體驗中，並以 Motion 測試版的形式提供。定價頁面指出 Figma Motion 測試版可在 Full 席位上使用，因此可用性取決於你的方案與測試版開放情況。
Motion 如何融入 Figma 工作流程？
發佈文章說，你可以將畫框切換到 Motion 模式，並在設計旁邊的時間軸上工作。它也描述了 Dev Mode 存取與時間註解，方便交接與審閱。
在 Figma Motion 中可以為哪些內容製作動畫？
頁面描述可對位置、縮放、旋轉與不透明度進行關鍵影格設定，還有 shader 屬性。也提到淡入、移動與縮放等預設動畫樣式。
團隊可以在 Motion 中建立可重用的動效系統嗎？
公告指出，動效與你的元件、變數和團隊都存在於同一個檔案中，而且動畫元件與動效變數可以在檔案之間傳遞。它也提到自訂動畫樣式即將推出。
Figma Motion 支援哪些輸出？
來源目前沒有說明 Motion 的匯出格式。它確實提到即將推出的 3D 轉換會匯出為 CSS 並透過 MCP 串接，但那是另一項即將到來的能力。
Quick Facts
- 類別
- 設計工具
- 產品
- Figma Motion
- 來源網域
- figma.com
- 可用性
- Full 席位上的測試版
- 主要使用者
- 設計師、動效設計師與產品團隊
- 工作流程
- Figma 畫布內的動畫時間軸