Principios de motion design: cómo deberían moverse las interfaces en 2026
Guía de un diseñador en activo sobre el movimiento en UI. Los siete principios que separan el movimiento con propósito de la decoración, la tabla de duraciones y cómo lanzar animaciones que sobrevivan a un producto real.
El movimiento es la herramienta más maltratada del diseño de interfaces moderno. Todos los equipos lanzan un reel de animaciones, casi nadie lanza un sistema de movimiento. El resultado es un producto que rebota, tiembla y hace parallax hasta meterse en el camino del usuario. Movimiento que debió haberse cortado.
Este paper es la versión de un diseñador que trabaja de verdad. Siete principios que deciden si una pieza de movimiento se gana su lugar, una referencia de duración y easing que termina la discusión, y una lista corta de patrones que aguantan pruebas reales con usuarios. Nada de loops de Dribbble, nada de brand films, solo movimiento de producto que respeta el tiempo del usuario.
Qué es realmente el motion design
El motion design es la capa de comportamiento de un producto. Es cómo los elementos entran, salen, responden y se relacionan a lo largo del tiempo. Bien hecho, el movimiento le dice al usuario dónde está, de dónde viene y a dónde puede ir, sin una sola palabra extra de copy.
Mal hecho, el movimiento le dice al usuario que el diseñador tenía acceso a Framer. La animación decorativa, los springs interminables y los videos hero que se reproducen solos con sonido son el mismo error con distintos disfraces. El movimiento cuesta atención, ancho de banda y accesibilidad. Tiene que ganarse la factura.
La pieza sobre diseño de jerarquía visual explica cómo lee el ojo una página estática. El movimiento es la siguiente capa. Le dice al ojo no solo dónde mirar, sino cuándo.
El movimiento tiene dos trabajos y solo dos
Toda animación en un producto lanzado cumple uno de dos trabajos. Si no cumple ninguno, es decoración, y la decoración es lo primero que se corta en una revisión de rendimiento.
Trabajo uno: comunicar un cambio de estado. Un botón que estaba en reposo ahora está presionado. Un modal que no existía ahora está abierto. Una fila que estaba vacía ahora tiene datos. El movimiento hace legible el cambio mostrando la transición en lugar de saltar al nuevo estado.
Trabajo dos: guiar el ojo. Un elemento nuevo entra deslizándose desde la derecha porque el usuario tocó un botón de avance. Una tarjeta se encoge hacia la navegación inferior porque se guardó. El movimiento enseña al usuario el modelo espacial del producto sin obligarlo a leer documentación.
El movimiento que no comunica estado ni guía el ojo le cobra atención al usuario gratis. Córtalo.
Los siete principios del movimiento de producto
Estas son las palancas. Tíralas en combinación y el movimiento se lee como intencional. No tires ninguna y el producto se siente rígido. Tira demasiadas y el producto parece un juguete.
Principio 1: propósito antes que pulido
Toda animación responde una pregunta: ¿qué perdería el usuario si este movimiento no existiera? Si la respuesta es "nada", el movimiento es decoración. Si la respuesta es "no entendería qué pasó", el movimiento es estructural y se queda.
Los diseñadores que empiezan con "agreguemos una animacioncita aquí" lanzan productos ruidosos. Los que empiezan con "qué se pierde el usuario si esto salta de golpe" lanzan productos que se sienten vivos.
Principio 2: la duración se ajusta al impacto
Animaciones cortas para eventos pequeños. Animaciones más largas para los grandes.
Una pulsación de botón se resuelve en menos de 100 milisegundos. Una transición de página puede tardar hasta 400. Un modal que toma todo el viewport puede permitirse 500. Más que eso se siente lento en la décima interacción, aunque se sienta cinematográfico en la primera.
La tabla de duraciones:
| Evento | Duración | Por qué |
|---|---|---|
| Hover, foco, pulsación de botón | 100 a 150 ms | El feedback tiene que sentirse inmediato |
| Cambio de estado pequeño (toggle, input) | 150 a 200 ms | Se nota pero no interrumpe |
| Apertura de tarjeta, tooltip, dropdown | 200 a 300 ms | Espacio suficiente para que el easing se sienta natural |
| Transición de página o modal | 300 a 400 ms | Fija el contexto espacial sin arrastrarse |
| Cambio grande de layout, revelado de onboarding | 400 a 500 ms | Solo cuando el momento de verdad importa |
Cualquier cosa por encima de 500 ms en un producto (a diferencia de una página de marketing) es un impuesto sobre cada usuario recurrente. La primera vista es cinematográfica. La centésima es tortura.
Principio 3: el easing transmite la emoción
El movimiento lineal es robótico. El mundo físico no se mueve de forma lineal, y las interfaces que lo hacen se sienten mecánicas. Las curvas de easing son lo que hace que el movimiento se sienta humano.
Tres easings cubren el 90% del trabajo de producto.
- Ease-out para elementos que entran en pantalla. Rápido al principio, lento al final. Coincide con cómo el usuario espera que un objeto se asiente en su lugar.
- Ease-in para elementos que salen de pantalla. Lento al principio, rápido al final. El usuario ve que el elemento reconoce la salida antes de irse.
- Ease-in-out para elementos que se mueven de un lugar a otro. Suave en ambos extremos. Coincide con la inercia física.
Las curvas spring son la cuarta opción, para usar con cuidado. Los springs se sienten juguetones y correctos para apps de consumo con voz amigable. Se sienten mal en software financiero, salud o cualquier producto donde el rebasamiento se lea como inestabilidad.
Principio 4: el movimiento respeta las preferencias de movimiento
Todo producto lanza una ruta para prefers-reduced-motion. Los usuarios con trastornos vestibulares, migrañas o sensibilidad atencional sufren daño por un movimiento que otros disfrutan. Ignorar esa configuración no es una decisión de estilo, es un fallo de accesibilidad.
La regla no es quitar todo el movimiento cuando la opción está activa. Es reemplazar el movimiento basado en distancia por movimiento basado en opacidad.
Una tarjeta que se desliza 40 píxeles pasa a ser una tarjeta que aparece con fade. El cambio de estado se sigue comunicando, y se elimina el detonante vestibular. El desglose de la lista de verificación de accesibilidad web explica dónde encaja esto en la auditoría de accesibilidad completa.
Principio 5: consistencia en todo el producto
El movimiento tiene que sentirse como un solo producto que tomó un solo conjunto de decisiones. Dos pantallas con easings y duraciones distintos se sienten como dos productos cosidos. Los usuarios lo notan, aunque no sepan articular qué se siente raro.
La solución es un sistema de movimiento. De tres a cinco duraciones. De tres a cinco easings.
Tokens con nombre como motion.short, motion.medium, motion.long, ease.enter, ease.exit, ease.standard. El desglose de la guía de sistemas de diseño explica dónde viven junto a los tokens de color y tipografía.
Los tokens de movimiento no son opcionales en 2026. Son la única forma de evitar que el movimiento se desvíe a medida que crece el equipo. Un equipo de tres que lanza animaciones a mano produce un sistema de tres opiniones. La siguiente contratación añade una cuarta. Para la pantalla veinte el producto no tiene una capa de comportamiento coherente.
Principio 6: el movimiento sigue el modelo espacial
Todo producto tiene un mapa implícito. Las pantallas nuevas viven a la derecha. Las vistas de detalle hacen zoom desde una tarjeta. Los overlays descienden desde arriba. Los drawers de navegación vienen del borde de la pantalla donde viven.
El movimiento refuerza el mapa. Una pantalla de detalle que hace zoom desde la tarjeta que el usuario tocó enseña continuidad espacial. La misma pantalla de detalle cayendo desde arriba confunde al usuario porque rompe el mapa implícito.
Cuando los diseñadores se equivocan en esto, casi siempre es porque eligieron la animación de forma aislada en lugar de en el contexto del flujo. La prueba: ¿puedes rastrear cada transición hasta una metáfora espacial consistente? Si no, el movimiento está decorando, no enseñando.
Principio 7: el movimiento tiene presupuesto
Toda animación cuesta CPU, batería y atención. Presupuesta cada una.
El presupuesto de CPU y batería significa animar solo transform y opacity, evitando propiedades que disparan layout como width, height, top, left. Los navegadores modernos manejan transform y opacity en la GPU, que es barato. Animar propiedades de layout fuerza recálculos que hunden el rendimiento en móviles Android de gama media.
El presupuesto de atención significa limitar las animaciones simultáneas. Una sola cosa se mueve a la vez, casi siempre. Dos movimientos ya son muchos, tres son una distracción.
Una página donde cada elemento se anima al hacer scroll no es una página diseñada, es una trampilla para la concentración. El glosario de core web vitals cubre las cifras de rendimiento que la animación disparada por scroll suele arruinar.
Patrones que se ganan su lugar
De las decenas de patrones de movimiento que flotan por Dribbble, una lista corta mejora de verdad el trabajo de producto. El resto es disfraz.
Microinteracciones en inputs
El botón que se comprime 2 píxeles al pulsarse, el toggle que rebota entre estados, el input que se sacude suavemente cuando falla la validación. Son los movimientos más baratos y de mayor impacto de cualquier producto. Responden la pregunta del usuario (¿me escuchó el sistema?) en menos de 150 milisegundos y sin nada de copy.
Todo control principal debería tener una microinteracción. Botones, toggles, inputs, checkboxes, radios, sliders. Si el control no responde visiblemente al toque del usuario, el producto se siente lento aunque el backend sea rápido. El glosario de estado de foco cubre las reglas de accesibilidad que gobiernan estas interacciones.
Revelados escalonados para listas
Una lista de tarjetas que aparece con fade y 50 ms de escalonado entre elementos se lee como intencional. La misma lista apareciendo toda de golpe se lee como abrupta. Escalonar casi siempre vale los pocos cientos de milisegundos extra en el primer render.
El tope son cuatro elementos. Después de cuatro, continúa el escalonado bajo el pliegue y deja que el scroll del usuario dispare el resto. Escalonar veinte elementos en secuencia se siente lento, y el usuario no ve la mayoría de todos modos.
Transiciones de elemento compartido
Una tarjeta que el usuario toca se convierte en la cabecera de la vista de detalle. Una miniatura que se expande hasta una imagen completa. Estas transiciones enseñan el modelo espacial de forma contundente y barata, y son el patrón de movimiento que más impresiona en el trabajo de producto moderno. También tienen costo de ingeniería, por eso la mayoría de los equipos las recorta. Cuando el momento importa (onboarding, flujo clave de conversión, función estrella), paga el costo.
Indicadores de progreso que respetan el tiempo
Barras de progreso que avanzan en tiempo real en operaciones largas. Skeleton screens para datos que tardan más de 300 ms en cargar. Spinners solo para operaciones de menos de 1 segundo donde un skeleton parpadearía. El movimiento de progreso es movimiento de confianza. Le dice al usuario que el sistema está trabajando, que es lo único que le importa mientras espera.
Estados de carga con sentido
Un estado de carga no es la ausencia de diseño, es un diseño por derecho propio. El glosario de divulgación progresiva explica cómo los estados de carga pueden revelar contenido por etapas en lugar de bloquearse en la pieza más lenta.
Fallos de movimiento que vigilar
Toda revisión de movimiento detecta los mismos fallos. Si el producto sale con cualquiera de estos, el sistema de movimiento está socavando el resto del diseño.
Video con autoplay en el hero. Secuestra la atención, hunde el rendimiento y viola las preferencias de movimiento reducido. Reemplázalo con una imagen fija o una reproducción iniciada por el usuario.
Parallax que nadie pidió. El parallax es el equivalente en movimiento a usar el color de marca en el texto del cuerpo. Se ve premium en una captura y se lee como mareo en un dispositivo real.
Rebotes en cada cambio de estado. El movimiento spring es una especia, no un ingrediente. Un producto donde cada botón rebota, cada tarjeta hace spring y cada modal se pasa de largo es un producto que no sabe priorizar. Reserva los springs para los momentos que el usuario debería sentir.
Transiciones que le ganan al servidor. Una transición de pantalla que tarda 500 ms cuando los datos llegan en 200 ms hace que el producto se sienta más lento de lo que es. El movimiento debe igualar o ir a la zaga de la operación real, nunca rellenarla.
Animación de fondo en bucle. Un fondo que se mueve para siempre se lee como una distracción para siempre. Cada vez que el usuario vuelve a mirar, pierde el foco. Haz bucle solo cuando el movimiento sea el punto (un estado, una visualización, un indicador de latido).
El movimiento dentro del sistema
El movimiento pertenece al sistema de diseño junto con el color y la tipografía. Tratarlo como una capa de pulido de última hora es la razón por la que la mayoría de los productos lanzan un movimiento inconsistente. El equipo que es dueño del sistema es dueño de los tokens de movimiento.
El conjunto mínimo de tokens de movimiento:
| Token | Rango de valores | Se usa para |
|---|---|---|
| motion.duration.short | 100 a 150 ms | Feedback en inputs |
| motion.duration.medium | 200 a 300 ms | Cambio de estado, dropdown, tooltip |
| motion.duration.long | 400 a 500 ms | Página, modal, transición grande |
| motion.ease.enter | cubic-bezier(0, 0, 0.2, 1) | Elementos que entran en pantalla |
| motion.ease.exit | cubic-bezier(0.4, 0, 1, 1) | Elementos que salen de pantalla |
| motion.ease.standard | cubic-bezier(0.4, 0, 0.2, 1) | Movimientos dentro de la pantalla |
Ponles nombre, documéntalos, lánzalos como variables en la capa de design tokens. Toda animación nueva del producto usa uno de estos tokens, o hay una razón escrita de por qué no. Esa disciplina es lo que mantiene coherente el movimiento en un equipo de cinco diseñadores y veinte ingenieros.
Cómo revisar un diseño de movimiento
Pasa cada animación por cuatro preguntas antes de lanzarla.
¿Comunica un cambio de estado o guía el ojo? Si no hace ninguna de las dos, córtala.
¿Encaja en la tabla de duraciones? Si es larga, acórtala hasta que se sienta agresiva, y luego retrocede un paso.
¿Usa un token? Si está hecha a mano, se desviará del sistema. Refactorízala a un token o recházala.
¿Pasa prefers-reduced-motion? Activa la opción. Si el movimiento sigue provocando una respuesta vestibular, reconstrúyelo solo con opacidad.
Cuatro preguntas. Cinco minutos por animación. La mayoría de los productos salen sin hacerse ninguna, por eso la mayoría de los productos parecen decorados, no diseñados.
Si quieres un equipo que haga esta revisión al momento del lanzamiento en lugar de disculparse por la deriva del movimiento en una auditoría posterior, contrata a Brainy. Construimos marca, web y UI de producto con el movimiento dentro del sistema desde la primera pantalla.
El movimiento en las condiciones de 2026
Importan tres cambios. El movimiento tiene que sobrevivir a todos.
Las interfaces impulsadas por IA se mueven más que las UIs heredadas. Las respuestas en streaming, las trazas de razonamiento en vivo y las invocaciones dinámicas de herramientas crean un movimiento sutil constante. La regla es hacer predecible el movimiento de la IA y calmado el movimiento del producto. Si todo se anima a la vez, nada se lee como importante.
Las animaciones guiadas por scroll ya son una función del navegador. CSS scroll-timeline permite a los diseñadores animar según la posición del scroll sin JavaScript. Es una palanca nueva, y la mayoría de los equipos la usa mal animando demasiados elementos al hacer scroll. La regla es una animación guiada por scroll por página, normalmente el hero, a veces el CTA.
Las normativas de accesibilidad se endurecen. La European Accessibility Act y leyes similares significan que el movimiento reducido no es un extra, es exigible. Lanzar un producto sin una ruta de movimiento reducido es un riesgo de cumplimiento, no una opinión de diseño. El glosario de wcag cubre las bases que aplican.
FAQ
¿Cuáles son los principios de motion design más importantes?
Propósito antes que pulido, duración ajustada al impacto, easing que transmite emoción, respeto por las preferencias de movimiento, consistencia en todo el producto, conciencia del modelo espacial y un presupuesto estricto de rendimiento y atención. Siete principios en combinación, no uno solo, producen un movimiento que se gana su lugar.
¿Cuánto debería durar una animación de UI?
Entre 100 y 500 milisegundos para casi cualquier interacción de producto. Las animaciones de feedback (hover, pulsación) duran de 100 a 150 ms. Los cambios de estado pequeños, de 150 a 300 ms. Las transiciones de página y modal, de 300 a 500 ms. Cualquier cosa más larga se vuelve un impuesto para los usuarios recurrentes, aunque se sienta cinematográfica en la primera vista.
¿Cuál es la diferencia entre motion design y animación?
El motion design es la capa de comportamiento de un producto, mientras que la animación es la técnica visual usada para producirla. El motion design pregunta qué cambio de estado comunica la animación y por qué hace falta. La animación pregunta cómo se ve el movimiento. El motion design es estrategia, la animación es oficio. El buen trabajo de producto necesita ambos.
¿Debería toda interacción tener animación?
No. Todo control principal (botón, toggle, input) se beneficia de una microinteracción porque el usuario espera feedback al tocar. Los elementos secundarios no. La prueba: corta la animación y mira si el usuario pierde información. Si no, déjala cortada.
¿Qué es prefers-reduced-motion y cómo se maneja?
Es una configuración del sistema operativo que indica que el usuario quiere menos movimiento, normalmente por razones vestibulares o de atención. El manejo correcto no es quitar todo el movimiento, sino cambiar la animación basada en distancia por una basada en opacidad. El cambio de estado se sigue comunicando, y se elimina el detonante vestibular.
¿Cómo se construye un sistema de movimiento?
Empieza con tres duraciones y tres easings como tokens con nombre. Documenta dónde se usa cada uno. Haz cumplir los tokens en la revisión de código. Añade más tokens solo cuando el conjunto existente produzca un movimiento realmente equivocado, nunca para acomodar la preferencia puntual de un diseñador. De tres a cinco tokens por eje suele ser todo lo que un producto necesita.
El movimiento es un oficio, no una función
Los productos con gran movimiento se sienten vivos. Los productos sin él se sienten rígidos. Los productos con demasiado movimiento parecen un demo reel. La distancia entre los tres es pequeña, y el único camino al primero es un sistema con reglas duras y revisiones honestas.
Tira de los siete principios en combinación. Siéntate dentro de la tabla de duraciones. Elige los easings con intención. Lanza una capa de tokens de movimiento junto a los tokens de color y tipografía.
Pasa cada animación por cuatro preguntas antes de lanzarla. El producto resultante no parecerá que lo intentó, parecerá que pensó.
Si quieres un equipo que aplique esta disciplina a marca, web y UI de producto como un solo proyecto, contrata a Brainy. El movimiento como decisión de sistema de primera clase, siempre.
Lecturas relacionadas
- Diseño de jerarquía visual
- Guía de sistemas de diseño
- Lista de verificación de accesibilidad web
- Handoff de diseño de Figma a desarrollo
Want a product that moves with purpose instead of showing off? Brainy ships brand, web, and UI with motion built into the system, not sprinkled on top.
Get Started
