Casi ningún diseñador sabe que Figma Motion convierte la animación en un token reutilizable del sistema
Anima un componente una sola vez y ese movimiento viaja a cada instancia, cada pantalla y el archivo de cada compañero—igual que ya lo hacen el color y la tipografía.
01. Qué Es
Figma Motion, lanzado el 24 de junio de 2026 en Config 2026 en beta abierta, es un nuevo modo dentro de Figma dedicado a construir animación directamente en tus componentes. En lugar de tratar la animación como un efecto único que rehaces en cada prototipo, Motion te permite adjuntar movimiento a un componente para que se comporte como cualquier otra propiedad de tu sistema de diseño.
Lo sorprendente es lo que pasa después. Una vez que defines una animación para un componente, ese movimiento viaja con él a todas partes—por cada pantalla, cada archivo y el espacio de trabajo de cada colaborador—exactamente como se propaga hoy un color de relleno o un estilo de tipografía. Actualiza el movimiento en un solo lugar y se actualiza en todos. La animación deja de ser un montón disperso de interacciones de prototipo y se convierte en una primitiva compartida, un token en el que todo tu equipo puede confiar.
Construyes animaciones en modo Motion usando una línea de tiempo que registra fotogramas clave de posición, escala, rotación y opacidad, con auto-keyframe que graba los cambios mientras arrastras el cabezal de reproducción. Las variables de movimiento te permiten definir el easing como una variable reutilizable con múltiples modos y aplicarla de forma consistente en tus animaciones. Al terminar, puedes exportar a MP4, GIF, WEBM o SVG animado, o entregar código real en Dev Mode como CSS, JSON o React.
Por Qué Importa
Los sistemas de diseño ya daban a los equipos una única fuente de verdad para color, espaciado y tipografía—pero el movimiento siempre vivía fuera de ese sistema, reconstruido a mano en cada prototipo. Figma Motion cierra esa brecha. Una sola definición de animación ahora se propaga automáticamente a cientos de instancias, ahorrando horas de trabajo repetitivo y eliminando la inconsistencia donde el mismo botón se anima de tres formas distintas en tres pantallas. También significa que los desarrolladores reciben código de movimiento consistente y exportable en lugar de descripciones vagas después de los hechos.
Quién Puede Beneficiarse
- Diseñadores de producto que mantienen sistemas de diseño grandes y multipantalla
- Equipos de sistemas de diseño que quieren que el movimiento esté tan gobernado como el color y la tipografía
- Diseñadores de movimiento cansados de reconstruir la misma animación en cada archivo
- Desarrolladores que necesitan especificaciones de movimiento consistentes en CSS, JSON o React
- Agencias y equipos que colaboran en archivos compartidos de Figma
02. Guía Paso a Paso
- 1
Abre un frame que puedas editar
Motion funciona en cualquier frame donde tengas acceso de 'edición' al archivo. Crear y editar movimiento requiere acceso de edición, así que asegúrate de no ser solo un espectador.
- 2
Cambia el interruptor de la barra a modo Motion
En tu frame, cambia el interruptor de la barra de herramientas de Design a Motion. Esto revela la línea de tiempo y los controles de animación para trabajar con fotogramas clave.
- 3
Anima con la línea de tiempo
Usa la línea de tiempo para colocar fotogramas clave de posición, escala, rotación y opacidad. Mueve el cabezal de reproducción y deja que auto-keyframe grabe tus cambios sobre la marcha. Elige entre los estilos Fade, Rotate, Scale o Resize (los estilos personalizados llegarán pronto).
- 4
Define variables de movimiento para consistencia
Crea una variable de easing, dale múltiples modos si lo necesitas y aplícala en tus animaciones para que todo comparta la misma sensación—tu equivalente de movimiento a un token de color.
- 5
Vuelve a modo Design para crear el componente
Los componentes se crean solo en modo Design. Después de construir tu animación en modo Motion, regresa a Design y convierte tu elemento animado en componente para que el movimiento viaje con cada instancia.
- 6
Exporta o entrega
Exporta las animaciones terminadas como MP4, GIF, WEBM o SVG animado. Para desarrolladores, abre Dev Mode y exporta el movimiento como código CSS, JSON o React.
Consejos Pro
- Usa variables de movimiento para el easing igual que usas variables de color—define una vez, aplica en todos lados y cambia la sensación de todo tu sistema con una sola edición.
- Auto-keyframe es más rápido que colocar fotogramas manualmente: solo mueve el cabezal y arrastra tu elemento para grabar el cambio.
- En Dev Mode, toma la exportación de React o CSS para darle a los desarrolladores especificaciones exactas de movimiento en vez de describir las animaciones con palabras.
- El agente de Figma puede generar movimiento por ti en beta, y editar manualmente lo que el agente crea nunca consume créditos.
Advertencias y Limitaciones
- Figma Motion está en beta abierta y disponible en todos los planes excepto los planes Figma for Government.
- Publicar componentes animados, generar animaciones con el agente de Figma y las exportaciones de video en alta resolución requieren un asiento Full en un plan de pago.
- Los estilos de animación personalizados más allá de Fade, Rotate, Scale y Resize aún no están disponibles—llegarán pronto.
- La exportación a Lottie aún no está disponible; los formatos actuales son MP4, GIF, WEBM y SVG animado.
- El agente de Figma para movimiento no usa créditos de IA durante la beta, pero consumirá el uso estándar de créditos de IA una vez que esté disponible de forma general.
Trucos Relacionados
Casi ningún diseñador sabe que el Agente de IA de Figma puede crear varias versiones de UI a la vez
En lugar de diseñar cada variante a mano, el nuevo Agente de IA de Figma puede generar varias direcciones de estilo en paralelo y alinearlas lado a lado en el mismo archivo para compararlas al instante.
Casi Ningún Equipo de Figma Sabe Que Puede Enseñarle Sus Propias Reglas al Agente de Diseño
El Agente de Diseño de Figma ahora puede aprender las convenciones de tu equipo como Skills reutilizables, aplicando tus escalas de espaciado, reglas de nombres y estándares de componentes automáticamente en vez de que se los expliques cada vez.
Casi Ningún Desarrollador Sabe que Claude Code Puede Enviar una Interfaz en Vivo Directo a Figma
Construye una interfaz en código, escribe una sola frase y mírala aparecer en Figma como capas editables nativas: sin capturas de pantalla ni copiar y pegar.