Animación en tu Portfolio de Diseño

Mostrar tus Habilidades de Motion Design

Tu portfolio como motion designer o diseñador UI que sabe animar es tu mejor herramienta para conseguir trabajo. Aquí aprenderás qué incluir, cómo presentar tu trabajo de animación y cómo crear case studies que demuestren tu pensamiento de diseño, no solo tu habilidad técnica.

Qué incluir en tu portfolio de motion

• 3-5 proyectos de case study donde la animación mejoró la experiencia del usuario de forma medible


• Antes/después: muestra la versión sin animación y con animación lado a lado — el contraste es poderoso


• Videos cortos (15-30 segundos) de tus animaciones en acción — GIFs para previews rápidos


• Especificaciones: documenta timing, easing curves y decisiones de diseño — muestra que piensas, no solo ejecutas


• Proyectos personales: si no tienes proyectos profesionales, anima rediseños de apps populares (Spotify, Uber, etc.)

Herramientas para grabar y presentar animaciones

• Loom: graba tu pantalla con narración explicando las decisiones de diseño mientras muestras la animación


• Kap (Mac): graba GIFs y videos de tu pantalla con alta calidad — ideal para clips cortos de portfolio


• Rotato: crea mockups 3D de dispositivos con tu diseño — tus animaciones se ven más profesionales en contexto


• Figma Prototype Recording: graba tus prototipos de Figma directamente para incluir en el portfolio


• Dribbble/Behance: plataformas donde la comunidad de diseño comparte trabajo — publica tus mejores animaciones

Structure de un case study de motion design

• Contexto: ¿qué producto era? ¿Cuál era el problema de UX que la animación debía resolver?


• Exploración: muestra 2-3 opciones de animación que probaste y por qué elegiste la ganadora


• Solución final: video de la animación implementada con especificaciones técnicas


• Impacto: si tienes métricas, inclúyelas — 'Las micro-interacciones mejoraron la tasa de completar onboarding un 15%'


• Aprendizajes: qué descubriste durante el proceso — muestra que reflexionas sobre tu trabajo

Consejos para buscar trabajo como motion designer UI

• Las empresas tech buscan: diseñadores UI que sepan implementar animaciones, no solo diseñarlas en Figma


• Diferénciate: saber CSS transitions + Framer Motion + principios de animación te pone por encima del 90% de candidatos


• Contribuye a design systems: proponer y documentar las guidelines de motion de un sistema es un proyecto de alto valor


• Estudia los design systems de referencia: Material Design Motion, Apple HIG Motion, IBM Carbon Motion


• Practica diariamente: toma un componente de UI y animalo de 3 formas diferentes — velocidad, estilo, personalidad

Consejo: No necesitas After Effects para empezar. CSS + Figma prototipos + Framer Motion es suficiente para un portfolio impresionante como diseñador UI con habilidades de motion design.