Skip to main content
Language繁體中文
物理與代幣4 分鐘閱讀2026 年 10 月

什麼是運動令牌以及它們在設計系統中如何運作?

簡短回答

運動標記被命名為動畫的設計系統值:持續時間、緩動曲線、彈簧設置,有時還有距離。團隊不會在每個組件中編寫 300 毫秒的緩出時間,而是使用諸如motion.duration.medium 或motion.spring.gentle 之類的名稱,因此動作保持一致並且可以在一個地方進行更改。

核心要點

  • 運動令牌儲存時間決策:持續時間、緩動、彈簧剛度和阻尼
  • 依目的(進入、退出、強調)或大小(短、中、長)命名它們
  • 保留一組:一些持續時間和一些曲線或彈簧
  • 包括一個簡化的運動變體以方便使用
  • 將它們儲存在與顏色和間距相同的令牌管道中

設計系統已經使用顏色、間距和版式的標記。運動令牌將相同的想法應用於動畫。他們將諸如“小元素快速移動並緩慢穩定”之類的決策轉變為每個設計師和開發人員都使用的命名值。

典型的集合包括持續時間(短、中、長)、緩動曲線(標準、進入、退出)以及越來越多由剛度、阻尼和質量定義的彈簧。 Spring 很受歡迎,因為它們感覺很自然並且可以很好地處理程式碼中的中斷。

命名很重要。基於用途的名稱(例如motion.enter 或motion.emphasis)比原始數字更容易正確應用。保持集合較小。如果每個組件都有自己的曲線,則令牌將停止執行其工作。

可訪問性也屬於代幣。定義當使用者打開減少運動時會發生什麼,例如較短的淡入淡出而不是較大的運動,因此每個組件都以相同的方式處理它。

令牌通常儲存在 JSON 中,並透過令牌建構工具轉換為 CSS 變數、Swift、Kotlin 或 JavaScript。我們的免費 Motion Token Generator 可產生您可以適應的入門套件。

常見問題

我需要多少個動作代幣?

比你想的少。三個或四個持續時間以及兩個或三個緩動曲線或彈簧涵蓋了大多數產品。

運動令牌應該使用彈簧還是持續時間?

兩者都可以工作。彈簧對於互動式和可中斷的運動來說感覺更自然;淡入淡出和 CSS 過渡的持續時間更簡單。

運動令牌如何處理減少的運動?

定義當使用者開啟減少運動時應用的替代值,例如較短或僅不透明的過渡。

Figma可以儲存運動令牌嗎?

您可以將數值儲存在 Figma 變數中,但它們與原型轉換的連接方式受到限制。大多數團隊將事實來源保存在令牌檔案中。

相關指南和範例

產生一組入門動作令牌

選擇持續時間、緩動和彈簧,預覽它們,並匯出 CSS 和 JSON 的標記。自由的。

開啟令牌生成器
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →