在同一檔案中製作動畫
將畫面切換為 Motion 模式,便可在時間軸上直接處理設計,而不必轉到另一個動畫工具。
Figma Motion 是 Figma 的動畫工具,可直接在畫布上設計動效。它把時間軸帶進與元件、變數及團隊協作相同的檔案中,讓動效可以在不離開 Figma 的情況下建立與檢視。
這項產品主要面向希望在與其他設計工作相同的工作區中建立動畫、動效系統與可交付動效素材的設計師與開發者。發佈素材將它定位為減少情境切換、讓動效更容易起步,並讓動畫決策與周圍的設計系統保持連結的一種方式。
將畫面切換為 Motion 模式,便可在時間軸上直接處理設計,而不必轉到另一個動畫工具。
使用時間軸拖曳圖層來調整時間,拖曳播放頭預覽動畫,並可獨立設定位置、縮放、旋轉與不透明度的關鍵影格。
開啟自動關鍵影格,在播放頭移動時記錄變更,再透過調整緩動或時間來微調結果。
先從預設動畫樣式開始,例如淡入淡出、移動、縮放、旋轉和調整大小,然後在畫布上疊加或依序排列。
將動效建構進元件中,並透過變數與模式更新動效值,讓動畫模式可跨檔案重複使用。
匯出可直接用於生產的動效成果,並透過 Dev Mode 或 Figma MCP server 與開發者分享。
當你想在不離開包含其餘產品設計的檔案時為畫面加上動效,就使用 Motion。當動效需要與元件、變數及團隊其他成員的工作保持一致時,這特別有用。
使用代理與預設樣式快速產出第一版,再透過調整緩動、時間與關鍵影格來細化時間軸。這適合剛接觸動效或需要更快起點的設計師。
當你需要讓相同的動作模式出現在多個畫面或協作者的檔案中時,使用元件與動效變數。這有助於建立可重複使用的動效系統,而不是一次性動畫。
當動效草稿需要審查或交付給開發者時,使用時間軸留言與 Dev Mode。來源強調可針對特定時間點留言,並檢視動效時間軸以利程式導向協作。
當你需要把動畫帶到 Figma 之外,使用 MP4、GIF、SVG 和 WebM 等匯出格式;若需要程式碼交付,則可使用 CSS 與 MCP 導向輸出。
Figma Motion 是 Figma 內建的動效設計工具,讓你可以在畫布上建立動畫,並與元件、變數和團隊協作內容放在同一個檔案中。它的設計目標是同時支援代理輔助建立與直接的時間軸編輯。
來源將 Motion 描述為原生存在於與 Design、Draw 和 Dev 模式相同的畫布中。它也提到 Dev Mode 的存取與功能可讓交付更順暢,並提供可用於審查的時間點留言。
Motion 頁面指出,你可以直接從 Figma 匯出動畫作品,包括 MP4、GIF、SVG 和 WebM。發佈文章也提到可匯出為 CSS 與 MCP 以支援 3D 轉換。
定價頁指出,Figma Motion beta 可在 Full seats 使用。它也表示付費方案可讓其他人不用額外席位即可檢視和留言。
來源提到自訂動畫樣式即將推出,3D 轉換也即將推出。Motion 頁面也將部分功能標示為即將推出,例如 3D 轉換與畫面到畫面轉場。
圖像大厨imgcook 是一款設計轉程式碼工具,可將設計稿轉換為前端程式碼,支援 Sketch、Photoshop、VS Code 與 CLI 的外掛及開發流程。
Beautiful.ai 是適合個人、團隊與企業的 AI 簡報平台,透過 Smart Slides、協作編輯與匯出選項,協助打造品牌化投影片並減少手動排版。
SlideSpeak Onbrand 讓 AI 代理即時存取已核准的品牌素材與投影片版型,讓簡報、one-pager 與其他素材從一開始就保持品牌一致,適用於 Claude Code、Codex、Cursor 與其他 MCP 用戶端。
Decktopus AI 是一款網頁版 AI 簡報製作工具,可依提示、貼上文字或 PDF 生成品牌一致的投影片,協助個人、團隊與企業更快完成簡報。
Chronicle 是專為團隊打造的 AI 簡報製作工具,可將筆記、文件或現有簡報快速轉成精美商務簡報,支援 AI 投影片生成、品牌控管、協作與匯出為 PPT、PDF 或網站。
Pixso 是一款新一代的 AI 原生 UI 設計工具,允許用戶一鍵生成設計草稿和代碼,是 Figma 的國內替代品。