Guías de Movimiento de Marca
Redacta un sistema de movimiento de marca: el documento que define cómo se mueve una marca o producto, tal como lo hacen los sistemas de diseño maduros (Slack, IBM Carbon, Klarna, Material). El resultado es una plantilla lista para completar que cubre principios, tokens de easing/temporización, una biblioteca de movimientos, reglas de logotipo, estados de retroalimentación, accesibilidad y ejemplos de lo que se debe y no se debe hacer.
Cuándo usarlo
Úsalo cuando una marca o producto necesite un lenguaje de movimiento documentado, cuando la animación parezca inconsistente en todo el equipo, al definir tokens de easing/duración con nombre para diseñadores e ingenieros, o al agregar un estándar de accesibilidad/movimiento reducido. El resultado es un documento estructurado, no código.
Árbol de decisiones: define el alcance del sistema, luego elige el token
Dos juicios: qué tan grande es el sistema que realmente necesita esta marca y qué token debe usar un movimiento determinado. No construyas un sistema de 7 partes para una página de aterrizaje; no publiques una página única para un sistema de diseño de múltiples equipos.
¿Cuántas superficies/equipos usarán esto?
├─ Un sitio / una campaña → ligero: principios + tokens + una biblioteca
│ breve. Omite secciones profundas de logotipo/estado a menos que sean relevantes.
├─ Un producto (app/web) → documento completo de 7 partes; los tokens son obligatorios.
└─ Una marca en producto + marketing + difusión → documento completo MÁS un
preset de Personalidad de Movimiento (consulta motion-art-direction) para que cada medio coincida.
Elegir el token para un movimiento determinado:
duración: elemento más grande / recorrido más largo → token más largo
(instantáneo<rápido<base<lento<más lento)
easing: entrada → desacelerar · salida → acelerar (y más corto)
movimiento dentro de la vista → estándar · momento de marca → enfatizado
bucle continuo → lineal · acento lúdico → resorte (con moderación)
Regla general: si un movimiento no puede nombrar el token que usa, es un caso aislado, y los casos aislados son lo que hace que un sistema se sienta inconsistente.
Qué contiene un sistema de movimiento
Un documento completo de guías de movimiento tiene siete partes. Redáctalas en orden:
- Principios de movimiento — 3-5 creencias nombradas que rigen cada animación.
- Tokens de temporización y easing — duraciones y curvas con nombre, para que el movimiento sea coherente e implementable por ingenieros.
- Biblioteca de movimiento — patrones de entrada, salida y transición mapeados a tokens.
- Reglas de animación de logotipo — cómo puede y no puede moverse la marca.
- Movimiento de retroalimentación y estado — carga, éxito, error, hover, foco.
- Accesibilidad — movimiento reducido, fotosensibilidad, visibilidad del foco.
- Lo que se debe y no se debe hacer — ejemplos concretos que hacen que las reglas sean inequívocas.
Los tokens son el núcleo
Todo lo demás hace referencia a los tokens. Define duraciones y curvas una vez, como tokens con nombre; la biblioteca y los componentes los reutilizan. Esto es lo que hace que un sistema de movimiento sea implementable en lugar de decorativo.
Ejemplo de tokens de duración (completar / ajustar)
| Token | Valor | Uso |
|---|---|---|
duration-instant | 100ms | Micro-retroalimentación (toggle, toque) |
duration-fast | 150ms | Hover, cambio de estado pequeño |
duration-base | 250ms | Transición de interfaz de usuario estándar (predeterminada) |
duration-slow | 400ms | Superficies más grandes, modales, secciones de página |
duration-slower | 600ms | Momentos de héroe/marca, pantalla completa |
Regla general: cuanto más grande es el elemento/distancia, más larga es la duración. La mayoría del movimiento de la interfaz de usuario se encuentra entre 150-400 ms; por debajo de ~100 ms se percibe como instantáneo, por encima de ~500 ms se siente lento para la interfaz de usuario rutinaria.
Ejemplo de tokens de easing (curvas)
| Token | cubic-bezier | Sensación / uso |
|---|---|---|
ease-standard | (0.4, 0.0, 0.2, 1) | Predeterminado; elemento que se mueve dentro de la vista |
ease-decelerate (ease-out) | (0.0, 0.0, 0.2, 1) | Entradas: rápido al entrar, se asienta |
ease-accelerate (ease-in) | (0.4, 0.0, 1, 1) | Salidas: ease in, acelera |
ease-emphasized | (0.2, 0.0, 0, 1) | Momentos expresivos/de marca |
ease-spring | spring(stiffness, damping) | Sobreimpulso lúdico (usar con moderación) |
Principio: las entradas desaceleran (los objetos llegan y se asientan), las salidas aceleran (los objetos se van con intención), y nada importante usa easing lineal: lo lineal se siente mecánico y está reservado para bucles continuos (spinners, progreso).
Biblioteca de movimiento (mapear patrones a tokens)
| Patrón | Tokens | Comportamiento |
|---|---|---|
| Fundido de entrada | duration-base + ease-decelerate | Opacidad 0→1 |
| Escala + fundido de entrada | duration-base + ease-decelerate | Escala 0.96→1, opacidad 0→1 |
| Deslizar hacia arriba | duration-slow + ease-decelerate | Y +8/16px → 0, fundido de entrada |
| Fundido de salida | duration-fast + ease-accelerate | Opacidad 1→0 (las salidas son más rápidas que las entradas) |
| Apertura de modal | duration-slow + ease-emphasized | Escala + fundido, el fondo se desvanece |
| Transición de página/sección | duration-base + ease-standard | Fundido cruzado o movimiento de elemento compartido |
| Escalonado de lista | duration-fast por elemento, offset de 30-50 ms | Los elementos aparecen en cascada, no todos a la vez |
Regla predeterminada: las salidas son más cortas que las entradas; los escalonados usan pequeños desplazamientos (30-50 ms) para que los grupos se sientan vivos sin arrastrarse.
La plantilla (completar)
[MARCA] GUÍAS DE MOVIMIENTO Versión: ___ Propietario: ___
1. PRINCIPIOS
Nos movemos para: [principio 1 — ej. "Guiar la atención, nunca robarla"]
[principio 2 — ej. "Rápido por defecto, expresivo a propósito"]
[principio 3 — ej. "Cada movimiento tiene una razón"]
[principio 4] [principio 5]
2. TOKENS DE TEMPORIZACIÓN
instantáneo ___ms · rápido ___ms · base ___ms · lento ___ms · más lento ___ms
3. TOKENS DE EASING
estándar ____ · desacelerar ____ · acelerar ____ · enfatizado ____
4. BIBLIOTECA DE MOVIMIENTO
Entradas: [lista de patrones + tokens]
Salidas: [lista de patrones + tokens]
Transiciones:[lista de patrones + tokens]
5. ANIMACIÓN DE LOGOTIPO
Permitido: [estilo de revelación, token de duración, cuándo puede animarse]
Nunca: [estirar, distorsionar, rotar libremente, cambiar de color, exceder ___ms]
6. MOVIMIENTO DE RETROALIMENTACIÓN Y ESTADO
Carga: [reglas de spinner/esqueleto + cuándo usar cada uno]
Éxito: [movimiento de confirmación]
Error: [reglas de sacudida/color: nunca solo color]
Hover/Foco: [token + requisito de foco visible]
7. ACCESIBILIDAD
Movimiento reducido: [qué sucede: consulta la sección a continuación]
Fotosensibilidad: máximo 3 destellos/segundo; sin estroboscopia de pantalla completa.
Foco: los indicadores de foco nunca se animan para desaparecer o desaparecer.
8. LO QUE SE DEBE Y NO SE DEBE HACER
✅ [hacer] ❌ [no hacer]
Reglas de animación de logotipo (completar)
Indica explícitamente qué está permitido y prohibido. Línea de base típica:
- Permitido: una revelación/construcción usando
duration-slow-slower+ease-emphasized; asentamiento suave; una construcción característica mantenida consistente en todas partes. - Nunca: estirar/comprimir la marca desproporcionadamente, rotar libremente, cambiar de color fuera de la paleta, animar cada aparición (reservarlo para momentos clave), o exceder la duración máxima acordada.
Movimiento de retroalimentación y estado
- Carga: esqueletos para el diseño de contenido; spinners solo para esperas cortas e indeterminadas; mostrar progreso para esperas de más de ~1 s.
- Éxito/error: combinar movimiento con una etiqueta o icono: nunca comunicar el estado solo con color o movimiento (accesibilidad).
- Hover/foco:
duration-fast+ease-standard; el estado de foco debe ser claramente visible y no debe animarse fuera de la vista.
Accesibilidad (sección obligatoria)
- Movimiento reducido: respetar la configuración de "movimiento reducido" del usuario. Reemplazar movimiento/paralaje/transformaciones grandes con fundidos de opacidad simples o cambios de estado instantáneos. Mantener el significado esencial; eliminar el movimiento decorativo. (Conceptualmente se asigna a
prefers-reduced-motion.) - Fotosensibilidad: no más de 3 destellos por segundo; evitar estroboscopia de alto contraste en pantalla completa.
- Sin significado solo por movimiento/color: siempre combinar con texto o icono.
- Visibilidad del foco: nunca permitir que una animación oculte o elimine el indicador de foco.
Ejemplos trabajados
BUENO — una entrada de biblioteca anclada a tokens:
Apertura de modal:
duration-slow(400 ms) +ease-emphasized; escala 0.96→1, fondo se desvanece. Cierre:duration-base(250 ms) +ease-accelerate.
Cada valor es un token con nombre, el cierre es más corto que la apertura, el easing coincide con la intención (enfatizado para un momento de marca al entrar, acelerar al salir). Un ingeniero puede implementarlo directamente y coincidirá con cualquier otro modal.
ANTIPATRÓN — la guía de "vibraciones":
"Las animaciones deben sentirse suaves, modernas y encantadoras. Usa un easing agradable y mantén las cosas ágiles pero no demasiado rápidas."
Por qué falla: sin tokens con nombre, sin valores, sin regla de entrada/salida, nada implementable: "suave" y "ágil" se contradicen y cada ingeniero los interpreta de manera diferente, por lo que el producto termina siendo inconsistente (el problema exacto que se suponía que el documento debía resolver). La solución: reemplazar adjetivos con las tablas de tokens, mapear cada patrón a tokens y proporcionar pares de hacer/no hacer con valores de milisegundos concretos.
Errores comunes
| Síntoma | Por qué sucede | Solución |
|---|---|---|
| Movimiento inconsistente entre pantallas | Valores únicos ajustados manualmente, sin tokens | Definir tokens una vez; cada patrón hace referencia a ellos |
| El documento suena bien, no se puede construir | Principios escritos como adjetivos, no como valores | Emparejar cada principio con una regla de token numérica |
| Todo rebota | Resorte/sobreimpulso usado en todas partes | Reservar resorte/enfatizado solo para momentos de marca |
| Las salidas se sienten lentas | Duración de salida ≥ entrada | Hacer las salidas un paso más cortas; acelerarlas |
| La animación rompe la accesibilidad | Sin movimiento reducido / estados solo de color | Agregar la sección de accesibilidad requerida; emparejar movimiento con texto/icono |
| El logotipo se anima de manera diferente en todas partes | Sin reglas de logotipo | Indicar una revelación característica + una lista explícita de "nunca" |
| Los valores de los tokens se renombran constantemente | Los nombres son literales (duration-250) | Nombrar por propósito (duration-base) para que los valores puedan cambiar |
Especificación del entregable: qué contiene un buen documento de guías de movimiento
El resultado es un documento estructurado (plantilla en references/full-template.md), no código. Un documento completo tiene las siete partes, y:
- 3-5 principios nombrados, cada uno con una regla de una línea (no adjetivos).
- Tokens de duración y easing con valores/curvas: el núcleo implementable.
- Una biblioteca de movimiento que mapea cada patrón a tokens.
- Reglas explícitas de permitido/nunca para el logotipo.
- Movimiento de retroalimentación/estado (carga, éxito, error, hover, foco).
- Una sección de accesibilidad obligatoria (movimiento reducido, fotosensibilidad, foco, sin significado solo por color).
- Pares concretos de hacer/no hacer que eliminen la ambigüedad.
Antes de terminar — lista de verificación
- 3-5 principios, cada uno nombrado y con una regla de una línea.
- Tokens de duración definidos con valores; tokens de easing con curvas cubic-bezier.
- Cada patrón de la biblioteca nombra los tokens que usa.
- Las entradas desaceleran, las salidas aceleran y son más cortas; lineal solo para bucles.
- Las reglas del logotipo indican tanto lo permitido como lo que nunca se debe hacer.
- Los estados de retroalimentación combinan movimiento con texto/icono (nunca solo color).
- Sección de accesibilidad presente: movimiento reducido, fotosensibilidad, foco, contraste.
- Los pares de hacer/no hacer son concretos (con valores), no vibraciones.
- Los nombres de los tokens son semánticos (propósito), no valores literales.
Marcos relacionados
Este documento es el sistema de registro del movimiento de una marca; dos habilidades hermanas proporcionan la teoría ascendente y la sensación por proyecto: consúltalos y aplícalos, no dupliques sus tablas:
animation-principles— tu sección de principios debe codificar los Tres Pilares (intención → tono → oficio); las capas de movimiento Primario/Secundario/Ambiente explican por qué un movimiento de héroe y un desplazamiento ambiente obtienen tokens diferentes; la Regla de 1/3 justifica los límites de escalonado (no muevas todo a la vez). Cítalos; mantén las tablas canónicas allí.motion-art-direction— para una marca que abarca producto + marketing + difusión, elige un preset de Personalidad de Movimiento con nombre y establécela al principio del documento, luego deriva los valores de los tokens para que coincidan (preset más rápido → duraciones más cortas; preset premium → más largo, más suave). La especificación del lenguaje de movimiento vive allí.
Referencia rápida
| Decisión | Valor predeterminado |
|---|---|
| Duración de interfaz de usuario predeterminada | duration-base 250 ms |
| Easing de entrada | desacelerar (ease-out) |
| Easing de salida | acelerar (ease-in), más corto que la entrada |
| Easing lineal | solo para bucles (spinners/progreso) |
| Offset de escalonado | 30-50 ms por elemento |
| Animación de logotipo | reservada, consistente, nunca distorsionar |
| Retroalimentación de estado | movimiento + etiqueta/icono, nunca solo color |
| Movimiento reducido | intercambiar transformaciones por fundidos/instantáneos |
Archivos de referencia
references/full-template.md— el documento completo de guías de movimiento para completar con cada sección expandida y texto de ejemplo.references/token-reference.md— tablas completas de tokens de duración y easing con valores, curvas cubic-bezier y notas de uso.references/dos-and-donts.md— una biblioteca de pares concretos de hacer/no hacer y ejemplos de principios trabajados (estilo Slack/IBM/Material).