Aller au guide d’utilisation
Motion Systempar Owl-Listener

Motion System Skill.

Rendez les décisions d'animation réutilisables entre composants et équipes.

  • Design systems
  • Mouvement
Revue de la source · Motion SystemSKILL.md
Tâche Design systems Produit • Des tokens nommés de durée et d'accélération avec leurs usages prévus. • Des règles de chorégraphie pour les groupes, le décalage (stagger) et la direction. • Des surcharges pour la réduction des animations et les exigences de documentation. Avant de commencer Nécessite une implémentation de tokens ou un équivalent sur la plateforme ; la source n'impose aucun framework d'animation.
Synthèse éditoriale · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Créer un vocabulaire de mouvement partagé

Définir des tokens de mouvement partagés, des règles de coordination et des alternatives de réduction des animations pour l'ensemble du produit.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

L'approche de travail

Motion System traite le mouvement comme une couche design-token plutôt que comme une série de choix de composants sans lien. Il définit une petite échelle de durées, des rôles d'accélération sémantiques et des règles de coordination pour les éléments qui entrent, sortent ou se déplacent ensemble.

La source place aussi la gestion de la réduction des animations au niveau du système. C'est une distinction importante par rapport à l'ajustement d'une animation après sa mise en production : les surcharges de tokens et les comportements de remplacement peuvent s'appliquer de façon cohérente dans tout le produit. Les durées données en exemple constituent un vocabulaire de départ, et non la preuve que toutes les interfaces doivent utiliser les mêmes valeurs.

Livrables attendus

  • Des tokens nommés de durée et d'accélération avec leurs usages prévus.
  • Des règles de chorégraphie pour les groupes, le décalage (stagger) et la direction.
  • Des surcharges pour la réduction des animations et les exigences de documentation.
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Inventorier les rôles du mouvement

    Identifiez les changements d'état immédiats, les entrées, les sorties et les transitions plus importantes. Ne créez que le nombre de tokens nécessaire pour couvrir des besoins distincts.

  2. 02
    Définir la coordination

    Précisez le timing partagé au sein des groupes sémantiques, les limites de décalage et des directions de mouvement cohérentes.

  3. 03
    Construire la variante accessible

    Documentez quels mouvements disparaissent, ce qui les remplace et comment les informations d'état essentielles restent visibles.

02 Cas d’usage

Quand l'utiliser

Nécessite une implémentation de tokens ou un équivalent sur la plateforme ; la source n'impose aucun framework d'animation.

Un bon choix

  • Mouvement incohérent entre composantsUtile lorsque différentes équipes ont accumulé des durées d'animation incompatibles.
  • Extension du système de tokensAjoute le mouvement au même pipeline partagé qui gère déjà la couleur et l'espacement.

Limites à vérifier

  • Pas une animation terminéeLes interactions individuelles nécessitent encore d'être composées et implémentées.
  • Les exemples doivent être testésLes durées et courbes de la source doivent être validées au regard du produit, des appareils et des exigences d'accessibilité.

Éléments à fournir

  • Inventaire des composantsListez les animations existantes et ce que chacune communique.
  • Principes de mouvementDécrivez le caractère recherché du produit et les interactions qui ne doivent pas être animées.
  • Plateforme et accessibilitéIndiquez les cibles d'implémentation et les attentes en matière de réduction des animations.

03 Décisions importantes

Les décisions qui comptent

  1. Un vocabulaire réduit

    Avec moins de choix sémantiques, il est plus facile de repérer une exception inutile que dans un large catalogue de durées arbitraires.

  2. Accessibilité globale

    Les surcharges au niveau du système réduisent le risque qu'un composant oublie la préférence de mouvement.

04 Exemple de brief

Essayer un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez la méthode d'installation documentée du dépôt et conservez les fichiers complémentaires référencés. Cette entrée décrit une méthode de conception ciblée et non une application exécutable.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

Nécessite une implémentation de tokens ou un équivalent sur la plateforme ; la source n'impose aucun framework d'animation.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilise motion-system pour unifier nos infobulles, tiroirs, boîtes de dialogue et transitions de page. Propose une petite échelle de tokens et des rôles d'accélération pour l'entrée et la sortie, définis des limites de décalage (stagger) et rédige un comportement de réduction des animations qui préserve les informations d'état. Inclus les cas qui ne doivent pas être animés et indique que les durées sont des propositions à tester sur appareils.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque token a un rôle distinct et une valeur concrète.
  • Les éléments groupés suivent les mêmes règles de chorégraphie documentées.
  • Le comportement de réduction des animations est spécifié au niveau du système.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec le produit, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Synthèse éditoriale de la source
Définir des tokens de mouvement partagés, des règles de coordination et des alternatives de réduction des animations pour l'ensemble du produit.

Synthèse originale de OpenDesign, fondée sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Combien de tokens de durée faut-il ?

La source recommande un petit ensemble, généralement de quatre à six, et de n'ajouter des valeurs que pour des cas réellement différents.

La réduction des animations supprime-t-elle tout retour visuel ?

Non. La communication essentielle de l'état doit rester, avec le mouvement désactivé ou remplacé lorsque c'est approprié.

Quelle implémentation cible-t-il ?

Il décrit des propriétés personnalisées CSS ou des tokens équivalents sur la plateforme, ainsi que leur intégration dans un pipeline d'export de tokens existant.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md