Diseño de animación con Figma: Animaciones, gráficos en movimiento, UX/UI

Únete a nuestro curso de diseño de animación para adquirir la experiencia que te diferenciará de otros diseñadores, aumentará tu reconocimiento como un creador de élite y te permitirá cobrar tarifas premium por tus habilidades.

No estamos sugiriendo que compitas por ofertas de $5/hora diseñando logotipos en varias plataformas de freelance.

Después de completar este curso, podrás cobrar al menos 10-20 veces esa tarifa.

Aprenderás diseño de animación en una comunidad vibrante.

Al inscribirte hoy, tendrás acceso a nuestra exclusiva aula comunitaria en línea en vivo, donde colaborarás con miles de compañeros estudiantes, exalumnos, mentores, asistentes de enseñanza e instructores.

Aprenderás de Daniel, un profesional del diseño con experiencia práctica como diseñador de productos líder para las principales empresas globales.

Este curso te armará con las últimas metodologías en diseño de animación, interfaz de usuario (UI) y experiencia de usuario (UX), enfatizando habilidades prácticas para crear interacciones sorprendentes, animaciones y gráficos en movimiento para tus proyectos de web y aplicaciones móviles.

Utilizaremos Figma y Figma Smart Animate, las herramientas preferidas por los diseñadores modernos, ya que están reemplazando opciones obsoletas como Adobe After Effects.

Además, recibirás todos los archivos de Figma, plantillas de diseño premium y recursos de este curso para usar en tus futuros proyectos de clientes.

Esto es lo que aprenderás para transformarte en un Experto en Diseño de Animación

Este currículo es práctico. Daniel te guiará paso a paso de cero a héroe en diseño de animación, permitiéndote crear tus propios proyectos deslumbrantes y profesionales.

1. Comenzando con Figma - Descubre los componentes esenciales de Figma y lo que necesitas para comenzar tu viaje. Cubriremos cada detalle para eliminar cualquier confusión.

• Comenzando con Figma
• Introducción a Figma
• Tablero de Figma
• Herramientas de Figma
• Capas + Páginas
• Funciones de la barra superior
• Propiedades de diseño
• Prototipado en Figma
• Ejercicio: Construyendo un Diseño Responsivo

2. Fundamentos de Figma Smart Animate - Figma's Smart Animate es revolucionario. Aprenderás a ajustar sus diversas propiedades y aplicar ese entendimiento para crear prototipos simples.

• Escala
• Posición
• Opacidad
• Rotación
• Relleno
• Ejercicio: Creando Elementos Interactivos
• Ejercicio: Navegando la Animación
• Ejercicio: Desarrollando un Prototipo Más Grande

3. Crear una App de Inspiración Fotográfica - Empezarás tu primer proyecto utilizando los recursos proporcionados y los conceptos aprendidos para desarrollar tu prototipo de una app móvil de inspiración fotográfica.

• Diseñando Activos
• Filtrado por Categorías
• Transiciones de Pantalla + Interactividad de Arrastre
• Microinteracciones Simples

4. Importancia del Movimiento - Aprende cómo el movimiento mejora significativamente la usabilidad del producto, cuenta historias y apoya los modelos mentales.

• Malentendidos Comunes del Diseño de Animación
• El Papel del Movimiento en la Usabilidad
• Modelos Narrativos y Mentales

5. Principios del Diseño de Animación - Esta sección cubre los principios fundamentales del diseño de animación y su importancia crítica para alcanzar el éxito en el diseño.

• Introducción a los Principios del Diseño de Animación
• Técnicas de Easing
• Desplazamiento & Retraso
• Elementos de Parenting
• Técnicas de Transformación
• Cambios de Valor
• Técnicas de Enmascarado
• Efectos de Superposición
• Métodos de Clonación
• Técnicas de Obscurecimiento
• Efectos de Parallax
• Técnicas Dimensionales
• Efectos de Dolly & Zoom

6. Creación de Animaciones en Figma - Combina teoría con práctica mientras te sumerges de nuevo en Figma para diseñar prototipos más pequeños. Daniel te guiará en cada paso.

• Ejercicio: Transiciones Suaves de Navegación
• Ejercicio: Efectos de Desplazamiento
• Ejercicio: Mecánicas de Paginación
• Ejercicio: Acciones de Arrastre
• Ejercicio: Creación de Microinteracciones
• Ejercicio: Efectos Deliciosos

7. Flujo de Trabajo del Diseño de Animación - Aprende cómo incorporar el diseño de animación en el proceso típico de diseño. Daniel delineará su enfoque para identificar estrategias óptimas de animación para los requisitos del usuario.

