LanguageSuomi
Pilari 06 · Suunnittelujärjestelmät
Motion Tokens: The Complete Architecture for Design Systems
Standardoi liikettä koko tuoteekosysteemissäsi. Lopeta mielivaltaisten 300 ms:n kuutiobeziereiden kovakoodaus kymmenissä kehittäjävarastoissa.
What is Motion Tokens: in ExodeUI?
Motion Tokens ovat standardoituja suunnittelutokeneja, jotka määrittävät animaatioparametrit, kuten jousen jäykkyyden, vaimennussuhteen, massan, helpotuskäyrät ja keston, koneellisesti luettavassa muodossa. Ilmainen Motion Token Generator luo aloitussarjan, jonka voit viedä CSS:lle ja JSON:lle, ja tunnuksen rakennustyökalut muuttavat ne koodiksi kullekin alustalle.
Ydinarkkitehtuuri
Miksi insinöörit ja suunnittelijat valitsevat ExodeUI
Design, logic and motion in one file that runs inside your app.
Kevään fysiikan merkit
Määrittele liike fyysisillä tunnuksilla (jäykkyys, vaimennus, massa) mielivaltaisten ajoituslukujen sijaan.
Automaattinen koodin luominen
Muuta tunnukset CSS-muuttujiksi ja alustakoodiksi olemassa olevan token-rakennusputken avulla.
Semanttinen hierarkia
Järjestä liiketunnisteet globaaleille, semanttisille ja komponenttitasoille (esim. motion.spring.snappy, motion.feedback.success).
Suunnittelutyökalun synkronointi
Synkronoi liiketunnisteet saumattomasti Figma-muuttujien ja tuotanto Git-koodikantojen välillä.
Objektiivinen arviointi
Miten ExodeUI verrattuna Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Täysi ensiluokkainen tuki fyysisille jousitokeneille ja nopeuskäyrille
- Vienti mobiililaitteille (SwiftUI/Compose) ja web-muotoihin samanaikaisesti
- Visual Inspectorin avulla suunnittelijat voivat tuntea merkkifysiikan reaaliajassa
- Automaattiset esteettömyysvaihtoehdot etusijalle-vähennettyyn liikkeeseen
Traditional Design Tokens (Color/Type Only)
- Useimmat merkkityökalut tukevat vain staattisia värejä, typografiaa ja välilyöntejä
- Liike on rajoitettu karkeiksi kestokieliksi, kuten "300 ms help-in-out"
- Ei visuaalista tapaa testata tunnuksen dynamiikkaa ennen toimitusta koodiin
- Insinöörien on tulkittava liiketiedot manuaalisesti kehyskoodiksi
Kehittäjän vaihto
Käytä sitä koodissasi
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
tuo { ExodeUICanvas } 'exodeuista';
// Jouset, tilat ja ajoitus livenä .exode-tiedostossa (suunniteltu
// editori). Koodisi välittää syötteitä ja kuulee tapahtumat takaisin.
vientitoiminto SnappyButton() {
paluu (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(nimi) => console.log('ExodeUI event:', name)}
/>
);
}Miksi suunnittelujärjestelmät epäonnistuvat liikkeessä
Nykyaikaisissa suunnittelujärjestelmissä on täydelliset väripaletit, typografiset asteikot, korkeusvarjot ja väliruudukot. Mutta liike on edelleen unohdettu suunnittelumerkki. Useimmissa organisaatioissa liikedokumentaatio koostuu epämääräisistä ohjeista, kuten "animaatioiden tulee olla näppärää" tai staattista 250 ms:n kestomuuttujaa.
- Epäjohdonmukainen brändituntuma: Yksi insinööri käyttää helpotusta, toinen helpottaa sisääntuloa ja mobiili käyttää Applen oletusasetuksia.
- Hauraat kestokäyrät: Ajastetut animaatiot tuntuvat hitailta pienillä elementeillä ja kiireisiltä suurilla pohjalevyillä.
- Käytettävyyden laiminlyönti: Tiimit eivät pysty toteuttamaan yhtenäisiä liikkeenrajoitusohjauksia kaikissa komponenteissa.
3-tasoinen liikemerkkihierarkia
ExodeUI mallintaa liiketokeneja kolmella strukturoidulla tasolla:
Taso 1: Global Primitive Tokens
Raakamatemaattiset vakiot (esim. jäykkyys-400, vaimennus-25, massa-1).
Taso 2: Semantic Intent Tokens
Tarkoitukseen sidotut toiminnalliset nimet (esim. motion.interactive.snappy, motion.modal.enter).
Taso 3: Komponenttikohtaiset tunnukset
Tiettyihin komponentteihin sidotut ohitukset (esim. button.toggle.switch).
Topic Cluster Network
Tutustu yhdistettyihin käsitteisiin ja työkaluihin
Onko sinulla kysyttävää?
Usein kysytyt kysymykset
Rakenna eläviä komponentteja todellisella liikkeellä.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.