¿Qué es un sistema de movimiento? Una guía práctica para equipos de UI
Un sistema de movimiento son las reglas, tokens y componentes compartidos que deciden cómo se mueve un producto. Qué pertenece a uno, cómo gestionarlo y dónde encaja ExodeUI.
Idea clave
Un sistema de movimiento es el conjunto compartido de reglas, tokens, componentes y códigos que deciden cómo se mueve un producto. Cubre duraciones, relajación, resortes, coreografías y estados de interacción para que los equipos reutilicen el movimiento aprobado en lugar de reconstruirlo pantalla por pantalla. Un sistema de movimiento es tanto un problema de gestión como un problema de diseño: necesita un propietario, una fuente de verdad y un camino hacia la producción.
¿Qué es un sistema de movimiento?
Un sistema de movimiento es la parte de un sistema de diseño que describe el movimiento. Responde preguntas que una biblioteca de componentes estáticos no puede: qué tan rápido se abre un menú, cómo reacciona un botón cuando se presiona, qué sucede cuando un usuario interrumpe una transición y qué valores de resorte pertenecen a qué superficie. El resultado no es una página de guía de estilo. El resultado es un pequeño conjunto de decisiones reutilizables que los diseñadores y desarrolladores pueden aplicar sin tener que inventar una nueva animación cada vez.
¿Qué pertenece a un sistema de movimiento?
Un sistema de movimiento útil tiene cinco partes. Si omite uno, el sistema se convierte en una carpeta de archivos que nadie usa.
Principles
Reglas breves que explican la personalidad del producto. Por ejemplo: el movimiento confirma la entrada en el primer cuadro, o las superficies grandes se mueven menos que las pequeñas.
Fichas
Valores con nombre para duración, relajación y resortes, como motion.enter.fast o motion.spring.snappy. Los tokens hacen que los movimientos sean revisables y mantienen los valores consistentes.
Patrones
Comportamientos reutilizables para trabajos comunes: entrar, salir, expandir, reordenar, arrastrar, descartar, éxito y error.
Componentes
Los bloques de construcción en vivo que ya usan los patrones, por lo que un equipo puede colocar uno en lugar de leer un documento y reconstruirlo.
Gobernancia
Quién puede cambiar el sistema, cómo se revisan los cambios y cómo se retiran las mociones obsoletas.
Sistema de movimiento versus sistema de diseño versus tokens de movimiento
Un sistema de diseño cubre color, tipo, espaciado, componentes y reglas de uso. Un sistema de movimiento es la capa de movimiento dentro de él y, a menudo, tiene su propio dueño porque el movimiento cambia por razones diferentes a las del color. Los tokens de movimiento son la unidad más pequeña de esa capa: valores con nombre para sincronización y física. Una biblioteca de tokens es necesaria pero no suficiente. Sin patrones ni componentes activos, los tokens se convierten en una lista de números que los diseñadores interpretan de manera diferente en cada pantalla.
¿Por qué fallan los sistemas de movimiento?
La mayoría de los sistemas de movimiento fallan por razones operativas, no estéticas. Los tokens viven en un documento que está desconectado de los componentes. La moción aprobada existe sólo en un prototipo que los desarrolladores no pueden ejecutar. Un equipo adopta el sistema y otro sigue enviando duraciones codificadas. El sistema no tiene dueño, por lo que va a la deriva. Arreglar eso significa colocar el sistema en algún lugar donde ya se realiza el trabajo: en el archivo de diseño, en la biblioteca de componentes y en la revisión del código.
Cómo gestionar un sistema de movimiento
Comience con una superficie pequeña y propia y haga del sistema el camino más fácil.
- Elija una fuente de verdad para los tokens y vincúlela desde el archivo de diseño y el código base.
- Nombra los tokens por intención, no por valor: motion.exit.fast es más útil que motion.200ms
- Envíe un pequeño conjunto de patrones antes de agregar más tokens
- Revise los cambios de movimiento, como cambios de código, con una grabación del antes y el después.
- Seguimiento de la reutilización: cuántos componentes nuevos utilizan patrones aprobados en lugar de tiempos personalizados
- Retire los valores antiguos según un cronograma para que el sistema no acumule duplicados.
Donde encaja ExodeUI
ExodeUI mantiene el movimiento dentro de un archivo .exode abierto en lugar de en una especificación separada. El diseño, los estados, las líneas de tiempo, la física de los resortes, la lógica y las entradas conviven, y los paquetes de tiempo de ejecución reproducen el archivo en React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter. Eso le da al sistema de movimiento una referencia de trabajo: un diseñador puede abrir el componente aprobado, un desarrollador puede inspeccionar el mismo archivo y una herramienta de codificación de IA puede editarlo a través del servidor MCP. El expediente no reemplaza la gobernanza. Simplemente le da a la gobernanza algo concreto que señalar.
Cómo iniciar un sistema de movimiento en un sprint
Audite diez de sus componentes más utilizados y enumere cada duración, curva y resorte en ellos. Agrupe los valores que hacen el mismo trabajo y nombre los grupos. Elija cinco patrones que cubran la mayoría de las interacciones. Cree un componente de referencia por patrón, documente cuándo usarlo y agregue los tokens a sus bibliotecas de código y diseño. Luego ejecute una sola función a través del nuevo sistema y mida cuántos valores personalizados aún necesita. Ese número es tu punto de referencia para el próximo sprint.
Fragmento de implementación en producción
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()}
/>
);
}Principios clave para recordar
- Un sistema de movimiento es la capa de movimiento de un sistema de diseño, no una carpeta de videos prototipo.
- Necesita principios, tokens, patrones, componentes vivos y gobernanza.
- Los tokens sin reglas de uso se convierten en números que cada equipo interpreta de manera diferente
- Los cambios de moción deben revisarse como cambios de código.
- ExodeUI mantiene el movimiento, los estados y la lógica en un archivo abierto que los tiempos de ejecución pueden reproducir