LanguageEspañol
Pilar 06 · Sistemas de Diseño
Motion Tokens: la arquitectura completa para sistemas de diseño
Estandarice el movimiento en todo su ecosistema de productos. Deje de codificar beziers cúbicos arbitrarios de 300 ms en docenas de repositorios de desarrolladores.
What is Motion Tokens: in ExodeUI?
Los tokens de movimiento son tokens de diseño estandarizados que definen parámetros de animación, como rigidez del resorte, relación de amortiguación, masa, curvas de relajación y duración, en un formato legible por máquina. Nuestro Motion Token Generator gratuito crea un conjunto inicial que puede exportar para CSS y JSON, y las herramientas de creación de tokens los convierten en código para cada plataforma.
Arquitectura central
Por qué ingenieros y diseñadores eligen ExodeUI
Design, logic and motion in one file that runs inside your app.
Fichas de física de primavera
Defina el movimiento con tokens físicos (rigidez, amortiguación, masa) en lugar de números de tiempo arbitrarios.
Generación de código automatizada
Convierta tokens en variables CSS y código de plataforma con su proceso de creación de tokens existente.
Jerarquía semántica
Organice los tokens de movimiento en niveles globales, semánticos y de componentes (por ejemplo, motion.spring.snappy, motion.feedback.success).
Sincronización de herramientas de diseño
Sincronice tokens de movimiento sin problemas entre las variables Figma y las bases de código Git de producción.
Evaluación objetiva
Cómo se compara ExodeUI con Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Soporte completo de primera clase para tokens de resorte físicos y curvas de velocidad
- Exporta a formatos nativos móviles (SwiftUI/Compose) y web simultáneamente
- El inspector visual permite a los diseñadores sentir la física de los tokens en tiempo real
- Opciones de accesibilidad automática para preferencias de movimiento reducido
Traditional Design Tokens (Color/Type Only)
- La mayoría de las herramientas de tokens solo admiten colores, tipografía y espaciado estáticos.
- El movimiento se reduce a cadenas de duración crudas como "300 ms de entrada y salida".
- No hay forma visual de probar la dinámica del token antes de enviarlo al código
- Los ingenieros deben interpretar manualmente las especificaciones de movimiento en el código marco
Entrega al desarrollo
Cómo usarlo en tu código
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importar { ExodeUICanvas } desde 'exodeui';
// Resortes, estados y tiempos viven en el archivo .exode (diseñado en el
//editor). Su código pasa entradas y escucha eventos.
función de exportación SnappyButton() {
regresar (
<ExodeUILienzo
src="/snappy_button.bexode"
onTrigger={(nombre) => console.log('evento ExodeUI:', nombre)}
/>
);
}Por qué los sistemas de diseño fallan en movimiento
Los sistemas de diseño modernos han perfeccionado paletas de colores, escalas tipográficas, sombras de elevación y cuadrículas espaciadoras. Pero el movimiento sigue siendo el símbolo de diseño olvidado. En la mayoría de las organizaciones, la documentación de movimiento consta de pautas vagas como "las animaciones deben ser ágiles" o una variable de duración estática de 250 ms.
- Sensación de marca inconsistente: un ingeniero usa facilidad de salida, otro usa facilidad de entrada y salida y los dispositivos móviles usan los valores predeterminados de Apple.
- Curvas de duración frágiles: las animaciones cronometradas se sienten lentas en elementos pequeños y apresuradas en hojas inferiores grandes.
- Descuido de accesibilidad: los equipos no implementan anulaciones cohesivas de movimiento reducido en todos los componentes.
La jerarquía de tokens de movimiento de 3 niveles
ExodeUI modela tokens de movimiento en tres niveles estructurados:
Nivel 1: Fichas primitivas globales
Constantes matemáticas brutas (por ejemplo, rigidez-400, amortiguación-25, masa-1).
Nivel 2: tokens de intención semántica
Nombres funcionales vinculados a la intención (por ejemplo, motion.interactive.snappy, motion.modal.enter).
Nivel 3: tokens de componentes específicos
Anulaciones vinculadas a componentes específicos (por ejemplo, button.toggle.switch).
Topic Cluster Network
Explora conceptos y herramientas relacionadas
Herramienta generadora de tokens de movimiento
Crear y exportar tokens de movimiento
Entorno de desarrollo de movimiento
La visión de la plataforma MDE
Cómo se construyen los archivos ExodeUI
De .exode a tu app
Glosario: tokens de movimiento
Definición formal y esquema estándar.
¿Tienes preguntas?
Preguntas frecuentes
Crea componentes vivos con movimiento real.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.