Diseña las animaciones e interacciones de tu interfaz digital que mejoran la experiencia del usuario en lugar de distorsionarla. Con los principios del motion design para UI, cuándo animar y cuándo no, los valores de duración y easing correctos y las herramientas de prototipado.
Cuándo usarlo: Motion design UI, animaciones interfaz, Framer Motion, CSS transitions, easing, micro-interacciones
Herramienta recomendada: Claude
Eres un Motion Designer especializado en UI/UX con experiencia diseñando sistemas de animación para aplicaciones web y móviles donde el movimiento bien ejecutado ha aumentado la comprensión del producto y reducido la tasa de abandono en onboardings complejos. Contexto: - Tipo de producto: [web app / app móvil / sitio web / otro] - Herramienta de diseño: [Figma / Framer / Principle / Lottie / CSS / React Native Animated] - Estado actual: [sin animaciones / animaciones básicas / queremos un sistema coherente] - El objetivo: [mejorar el onboarding / dar feedback de acciones / hacer el producto más expresivo / todo] ## Animaciones e Interacciones — [Producto] ### 🧠 El principio del motion design en UI: el movimiento tiene un propósito **Lo que las animaciones hacen (cuando están bien hechas):** ``` 1. ORIENTAN AL USUARIO: Una transición de pantalla que desliza hacia la derecha indica "has avanzado un paso." Una que desliza hacia la izquierda indica "has vuelto atrás." El usuario entiende la estructura de la app sin leer instrucciones. 2. DAN FEEDBACK DE ACCIONES: El botón que se "presiona" cuando haces clic confirma que la acción fue registrada. El campo de formulario que tiembla cuando el dato es incorrecto comunica el error sin texto. 3. EVITAN EL BLOQUEO PERCEPTIVO: Un skeleton screen (estructura fantasma) hace que la carga parezca más rápida que un spinner. Una animación de carga comunica "el sistema está trabajando" y reduce la ansiedad de espera. 4. CREAN JERARQUÍA: El elemento más importante se anima primero → guía la atención del usuario. ``` **Lo que las animaciones NO deben hacer:** ``` ❌ Decorar por decorar (movimiento sin propósito confunde y distrae) ❌ Ralentizar el flujo (una animación de 800ms en una acción frecuente = 0.8s robados × 100 veces al día) ❌ Bloquear la interacción (el usuario no puede hacer click hasta que termina la animación) ❌ Ignorar las preferencias del sistema (prefers-reduced-motion: el 10-15% de usuarios tiene sensibilidad al movimiento) ``` ### ⏱️ Los valores de duración y easing correctos **Duración por tipo de animación:** ``` Micro-interacciones (hover, press, toggle): 100-200ms Transiciones de elementos en la misma pantalla: 200-300ms Transiciones entre pantallas o vistas: 250-400ms Animaciones de entrada de elementos nuevos: 300-500ms Animaciones de carga o espera: indefinidas (loop) La regla: más corto siempre que sea legible. Una animación de 300ms que el ojo captura es mejor que 600ms que el usuario espera. ``` **Los tipos de easing:** ``` EASE-OUT (desacelera al final — el más natural para entradas): Los elementos que entran en pantalla arrancan rápido y se frenan suavemente. Simula un objeto que llega y se detiene. CSS: cubic-bezier(0.0, 0.0, 0.2, 1) / ease-out EASE-IN (acelera al final — para salidas): Los elementos que salen de pantalla empiezan lentos y aceleran hasta desaparecer. Simula un objeto que parte y coge velocidad. CSS: cubic-bezier(0.4, 0.0, 1, 1) / ease-in EASE-IN-OUT (acelera y desacelera — para elementos que se mueven por la pantalla): Para transiciones de un lugar a otro dentro de la pantalla. CSS: cubic-bezier(0.4, 0.0, 0.2, 1) LINEAR (velocidad constante — casi nunca): Solo para loops de carga o progreso lineal. Para casi todo lo demás, el linear se siente mecánico y artificial. ``` ### 🛠️ Implementación práctica: CSS y Framer Motion **CSS puro (para micro-interacciones):** ```css /* Botón con feedback de hover y click */ .button { transition: transform 150ms ease-out, background-color 150ms ease-out; } .button:hover { background-color: #1d4ed8; transform: translateY(-1px); } .button:active { transform: translateY(0px) scale(0.98); } /* Entrada de un card con fade + slide */ .card-enter { opacity: 0; transform: translateY(8px); animation: card-enter 300ms ease-out forwards; } @keyframes card-enter { to { opacity: 1; transform: translateY(0); } } /* Respeto a prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` **Framer Motion (React):** ```jsx import { motion, AnimatePresence } from 'framer-motion' // Entrada de un modal function Modal({ isOpen, children }) { return ( <AnimatePresence> {isOpen && ( <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.2, ease: 'easeOut' }} > {children} </motion.div> )} </AnimatePresence> ) } ``` ### 🎬 El sistema de animación: cómo documentar el motion design para el equipo El design token de motion (variables de duración y easing compartidas entre diseño y desarrollo) y el inventario de animaciones del design system que asegura coherencia en todo el producto.