Qu'est-ce qu'un système de mouvement ? Un guide pratique pour les équipes UI
Un système de mouvement est constitué des règles, jetons et composants partagés qui décident de la manière dont un produit se déplace. Qu'est-ce qui appartient à l'un, comment le gérer et où se situe ExodeUI.
À retenir
Un système de mouvement est un ensemble partagé de règles, de jetons, de composants et de codes qui décident de la manière dont un produit se déplace. Il couvre les durées, les assouplissements, les ressorts, la chorégraphie et les états d'interaction afin que les équipes réutilisent le mouvement approuvé au lieu de le reconstruire écran par écran. Un système de mouvement est un problème de gestion autant qu'un problème de conception : il a besoin d'un propriétaire, d'une source de vérité et d'un chemin vers la production.
Qu'est-ce qu'un système de mouvement ?
Un système de mouvement est la partie d'un système de conception qui décrit le mouvement. Il répond à des questions qu'une bibliothèque de composants statiques ne peut pas résoudre : à quelle vitesse un menu s'ouvre, comment un bouton réagit lorsqu'on appuie dessus, que se passe-t-il lorsqu'un utilisateur interrompt une transition et quelles valeurs de ressort appartiennent à quelle surface. Le résultat n’est pas une page de guide de style. Le résultat est un petit ensemble de décisions réutilisables que les concepteurs et les développeurs peuvent appliquer sans inventer une nouvelle animation à chaque fois.
Ce qui appartient à un système de mouvement
Un système de mouvement utile comporte cinq parties. Sautez-en un et le système devient un dossier de fichiers que personne n'utilise.
Principles
Des règles courtes qui expliquent la personnalité du produit. Par exemple : le mouvement confirme la saisie sur la première image, ou les grandes surfaces bougent moins que les petites.
Jetons
Valeurs nommées pour la durée, l'assouplissement et les ressorts, telles que motion.enter.fast ou motion.spring.snappy. Les jetons rendent le mouvement révisable et maintiennent les valeurs cohérentes.
Motifs
Comportements réutilisables pour les tâches courantes : entrée, sortie, développement, réorganisation, glisser, rejeter, réussite et erreur.
Composants
Les blocs de construction en direct qui utilisent déjà les modèles, afin qu'une équipe puisse en ajouter un au lieu de lire un document et de le reconstruire.
Gouvernance
Qui peut modifier le système, comment les modifications sont examinées et comment les mouvements obsolètes sont retirés.
Système de mouvement vs système de conception vs jetons de mouvement
Un système de conception couvre la couleur, le type, l’espacement, les composants et les règles d’utilisation. Un système de mouvement est la couche de mouvement à l'intérieur, et il a souvent son propre propriétaire car le mouvement change pour des raisons différentes de celles de la couleur. Les jetons de mouvement sont la plus petite unité de cette couche : des valeurs nommées pour le timing et la physique. Une bibliothèque de jetons est nécessaire mais pas suffisante. Sans modèles ni composants actifs, les jetons deviennent une liste de nombres que les concepteurs interprètent différemment sur chaque écran.
Pourquoi les systèmes de mouvement échouent
La plupart des systèmes de mouvement échouent pour des raisons opérationnelles et non esthétiques. Les jetons résident dans un document déconnecté des composants. La motion approuvée n'existe que dans un prototype que les développeurs ne peuvent pas exécuter. Une équipe adopte le système et une autre continue d’expédier des durées codées en dur. Le système n’a pas de propriétaire, donc il dérive. Pour résoudre ce problème, il faut placer le système à un endroit où le travail est déjà en cours : dans le fichier de conception, dans la bibliothèque de composants et lors de la révision du code.
Comment gérer un système de mouvement
Commencez avec une petite surface possédée et faites du système la voie la plus facile.
- Choisissez une source de vérité pour les jetons et créez un lien vers celle-ci à partir du fichier de conception et de la base de code
- Nommez les jetons par intention, pas par valeur : motion.exit.fast est plus utile que motion.200ms
- Expédiez un petit ensemble de modèles avant d’ajouter plus de jetons
- Examinez les changements de mouvement comme les changements de code, avec un enregistrement avant et après
- Suivre la réutilisation : combien de nouveaux composants utilisent des modèles approuvés au lieu d'un timing personnalisé
- Supprimez les anciennes valeurs selon un calendrier afin que le système n'accumule pas de doublons.
Où s'adapte ExodeUI
ExodeUI conserve le mouvement dans un fichier .exode ouvert plutôt que dans une spécification distincte. La disposition, les états, les chronologies, la physique du ressort, la logique et les entrées cohabitent, et les packages d'exécution lisent le fichier dans React, Vue, Svelte, Angular, Solid, React Native, SwiftUI et Flutter. Cela donne à un système de mouvement une référence de travail : un concepteur peut ouvrir le composant approuvé, un développeur peut inspecter le même fichier et un outil de codage IA peut le modifier via le serveur MCP. Le dossier ne remplace pas la gouvernance. Cela donne simplement à la gouvernance quelque chose de concret à souligner.
Comment démarrer un système de mouvement en un seul sprint
Auditez dix de vos composants les plus utilisés et répertoriez chaque durée, courbe et ressort. Regroupez les valeurs qui font le même travail et nommez les groupes. Choisissez cinq modèles qui couvrent la plupart des interactions. Créez un composant de référence par modèle, documentez quand l'utiliser et ajoutez les jetons à vos bibliothèques de conception et de code. Exécutez ensuite une seule fonctionnalité via le nouveau système et mesurez le nombre de valeurs personnalisées dont elle a encore besoin. Ce nombre constitue votre référence pour le prochain sprint.
Extrait d’implémentation en production
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}Principes clés à retenir
- Un système de mouvement est la couche de mouvement d'un système de conception, et non un dossier de vidéos prototypes.
- Il a besoin de principes, de jetons, de modèles, de composants actifs et d'une gouvernance
- Les jetons sans règles d'utilisation deviennent des nombres que chaque équipe interprète différemment
- Les modifications de mouvement doivent être examinées comme les modifications de code
- ExodeUI conserve le mouvement, les états et la logique dans un seul fichier ouvert que les environnements d'exécution peuvent lire