Figma Motion icon

Figma Motion

Figma Motion 是 Figma 的動畫工具,可在畫布上直接製作與檢視動效,並與設計稿同檔編輯。支援時間軸編輯、動效系統與匯出/交付流程。

Figma Motion

產品概覽

Figma Motion 是 Figma 的動畫工具,可直接在畫布上設計動效。它把時間軸帶進與元件、變數及團隊協作相同的檔案中,讓動效可以在不離開 Figma 的情況下建立與檢視。

這項產品主要面向希望在與其他設計工作相同的工作區中建立動畫、動效系統與可交付動效素材的設計師與開發者。發佈素材將它定位為減少情境切換、讓動效更容易起步,並讓動畫決策與周圍的設計系統保持連結的一種方式。

核心功能

在同一檔案中製作動畫

將畫面切換為 Motion 模式,便可在時間軸上直接處理設計,而不必轉到另一個動畫工具。

以時間軸為基礎的編輯

使用時間軸拖曳圖層來調整時間,拖曳播放頭預覽動畫,並可獨立設定位置、縮放、旋轉與不透明度的關鍵影格。

自動關鍵影格與時間控制

開啟自動關鍵影格,在播放頭移動時記錄變更,再透過調整緩動或時間來微調結果。

預設動畫樣式

先從預設動畫樣式開始,例如淡入淡出、移動、縮放、旋轉和調整大小,然後在畫布上疊加或依序排列。

結合元件與變數的動效系統

將動效建構進元件中,並透過變數與模式更新動效值,讓動畫模式可跨檔案重複使用。

交付與匯出

匯出可直接用於生產的動效成果,並透過 Dev Mode 或 Figma MCP server 與開發者分享。

常見用途

  • 在既有設計檔中加入動效

    當你想在不離開包含其餘產品設計的檔案時為畫面加上動效,就使用 Motion。當動效需要與元件、變數及團隊其他成員的工作保持一致時,這特別有用。

  • 快速建立初始動畫

    使用代理與預設樣式快速產出第一版,再透過調整緩動、時間與關鍵影格來細化時間軸。這適合剛接觸動效或需要更快起點的設計師。

  • 在設計系統中標準化動效

    當你需要讓相同的動作模式出現在多個畫面或協作者的檔案中時,使用元件與動效變數。這有助於建立可重複使用的動效系統,而不是一次性動畫。

  • 審查並交付動效工作

    當動效草稿需要審查或交付給開發者時,使用時間軸留言與 Dev Mode。來源強調可針對特定時間點留言,並檢視動效時間軸以利程式導向協作。

  • 分享或發布動畫素材

    當你需要把動畫帶到 Figma 之外,使用 MP4、GIF、SVG 和 WebM 等匯出格式;若需要程式碼交付,則可使用 CSS 與 MCP 導向輸出。

Pros and Cons

Pros

  • 將動效保留在與其他設計工作相同的 Figma 檔案中,減少情境切換。
  • 同時支援代理輔助建立與直接時間軸編輯,適合不同熟悉程度的使用者。
  • 提供具體的時間軸控制,例如拖曳預覽、圖層時間調整,以及位置、縮放、旋轉與不透明度的獨立關鍵影格。
  • 透過動畫元件與動效變數支援動效系統,可跨檔案重複使用。
  • 透過 Dev Mode、程式碼匯出與 Figma MCP server 提供開發者交付流程。

Cons

  • 多項功能被描述為即將推出,包括自訂動畫樣式與 3D 轉換。
  • 來源未將 Motion 呈現為完全開放的功能;定價頁指出 beta 僅限 Full seats。

FAQ

什麼是 Figma Motion?

Figma Motion 是 Figma 內建的動效設計工具,讓你可以在畫布上建立動畫,並與元件、變數和團隊協作內容放在同一個檔案中。它的設計目標是同時支援代理輔助建立與直接的時間軸編輯。

Figma Motion 如何融入 Figma 工作流程?

來源將 Motion 描述為原生存在於與 Design、Draw 和 Dev 模式相同的畫布中。它也提到 Dev Mode 的存取與功能可讓交付更順暢,並提供可用於審查的時間點留言。

可以從 Figma Motion 匯出什麼?

Motion 頁面指出,你可以直接從 Figma 匯出動畫作品,包括 MP4、GIF、SVG 和 WebM。發佈文章也提到可匯出為 CSS 與 MCP 以支援 3D 轉換。

Figma Motion 是否適用於所有方案?

定價頁指出,Figma Motion beta 可在 Full seats 使用。它也表示付費方案可讓其他人不用額外席位即可檢視和留言。

有哪些限制或即將推出的功能?

來源提到自訂動畫樣式即將推出,3D 轉換也即將推出。Motion 頁面也將部分功能標示為即將推出,例如 3D 轉換與畫面到畫面轉場。

Quick Facts

類別
Design Tool
產品類型
動畫工具
平台
Figma web app
主要使用者
設計師與開發者
可用性
Full seats 的 beta 版本
來源網域
figma.com