LanguageItaliano
Pilastro 06 · Sistemi di progettazione
Token di movimento: l'architettura completa per i sistemi di progettazione
Standardizza il movimento nell'intero ecosistema di prodotti. Interrompi l'hardcoding di Bezier cubi arbitrari da 300 ms su dozzine di repository per sviluppatori.
What is Token di in ExodeUI?
I token di movimento sono token di progettazione standardizzati che definiscono i parametri di animazione, come rigidità della molla, rapporto di smorzamento, massa, curve di andamento e durata, in un formato leggibile dalla macchina. Il nostro generatore di token di movimento gratuito crea un set iniziale che puoi esportare per CSS e JSON e gli strumenti di creazione di token li trasformano in codice per ciascuna piattaforma.
Architettura centrale
Perché ingegneri e designer scelgono ExodeUI
Design, logic and motion in one file that runs inside your app.
Gettoni di fisica primaverile
Definisci il movimento con parametri fisici (rigidità, smorzamento, massa) anziché con numeri temporali arbitrari.
Generazione automatizzata del codice
Trasforma i token in variabili CSS e codice della piattaforma con la pipeline di creazione di token esistente.
Gerarchia semantica
Organizza i token di movimento in livelli globali, semantici e di componenti (ad esempio motion.spring.snappy, motion.feedback.success).
Sincronizzazione degli strumenti di progettazione
Sincronizza perfettamente i token di movimento tra le variabili Figma e le codebase Git di produzione.
Valutazione oggettiva
Come si confronta ExodeUI con Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Supporto completo di prima classe per gettoni fisici a molla e curve di velocità
- Esporta contemporaneamente nei formati nativi per dispositivi mobili (SwiftUI/Compose) e Web
- L'ispettore visivo consente ai progettisti di percepire la fisica dei token in tempo reale
- Fallback di accessibilità automatica per movimenti preferenziali ridotti
Traditional Design Tokens (Color/Type Only)
- La maggior parte degli strumenti token supporta solo colori, tipografia e spaziatura statici
- Il movimento è ridotto a stringhe di durata grezza come "300ms easy-in-out"
- Nessun modo visivo per testare la dinamica dei token prima della spedizione al codice
- Gli ingegneri devono interpretare manualmente le specifiche di movimento nel codice della struttura
Passaggio allo sviluppo
Usarlo nel tuo codice
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importa { ExodeUICanvas } da 'exodeui';
// Molle, stati e tempistiche vivono nel file .exode (progettato nel file
//editore). Il tuo codice passa gli input e ascolta gli eventi.
funzione di esportazione SnappyButton() {
ritorno (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(nome) => console.log('Evento ExodeUI:', nome)}
/>
);
}Perché i sistemi di progettazione falliscono in movimento
I moderni sistemi di progettazione hanno tavolozze di colori, scale tipografiche, ombre di elevazione e griglie di spaziatura perfezionate. Ma il movimento resta l’elemento progettuale dimenticato. Nella maggior parte delle organizzazioni, la documentazione del movimento è costituita da linee guida vaghe come "le animazioni dovrebbero essere scattanti" o da una variabile statica di durata di 250 ms.
- Sensazione del marchio incoerente: un ingegnere utilizza easy-out, un altro utilizza easy-in-out e il mobile utilizza le impostazioni predefinite di Apple.
- Curve di durata fragili: le animazioni temporizzate sembrano lente su piccoli elementi e affrettate su fogli inferiori di grandi dimensioni.
- Trascuratezza dell’accessibilità: i team non riescono a implementare sostituzioni coerenti di movimento ridotto in tutti i componenti.
La gerarchia dei token di movimento a 3 livelli
ExodeUI modella i token di movimento su tre livelli strutturati:
Livello 1: token primitivi globali
Costanti matematiche grezze (ad esempio, rigidità-400, smorzamento-25, massa-1).
Livello 2: token di intento semantico
Nomi funzionali legati all'intento (ad esempio, motion.interactive.snappy, motion.modal.enter).
Livello 3: token specifici del componente
Sostituisce legati a componenti specifici (ad esempio, button.toggle.switch).
Topic Cluster Network
Esplora concetti e strumenti collegati
Strumento per la generazione di token di movimento
Crea ed esporta token di movimento
Ambiente di sviluppo del movimento
La visione della piattaforma MDE
Come vengono creati i file ExodeUI
Da .exode alla tua app
Glossario: Segnalini di movimento
Definizione formale e schema standard
Hai domande?
Domande frequenti
Crea componenti vivi con movimento reale.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.