LanguageFrançais
Pilier 06 · Systèmes de conception
Jetons de mouvement : l'architecture complète pour les systèmes de conception
Standardisez le mouvement dans l’ensemble de votre écosystème de produits. Arrêtez de coder en dur des béziers cubes arbitraires de 300 ms dans des dizaines de référentiels de développeurs.
What is Jetons de in ExodeUI?
Les jetons de mouvement sont des jetons de conception standardisés qui définissent les paramètres d'animation, tels que la rigidité du ressort, le taux d'amortissement, la masse, les courbes d'assouplissement et la durée, dans un format lisible par machine. Notre générateur de jetons de mouvement gratuit crée un ensemble de démarrage que vous pouvez exporter pour CSS et JSON, et les outils de création de jetons les transforment en code pour chaque plate-forme.
Architecture centrale
Pourquoi les ingénieurs et les designers choisissent ExodeUI
Design, logic and motion in one file that runs inside your app.
Jetons de physique du printemps
Définissez le mouvement avec des jetons physiques (rigidité, amortissement, masse) plutôt que des nombres de synchronisation arbitraires.
Génération de code automatisée
Transformez les jetons en variables CSS et en code de plate-forme avec votre pipeline de création de jetons existant.
Hiérarchie sémantique
Organisez les jetons de mouvement en niveaux globaux, sémantiques et composants (par exemple motion.spring.snappy, motion.feedback.success).
Synchronisation des outils de conception
Synchronisez les jetons de mouvement de manière transparente entre les variables Figma et les bases de code Git de production.
Évaluation objective
Comment ExodeUI se compare à Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Prise en charge complète de première classe des jetons de ressort physiques et des courbes de vitesse
- Exporte simultanément vers les formats natifs mobiles (SwiftUI/Compose) et Web
- L'inspecteur visuel permet aux concepteurs de ressentir la physique des jetons en temps réel
- Solutions de secours automatiques en matière d'accessibilité pour les mouvements préférentiels réduits
Traditional Design Tokens (Color/Type Only)
- La plupart des outils de jetons ne prennent en charge que les couleurs, la typographie et l'espacement statiques.
- Le mouvement est réduit à des chaînes de durée brutes comme "300 ms easy-in-out"
- Aucun moyen visuel de tester la dynamique des jetons avant de les envoyer au code
- Les ingénieurs doivent interpréter manuellement les spécifications de mouvement dans le code-cadre
Passage au développement
L’utiliser dans votre code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importer { ExodeUICanvas } depuis 'exodeui' ;
// Les ressorts, les états et le timing sont présents dans le fichier .exode (conçu dans le
// éditeur). Votre code transmet les entrées et entend les événements en retour.
fonction d'exportation SnappyButton() {
retour (
<ExodeUIToile
src="/snappy_button.bexode"
onTrigger={(nom) => console.log('Événement ExodeUI :', nom)}
/>
);
}Pourquoi les systèmes de conception échouent chez Motion
Les systèmes de conception modernes ont perfectionné les palettes de couleurs, les échelles typographiques, les ombres d’élévation et les grilles d’espacement. Mais le mouvement reste un symbole oublié du design. Dans la plupart des organisations, la documentation sur les mouvements se compose de directives vagues telles que « les animations doivent être vives » ou une variable de durée statique de 250 ms.
- Sensation de marque incohérente : un ingénieur utilise la facilité de sortie, un autre utilise la facilité d'entrée et le mobile utilise les paramètres par défaut d'Apple.
- Courbes de durée fragiles : les animations chronométrées semblent lentes sur les petits éléments et précipitées sur les grandes feuilles inférieures.
- Négligence en matière d'accessibilité : les équipes ne parviennent pas à mettre en œuvre des remplacements cohérents de mouvements réduits dans tous les composants.
La hiérarchie des jetons de mouvement à 3 niveaux
ExodeUI modélise les jetons de mouvement sur trois niveaux structurés :
Niveau 1 : jetons primitifs mondiaux
Constantes mathématiques brutes (par exemple, rigidité-400, amortissement-25, masse-1).
Niveau 2 : jetons d'intention sémantique
Noms fonctionnels liés à l'intention (par exemple, motion.interactive.snappy, motion.modal.enter).
Niveau 3 : jetons spécifiques aux composants
Remplacements liés à des composants spécifiques (par exemple, button.toggle.switch).
Topic Cluster Network
Explorer les concepts et outils liés
Outil générateur de jetons de mouvement
Créer et exporter des jetons de mouvement
Environnement de développement de mouvement
La vision de la plateforme MDE
Comment les fichiers ExodeUI sont créés
De .exode à votre application
Glossaire : jetons de mouvement
Définition formelle et schéma standard
Des questions ?
Questions fréquentes
Créez des composants vivants avec un vrai mouvement.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.