LanguageSvenska
Pelare 06 · Designsystem
Motion Tokens: The Complete Architecture for Design Systems
Standardisera rörelse över hela ditt produktekosystem. Sluta hårdkoda godtyckliga 300ms kubiska beziers över dussintals utvecklarförråd.
What is Motion Tokens: in ExodeUI?
Motion Tokens är standardiserade designtokens som definierar animationsparametrar – såsom fjäderstyvhet, dämpningsförhållande, massa, lättnadskurvor och varaktighet – i ett maskinläsbart format. Vår gratis Motion Token Generator skapar en startuppsättning som du kan exportera för CSS och JSON, och verktyg för att bygga token förvandlar dem till kod för varje plattform.
Kärnarkitektur
Varför ingenjörer och designers väljer ExodeUI
Design, logic and motion in one file that runs inside your app.
Vårfysikpolletter
Definiera rörelse med fysiska symboler (styvhet, dämpning, massa) snarare än godtyckliga tidsnummer.
Automatiserad kodgenerering
Förvandla tokens till CSS-variabler och plattformskod med din befintliga tokenbyggande pipeline.
Semantisk hierarki
Organisera rörelsetokens i globala, semantiska och komponentnivåer (t.ex. motion.spring.snappy, motion.feedback.success).
Design Tool Synchronization
Synkronisera rörelsetokens sömlöst mellan Figma-variabler och produktions-Git-kodbaser.
Objektiv utvärdering
Hur ExodeUI jämförs med Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Fullständigt förstklassigt stöd för fysiska fjäderpolletter och hastighetskurvor
- Exporterar till inbyggda mobilformat (SwiftUI/Compose) och webbformat samtidigt
- Visual inspector låter designers känna symbolfysik i realtid
- Automatiska reservtillgänglighet för preferens-reducerad rörelse
Traditional Design Tokens (Color/Type Only)
- De flesta tokenverktyg stöder bara statiska färger, typografi och mellanrum
- Rörelse reduceras till grova varaktighetssträngar som "300ms ease-in-out"
- Inget visuellt sätt att testa tokens dynamik innan du skickar till koden
- Ingenjörer måste manuellt tolka rörelsespecifikationer i ramkod
Utvecklare Handoff
Använder den i din kod
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importera { ExodeUICanvas } från 'exodeui';
// Fjädrar, tillstånd och timing live i .exode-filen (designad i
// redaktör). Din kod skickar in ingångar och hör händelser tillbaka.
exportfunktion SnappyButton() {
återvända (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(namn) => console.log('ExodeUI händelse:', namn)}
/>
);
}Varför designsystem misslyckas vid rörelse
Moderna designsystem har fulländade färgpaletter, typografiska skalor, höjdskuggor och mellanrumsrutnät. Men rörelse förblir den bortglömda designsymbolen. I de flesta organisationer består rörelsedokumentation av vaga riktlinjer som "animationer ska vara snabba" eller en statisk varaktighetsvariabel på 250 ms.
- Inkonsekvent varumärkeskänsla: En ingenjör använder ease-out, en annan använder ease-in-out och mobilen använder Apples standardinställningar.
- Spröda varaktighetskurvor: Tidsinställda animationer känns långsamma på små element och snabba på stora bottenark.
- Försummelse av tillgänglighet: Team misslyckas med att implementera sammanhängande åsidosättningar med reducerad rörelse över alla komponenter.
Tredelad rörelsetokenhierarki
ExodeUI modellerar rörelsetokens över tre strukturerade nivåer:
Nivå 1: Globala primitiva tokens
Rå matematiska konstanter (t.ex. styvhet-400, dämpning-25, massa-1).
Nivå 2: Semantic Intent Tokens
Funktionsnamn kopplade till avsikt (t.ex. motion.interactive.snappy, motion.modal.enter).
Nivå 3: Komponentspecifika tokens
Åsidosätter bundna till specifika komponenter (t.ex. button.toggle.switch).
Topic Cluster Network
Utforska anslutna koncept och verktyg
Har du frågor?
Vanliga frågor
Bygg levande komponenter med verklig rörelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.