LanguageNorsk bokmål
Pilar 06 · Designsystemer
Motion Tokens: The Complete Architecture for Design Systems
Standardiser bevegelse på tvers av hele produktøkosystemet. Stopp hardkoding av vilkårlige 300 ms kubikkbeziers på tvers av dusinvis av utviklerrepositorier.
What is Motion Tokens: in ExodeUI?
Motion Tokens er standardiserte design-tokens som definerer animasjonsparametere – som fjærstivhet, dempingsforhold, masse, easing-kurver og varighet – i et maskinlesbart format. Vår gratis Motion Token Generator lager et startsett du kan eksportere for CSS og JSON, og tokenbyggeverktøy gjør dem om til kode for hver plattform.
Kjernearkitektur
Hvorfor ingeniører og designere velger ExodeUI
Design, logic and motion in one file that runs inside your app.
Vårfysikk-tokens
Definer bevegelse med fysiske tokens (stivhet, demping, masse) i stedet for vilkårlige timingtall.
Automatisert kodegenerering
Gjør om tokens til CSS-variabler og plattformkode med din eksisterende token-byggepipeline.
Semantisk hierarki
Organiser bevegelsestokens i globale, semantiske og komponentnivåer (f.eks. motion.spring.snappy, motion.feedback.success).
Design Tool Synchronization
Synkroniser bevegelsestokens sømløst mellom Figma-variabler og produksjons 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
- Full førsteklasses støtte for fysiske fjærtegn og hastighetskurver
- Eksporter til opprinnelige mobil- (SwiftUI/Compose) og nettformater samtidig
- Visual inspector lar designere føle token-fysikk i sanntid
- Automatisk tilgjengelighetsreduksjon for foretrekker-redusert bevegelse
Traditional Design Tokens (Color/Type Only)
- De fleste tokenverktøy støtter bare statiske farger, typografi og mellomrom
- Bevegelse reduseres til grove varighetsstrenger som "300 ms ease-in-out"
- Ingen visuell måte å teste token-dynamikk før sending til kode
- Ingeniører må manuelt tolke bevegelsesspesifikasjoner inn i rammekode
Utvikler Handoff
Bruker den i koden din
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importer { ExodeUICanvas } fra 'exodeui';
// Fjærer, tilstander og timing live i .exode-filen (designet i
// redaktør). Koden din sender inn og hører hendelser tilbake.
eksportfunksjon SnappyButton() {
returnere (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(navn) => console.log('ExodeUI hendelse:', navn)}
/>
);
}Hvorfor designsystemer feiler ved bevegelse
Moderne designsystemer har perfeksjonerte fargepaletter, typografiskalaer, høydeskygger og avstandsrutenett. Men bevegelse forblir det glemte designsymbolet. I de fleste organisasjoner består bevegelsesdokumentasjon av vage retningslinjer som "animasjoner skal være raske" eller en statisk varighetsvariabel på 250 ms.
- Inkonsekvent merkefølelse: En ingeniør bruker ease-out, en annen bruker ease-in-out, og mobilen bruker Apple-standarder.
- Sprø varighetskurver: Tidsinnstilte animasjoner føles trege på små elementer og raskt på store bunnark.
- Forsømmelse av tilgjengelighet: Team klarer ikke å implementere sammenhengende overstyringer med redusert bevegelse på tvers av alle komponenter.
3-lags Motion Token-hierarkiet
ExodeUI modellerer bevegelsestokener på tvers av tre strukturerte nivåer:
Nivå 1: Globale primitive tokens
Rå matematiske konstanter (f.eks. stivhet-400, demping-25, masse-1).
Nivå 2: Semantiske hensiktstegn
Funksjonelle navn knyttet til intensjoner (f.eks. motion.interactive.snappy, motion.modal.enter).
Nivå 3: Komponentspesifikke tokens
Overstyrer bundet til spesifikke komponenter (f.eks. button.toggle.switch).
Topic Cluster Network
Utforsk tilkoblede konsepter og verktøy
Verktøy for generator for bevegelsestoken
Opprett og eksporter bevegelsestokener
Motion Development Environment
MDE-plattformens visjon
Hvordan ExodeUI-filer er bygget
Fra .exode til appen din
Ordliste: Motion Tokens
Formell definisjon og standardskjema
Har du spørsmål?
Ofte stilte spørsmål
Bygg levende komponenter med ekte bevegelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.