LanguageDansk
Søjle 06 · Design Systemer
Motion Tokens: Den komplette arkitektur for designsystemer
Standardiser bevægelse på tværs af hele dit produktøkosystem. Stop hardkodning af vilkårlige 300 ms kubiske beziers på tværs af snesevis af udviklerdepoter.
What is Motion Tokens: in ExodeUI?
Motion Tokens er standardiserede design-tokens, der definerer animationsparametre – såsom fjederstivhed, dæmpningsforhold, masse, lette kurver og varighed – i et maskinlæsbart format. Vores gratis Motion Token Generator opretter et startsæt, du kan eksportere til CSS og JSON, og token-byggeværktøjer gør dem til kode for hver platform.
Kernearkitektur
Hvorfor ingeniører og designere vælger ExodeUI
Design, logic and motion in one file that runs inside your app.
Spring Physics Tokens
Definer bevægelse med fysiske tokens (stivhed, dæmpning, masse) snarere end vilkårlige timingtal.
Automatiseret kodegenerering
Forvandl tokens til CSS-variabler og platformskode med din eksisterende token-byggepipeline.
Semantisk hierarki
Organiser bevægelsestokens i globale, semantiske og komponentniveauer (f.eks. motion.spring.snappy, motion.feedback.success).
Synkronisering af designværktøj
Synkroniser bevægelsestokens problemfrit mellem Figma-variabler og produktions-Git-kodebaser.
Objektiv evaluering
Hvordan ExodeUI sammenlignes med Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Fuld førsteklasses støtte til fysiske fjedermærker og hastighedskurver
- Eksporter til native mobil (SwiftUI/Compose) og webformater samtidigt
- Visual inspector lader designere føle token-fysik i realtid
- Automatiske tilbagefald af tilgængelighed for foretrækker-reduceret-bevægelse
Traditional Design Tokens (Color/Type Only)
- De fleste tokenværktøjer understøtter kun statiske farver, typografi og mellemrum
- Bevægelse er reduceret til grove varighedsstrenge som "300ms lethed-ind-ud"
- Ingen visuel måde at teste tokens dynamik på, før den sendes til kode
- Ingeniører skal manuelt fortolke bevægelsesspecifikationer i rammekode
Udvikler Handoff
Brug det i din kode
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importer { ExodeUICanvas } fra 'exodeui';
// Fjedre, tilstande og timing live i .exode-filen (designet i
// redaktør). Din kode sender input ind og hører begivenheder tilbage.
eksportfunktion SnappyButton() {
returnere (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(navn) => console.log('ExodeUI hændelse:', navn)}
/>
);
}Hvorfor designsystemer fejler i bevægelse
Moderne designsystemer har perfektionerede farvepaletter, typografiskalaer, højdeskygger og afstandsgitter. Men bevægelse forbliver det glemte designtegn. I de fleste organisationer består bevægelsesdokumentation af vage retningslinjer som "animationer skal være snappy" eller en statisk 250ms varighedsvariabel.
- Inkonsekvent mærkefølelse: En ingeniør bruger ease-out, en anden bruger ease-in-out, og mobil bruger Apples standardindstillinger.
- Skøre varighedskurver: Timede animationer føles langsomme på små elementer og forhastede på store bundark.
- Forsømmelse af tilgængelighed: Teams kan ikke implementere sammenhængende tilsidesættelser af reduceret bevægelse på tværs af alle komponenter.
3-lags Motion Token Hierarki
ExodeUI modellerer bevægelsestokens på tværs af tre strukturerede niveauer:
Niveau 1: Globale primitive tokens
Rå matematiske konstanter (f.eks. stivhed-400, dæmpning-25, masse-1).
Niveau 2: Semantiske hensigtstokens
Funktionelle navne knyttet til hensigt (f.eks. motion.interactive.snappy, motion.modal.enter).
Niveau 3: Komponentspecifikke tokens
Tilsidesætter bundet til specifikke komponenter (f.eks. button.toggle.switch).
Topic Cluster Network
Udforsk forbundne koncepter og værktøjer
Har du spørgsmål?
Ofte stillede spørgsmål
Byg levende komponenter med ægte bevægelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.