• Descubrimiento & Investigación Parte 1
• Descubrimiento & Investigación Parte 2
• Fundamentos del Diseño & Storyboarding
• Técnicas de Prototipado
• Protocolos de Pruebas
• Consejos Útiles

8. Proyecto: Carousel de National Geographic - Explora cómo crear efectos de carrusel tanto simples como complejos en Figma.

• Carrusel de Página de Aterrizaje Rápido y Fácil
• Construyendo un Efecto de Imagen Complejo de Parallax y 3D

9. El Arte de las Microinteracciones - Profundiza en la importancia de las microinteracciones. Crea tu propia animación en Figma con Daniel utilizando el plugin Figmotion.

• Entendiendo las Microinteracciones
• La Importancia de las Microinteracciones
• Figmotion: Parte 1
• Figmotion: Parte 2

10. Proyecto: App Móvil de Smart Home - A medida que la tecnología de hogar inteligente crece en popularidad, aprende a diseñar una pantalla de inicio básica y animarla con Figma. Sigue a Daniel mientras ilustra una compleja interacción de ajuste de temperatura.

• Diseñando la Pantalla de Inicio
• Creando Interacciones de Palanca
• Técnicas de Ajuste de Temperatura

11. Retroalimentación Efectiva - Entiende las mejores estrategias para proporcionar y recibir retroalimentación constructiva en tus diseños.

• La Importancia de la Retroalimentación de Diseño
• Ofrecer Retroalimentación Constructiva de Diseño

12. Proyecto: Página de Aterrizaje de Renovación del Hogar - ¿Has querido diseñar una página de aterrizaje atractiva con elementos animados? Aquí tienes tu oportunidad. Únete a Daniel mientras te guía a través de la deconstrucción de una página de aterrizaje en múltiples prototipos.

• Diseño de Página de Aterrizaje
• Prototipado de Página de Aterrizaje
• Efectos de Parallax: Parte 1
• Diseño de Carrusel
• Efectos de Parallax: Parte 2
• Diseño de Galería

13. Proyecto: Formulario de Renovación del Hogar - Los formularios son a menudo pasados por alto, pero aplicar movimiento puede ayudar en gran medida a los usuarios con tareas esenciales. Daniel te mostrará cómo incorporar animaciones sutiles en las interacciones de formularios para una mayor usabilidad.

• Incorporando Movimiento en Elementos de Formulario
• Dinámica del Progreso del Formulario
• Animando el Contenido del Formulario
• Entradas & Botones: Parte 1
• Entradas & Botones: Parte 2
• Entradas & Botones: Parte 3
• Entradas & Botones: Parte 4
• Mejorando con Tooltips
• Entradas de Carrusel

14. Proyecto: App Móvil de Entrega de Comida - Domina cómo crear interacciones llamativas utilizando técnicas de enmascarado, seguido de la creación de un prototipo complejo de progreso de pedido mientras Daniel te guía.

• Introducción al Proyecto
• Usando Parallax para la Atención
• Transiciones en Listas
• Técnicas de Superposición Alternativas
• Enmascarado y Técnicas de Superposición
• Microinteracciones y Botones de Acción Flotantes
• Progreso de Pedido: Parte 1
• Progreso de Pedido: Parte 2

15. Presentando tu Trabajo - Has desarrollado varios prototipos, pero ¿cómo los presentas en tu portafolio? Exploraremos varias opciones de grabación tanto para Mac como para Windows para que puedas mostrar tus prototipos en el formato que prefieras.

• Usando Kap para Mac
• Guías de Uso de Kap
• Integrando GIFs de Kap en Figma
• Screenity para Chrome & Windows
• Guías de Uso de Screenity
• Integrando GIFs de Screenity en Figma

¿Cuál es la conclusión final?

Este curso no se trata solo de ver videos tutoriales de manera pasiva.

Te animaremos a transformarte de un completo novato en diseño de animación a alguien considerado entre el top 10% de los Diseñadores de Animación 💪.

¿Cómo podemos estar tan seguros?

Miles de graduados de Zero To Mastery han conseguido trabajos en líderes de la industria como Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify y más.

Están prosperando como freelancers top y disfrutando de oportunidades remotas en todo el mundo.

Independientemente de tu edad, experiencia o antecedentes, muchos de nuestros estudiantes comenzaron como completos principiantes.

Tú también puedes ser uno de ellos.

No hay nada que perder; comienza a aprender hoy, y si nuestro curso no cumple con tus expectativas, puedes solicitar un reembolso completo dentro de los 30 días. No hay complicaciones, no hay preguntas.