Clase magistral de movimiento en Figma: crea animaciones profesionales de UI
Skillademia Academy, Creative Skills for the Future
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Bienvenido al curso y lo que vas a construir.
1:51
-
2.
¿Qué es el movimiento de Figma?
3:33
-
3.
Cómo se ajusta el movimiento al flujo de trabajo de diseño.
5:23
-
4.
Navegación por la interfaz y configuración del archivo de proyecto.
8:14
-
5.
Cómo diseñar los componentes de la interfaz
8:27
-
6.
Organización de capas para animación
3:28
-
7.
Cómo crear tu primera animación
3:41
-
8.
Animación de posición, escala y opacidad
5:10
-
9.
Timing, duración y facilidades
9:46
-
10.
Secuenciación de múltiples elementos
9:06
-
11.
Organización de la línea de tiempo
8:38
-
12.
Animaciones en bucle
8:39
-
13.
Uso de fotogramas clave
8:19
-
14.
Errores comunes en el diseño de movimiento
8:01
-
15.
Exportación como GIF, MP4, WebM y SVG
9:09
-
16.
Animar un círculo de carga
11:34
-
17.
Avanzado: animar una ventana de progreso
23:39
-
18.
Proyecto de clase: crea tu propia interfaz de usuario animada.
1:29
-
19.
¡Felicidades!¿Qué sigue?
1:19
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
--
Estudiantes
--
Proyectos
Acerca de esta clase
Un gran diseño de interfaz no solo se trata de cómo se ve un producto, sino también de cómo se mueve.
Un movimiento reflexivo puede guiar la atención, comunicar cambios, proporcionar comentarios y hacer que los productos digitales parezcan más pulidos e intuitivos. En esta clase, aprenderás a dar vida a diseños de interfaces estáticas utilizando Figma Motion y a desarrollar habilidades prácticas de animación específicamente para el diseño de UI y UX.
Comenzaremos explorando qué es el movimiento Figma y dónde encaja el movimiento en un flujo de trabajo de diseño profesional. Aprenderás a navegar por la interfaz, a configurar tu proyecto correctamente y a preparar los componentes y las capas de la interfaz de usuario antes de empezar a animar.
A partir de ahí, crearás tu primera animación y aprenderás los principios básicos detrás del movimiento de la interfaz. Trabajaremos con la posición, la escala y la opacidad antes de sumergirnos en el tiempo, la duración y la facilitación, los detalles que pueden marcar la diferencia entre una animación que se siente mecánica y una que se siente fluida e intencional.
A medida que se desarrollen tus habilidades, aprenderás a secuenciar múltiples elementos, organizar animaciones más complejas en la línea de tiempo, crear bucles y trabajar con fotogramas clave para un mayor control sobre tu movimiento. También vamos a ver errores comunes en el diseño de movimiento y hablar de cómo evitar animaciones que distraigan, sean inconsistentes o innecesariamente complicadas.
Luego aprenderás a exportar tus animaciones a formatos prácticos, incluidos GIF, MP4, WebM y SVG, lo que te permitirá usar tu trabajo en prototipos, portafolios, presentaciones, sitios web y otros proyectos.
Por último, abordaremos ejemplos más avanzados, como un círculo de carga animado y una ventana de progreso, antes de aplicar todo lo que has aprendido a tu propio proyecto de interfaz de usuario animada.
Al final de esta clase, comprenderás tanto el flujo de trabajo técnico como los principios de diseño detrás del movimiento de la interfaz de usuario efectivo, lo que te brindará las habilidades de convertir interfaces estáticas en experiencias pulidas y atractivas.
Qué aprenderás
- Comprender el movimiento Figma y su papel en el diseño UI/UX
- Incorporar movimiento a un flujo de trabajo de diseño profesional.
- Configuración correcta de los archivos del proyecto de Figma Motion
- Preparación de componentes de interfaz para animación
- Cómo organizar capas para obtener una animación eficiente
- Creación de tu primera animación de interfaz de usuario
- Animar posición, escala y opacidad
- Controlar el tiempo y la duración de la animación.
- ¿Usar la facilidad para crear un movimiento más natural?
- Secuenciación de múltiples elementos animados.
- Cómo organizar animaciones complejas en la línea de tiempo
- Creación de animaciones en bucle
- Trabajar con fotogramas clave
- Identificar y evitar errores comunes en el diseño de movimiento
- Exportar animaciones en formato GIF, MP4, WebM y SVG.
- Creación de indicadores de carga animados.
- Cómo crear animaciones de progreso más avanzadas
- Diseñas y animas tu propia experiencia de interfaz de usuario.
Requisitos
- Conocimiento básico con Figma
- Una cuenta de Figma
- Acceso a las herramientas utilizadas para Figma Motion en la clase.
- Una computadora con conexión a Internet
- No se requiere experiencia previa en diseño de movimiento o animación.
A QUIÉN ESTÁ DIRIGIDA LA CLASE
- Diseñadores de UI y UX que quieran agregar movimiento a su conjunto de habilidades
- Los usuarios de Figma están listos para ir más allá del diseño de interfaz estática
- Diseñadores de productos interesados en experiencias interactivas.
- Diseñadores web y de aplicaciones
- Diseñadores de motion principiantes interesados en la animación de la interfaz de usuario.
- Los diseñadores freelance que buscan ampliar sus servicios.
- Los diseñadores que quieran crear proyectos de portafolio más atractivos.
Conoce a tu profesor(a)
NEW CLASS: Figma Motion Masterclass: Create Professional UI Animations
A great interface shouldn't just look good. It should feel good to use.
Our new Figma Motion class is all about taking your static UI designs and bringing them to life with purposeful, professional animation.
You'll learn how to animate position, scale, and opacity, work with timing and easing, sequence multiple elements, use keyframes, build loops, and organize your animation timeline.
We'll also create practical UI animations like loading indicators and progress states before you design and animate an interface of your own.
If you already use Figma and want to add motion design to your UI/UX skill set, this class gives y... Ver perfil completo
Proyecto de clase práctica
Crea tu propia interfaz de usuario animada con las técnicas de movimiento que se tratan en toda la clase.
Puedes crear una pantalla de aplicación móvil, una sección de sitio web, un componente de panel de control, una experiencia de incorporación, un estado de carga u otra interfaz de tu elección.
Harás lo siguiente:
- Diseña o selecciona la interfaz que quieres animar.
- Prepara y organiza tus capas
- Animarás propiedades como la posición, la escala y la opacidad
- Aplica el tiempo y la relajación adecuados
- Utiliza fotogramas clave para controlar tu animación.
- Secuencia múltiples elementos cuando sea necesario.
- Perfecciona tu movimiento para que se sienta suave y deliberado.
- Exporta tu animación terminada
El objetivo no es crear la animación más complicada posible. En cambio, enfócate en usar el movimiento con un propósito y crear una experiencia que se sienta natural y que apoye la interfaz.
Sube tu animación terminada a la galería de proyectos como video apoyado, GIF o presentación de tu resultado final. También puedes incluir una breve explicación de tu diseño y de las decisiones que tomaste sobre el movimiento.
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
