Motion Systempor Owl-Listener

Motion System Skill.

Haz que las decisiones de animación sean reutilizables entre componentes y equipos.

Sistemas de diseño
Movimiento

Revisión de la fuente · Motion SystemSKILL.md

Tarea Sistemas de diseño Produce • Tokens de duración y de easing con nombre y usos previstos. • Reglas de coreografía para grupos, escalonado (stagger) y dirección. • Anulaciones para movimiento reducido y requisitos de documentación. Antes de empezar Requiere una implementación de tokens o un equivalente de la plataforma; la fuente no exige ningún framework de animación.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Crea un vocabulario de movimiento compartido

Define tokens de movimiento compartidos, reglas de coordinación y alternativas de movimiento reducido para todo el producto.

Flujo de trabajo basado en la fuenteNo es una prueba comparativa de ejecución

El enfoque de trabajo

Motion System trata el movimiento como una capa de design tokens y no como una serie de decisiones de componentes sin relación. Define una escala reducida de duraciones, roles semánticos de easing y reglas de coordinación para elementos que entran, salen o se mueven juntos.

La fuente también sitúa el tratamiento del movimiento reducido a nivel de sistema. Es una diferencia importante frente a ajustar una animación después de publicarla: las anulaciones de tokens y los comportamientos sustitutivos pueden aplicarse de forma coherente en todo el producto. Los tiempos de ejemplo son un vocabulario inicial, no una prueba de que todas las interfaces deban usar los mismos valores.

Entregables esperados

Tokens de duración y de easing con nombre y usos previstos.
Reglas de coreografía para grupos, escalonado (stagger) y dirección.
Anulaciones para movimiento reducido y requisitos de documentación.

Ver el brief de ejemplo

Del brief a la revisión

01
Inventaría los roles del movimiento
Identifica cambios de estado inmediatos, entradas, salidas y transiciones mayores. Crea solo los tokens necesarios para cubrir necesidades distintas.
02
Define la coordinación
Especifica tiempos compartidos dentro de grupos semánticos, límites de escalonado y direcciones de movimiento coherentes.
03
Crea la variante accesible
Documenta qué movimiento desaparece, qué lo sustituye y cómo la información esencial de estado sigue siendo visible.

02 Cuándo usarlo

Cuándo usarlo

Requiere una implementación de tokens o un equivalente de la plataforma; la fuente no exige ningún framework de animación.

Buena opción

Movimiento incoherente entre componentesÚtil cuando distintos equipos han acumulado tiempos de animación incompatibles.
Ampliación del sistema de tokensAñade el movimiento al mismo flujo compartido que ya gestiona el color y el espaciado.

Límites que conviene revisar

No es una animación terminadaCada interacción sigue necesitando composición e implementación.
Los ejemplos requieren pruebasLas duraciones y curvas de la fuente deben validarse con el producto, los dispositivos y los requisitos de accesibilidad.

Aporta estos datos

Inventario de componentesEnumera las animaciones existentes y lo que comunica cada una.
Principios de movimientoDescribe el carácter previsto del producto y las interacciones que no deben animarse.
Plataforma y accesibilidadIndica los destinos de implementación y las expectativas de movimiento reducido.

03 Decisiones importantes

Decisiones que importan

Vocabulario reducido
Con menos opciones semánticas es más fácil detectar una excepción innecesaria que con un gran catálogo de tiempos arbitrarios.
Accesibilidad global
Las anulaciones a nivel de sistema reducen la probabilidad de que un componente olvide la preferencia de movimiento.

04 Ejemplo de brief

Prueba con un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada en el repositorio y conserva los archivos complementarios a los que se haga referencia. Esta ficha describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

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

Requiere una implementación de tokens o un equivalente de la plataforma; la fuente no exige ningún framework de animación.

Empieza con un entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa motion-system para unificar nuestros tooltips, paneles laterales, diálogos y transiciones de página. Propón una escala reducida de tokens y roles de easing de entrada/salida, define límites de escalonado y redacta un comportamiento de movimiento reducido que conserve la información de estado. Incluye casos que no deben animarse y marca los tiempos como propuestas para probar en dispositivos.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada token tiene un rol distinto y un valor concreto.
Los elementos agrupados siguen las mismas reglas de coreografía documentadas.
El comportamiento de movimiento reducido está especificado a nivel de sistema.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Que aparezca en este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo del skill: design-systems/skills/motion-system/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Define tokens de movimiento compartidos, reglas de coordinación y alternativas de movimiento reducido para todo el producto.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no un indicador de uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Cuántos tokens de duración debería haber?

La fuente recomienda un conjunto reducido, normalmente de cuatro a seis, y añadir valores solo para casos realmente distintos.

¿El movimiento reducido elimina todo el feedback?

No. Debe mantenerse la comunicación esencial del estado, desactivando o sustituyendo el movimiento cuando corresponda.

¿Para qué implementación está pensado?

Describe propiedades personalizadas de CSS o tokens equivalentes de la plataforma, e incluirlos en un flujo de exportación de tokens existente.

OpenDesign

Deja espacio para la próxima iteración del diseño.

Mantén tu brief, el material de origen y tu trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño