Language繁體中文
支柱 06·設計系統
Motion Tokens：設計系統的完整架構
標準化整個產品生態系的運動。停止在數十個開發人員儲存庫中硬編碼任意 300ms 三次貝塞爾曲線。
What is Motion Tokens：設計系統的完整架構 in ExodeUI?
運動令牌是標準化設計令牌，以機器可讀的格式定義動畫參數，例如彈簧剛度、阻尼比、質量、緩動曲線和持續時間。我們的免費 Motion 令牌產生器建立了一個入門集，您可以為 CSS 和 JSON 匯出，並且令牌建構工具將它們轉換為每個平台的程式碼。
核心架構
為什麼工程師和設計師選擇 [ExodeUI
Design, logic and motion in one file that runs inside your app.
Spring 物理代幣
使用實體標記（剛度、阻尼、質量）而不是任意的計時數字來定義運動。
自動程式碼生成
Turn tokens into CSS variables and platform code with your existing token build pipeline.
語意層次
將動作標記組織為全域、語意和元件層級（例如，motion.spring.snappy、motion.feedback.success）。
設計工具同步
在 Figma 變數和生產 Git 程式碼庫之間無縫同步運動令牌。
客觀評價
ExodeUI 相比如何 Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 對物理彈簧標記和速度曲線的全面一流支持
- 同時匯出為本機移動 (SwiftUI/Compose) 和 Web 格式
- 視覺檢查器讓設計師即時感受令牌物理
- 首選減少運動的自動可訪問性回退
Traditional Design Tokens (Color/Type Only)
- 大多數令牌工具僅支援靜態顏色、版式和間距
- 運動被簡化為粗略的持續時間字串，例如“300 毫秒緩入緩出”
- 在交付程式碼之前沒有直覺的方式來測試代幣動態
- 工程師必須手動將運動規範解釋為框架程式碼
開發者交接
在您的程式碼中使用它
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
從 'exodeui' 導入 { ExodeUICanvas }；
// 彈簧、狀態和計時位於 .exode 檔案中（設計於
// 編輯器）。您的代碼傳遞輸入並聽取事件返回。
導出函數 SnappyButton() {
返回（
<ExodeUI畫布
src="/snappy_button.bexode"
onTrigger={(name) => console.log('ExodeUI 事件：', name)}
/>
）；
}為什麼設計系統在運動中失敗
現代設計系統擁有完善的調色板、版面比例、立面陰影和間距網格。但運動仍然是被遺忘的設計標誌。在大多數組織中，運動文件包含模糊的指導原則，例如「動畫應該活潑」或靜態 250 毫秒持續時間變數。
- 不一致的品牌感覺：一位工程師使用ease-out，另一位工程師使用ease-in-out，而行動裝置使用Apple 預設值。
- 脆弱的持續時間曲線：定時動畫在小元素上感覺很慢，在大底片上感覺很匆忙。
- 忽視可訪問性：團隊未能在所有組件上實現一致的簡化運動覆蓋。
三層運動令牌層次結構
ExodeUI 跨三個結構化層對運動令牌進行建模：
第一層：全球原始代幣
原始數學常數（例如，剛度 - 400、阻尼 - 25、質量 - 1）。
第 2 層：語意意圖標記
與意圖相關的功能名稱（例如，motion.interactive.snappy、motion.modal.enter）。
第 3 層：特定於元件的令牌
覆蓋綁定到特定元件（例如，button.toggle.switch）。
Topic Cluster Network
探索互聯概念與工具
有疑問嗎？
常見問題解答
透過真實的運動建構生命組件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.