Saltar al contenido principal

Figma Motion

Crea animaciones precisas y listas para producción directamente en el lienzo.

ComenzarPrueba Figma Motion

Movimiento en tu espacio de diseño.

Ya sea que tengas curiosidad por el movimiento o seas experto en suavizado, es fácil estirar, rebotar y aplastar tus diseños.

  • Una persona usa el agente de IA de Figma para indicar una animación para una app de actividades al aire libre. El cuadro de indicación le pide al agente que cree una animación de tipo glitch que escalone las formas.Una persona usa el agente de IA de Figma para indicar una animación para una app de actividades al aire libre. El cuadro de indicación le pide al agente que cree una animación de tipo glitch que escalone las formas.

    Movimiento perfecto en una indicación

    Crea animaciones de nivel profesional utilizando el agente de Figma. Úsalo para movimientos repetidos o narrativas complejas.

  • Se muestra una tarjeta de portada animada para una aplicación de actividades al aire libre junto con la línea de tiempo y los fotogramas clave que la hacen moverse en Figma.Se muestra una tarjeta de portada animada para una aplicación de actividades al aire libre junto con la línea de tiempo y los fotogramas clave que la hacen moverse en Figma.

    Controla cada fotograma clave

    Tienes control total sobre la línea de tiempo. Ajusta cada fotograma y propiedad exactamente como quieras y luego invita a tu equipo a dar forma a la animación final.

Creatividad expansiva. Control preciso.

Aporta claridad y expresión a tu trabajo. Anima estados de carga, interacciones al pasar el cursor, estilos de logotipo y mucho más. El límite es la línea de tiempo.

  • Crea rápido con estilos predefinidos

    Los estilos de animación vienen incluidos, como Desvanecer, Rotar, Escalar, Cambiar de tamaño y mucho más. Combina estilos para hacer realidad tu visión. Próximamente: estilos personalizados.Próximamente: estilos personalizados.

    Explora estilos predefinidos

  • Ajusta el tiempo automáticamente

    Usa autokey para rastrear y grabar tus movimientos, luego personaliza cada fotograma clave con curvas de Bézier y resortes.

    Acerca de los fotogramas clave
  • Tres imágenes planas de una estructura con cúpula naranja, una estructura con cúpula blanca y una chaqueta acolchada se convierten en una pila de objetos 3D.Tres imágenes planas de una estructura con cúpula naranja, una estructura con cúpula blanca y una chaqueta acolchada se convierten en una pila de objetos 3D.

    Entra a una nueva dimensión

    Las transformaciones 3D les dan profundidad a tus diseños e imágenes. Combínalas con movimiento para que los objetos se muevan como lo hacen en el mundo real.Próximamente.

    Únete a la lista de espera

  • Suaviza todas las transiciones

    Cada transición de pantalla a pantalla ahora tiene una línea de tiempo completa, y puedes ajustar el tiempo de cada elemento. Próximamente.

Crea sistemas una vez. Aplícalos en todas partes.

Los sistemas de movimiento permiten que todo tu equipo agregue rápidamente recursos de movimiento alineados con la marca en cualquier lugar.

  • Reutiliza componentes en todos los recursos

    Sistematiza los movimientos comunes: no hace falta crear desde cero cada vez. Crea modos y componentes que funcionen dondequiera que se apliquen.

    Explora sistemas

  • Intercambia variables para ahorrar tiempo

    Alterna entre diferentes valores de movimiento rápidamente con variables y tokens.

    Cómo aplicar variables

Envía animación directamente a código.

Todas tus animaciones están respaldadas por código real, listo para producción y exportable directamente desde Figma.

  • Se muestra un mapa animado de un museo junto al código que lo respalda.Se muestra un mapa animado de un museo junto al código que lo respalda.

    Traspasos a desarrollo sin inconvenientes

    Los desarrolladores pueden inspeccionar toda la línea de tiempo de movimiento en Dev Mode y luego copiar el código de animación directamente en CSS, JSON o React.

    Cómo traspasar código
  • Un cuadro emergente muestra un archivo de animación que se está moviendo a un agente de programación con IA.Un cuadro emergente muestra un archivo de animación que se está moviendo a un agente de programación con IA.

    Da contexto de movimiento completo a los agentes de IA

    Envía código de animación a tus herramientas de codificación agénticas a través del servidor MCP de Figma. Preserva todos tus valores, como el suavizado y el tiempo.

    Obtén la guía
  • Una animación de una silla futurista plateada y una lámpara futurista plateada se exporta como archivo MP4.Una animación de una silla futurista plateada y una lámpara futurista plateada se exporta como archivo MP4.

    Exporta directamente desde Figma

    Comparte el movimiento con todos. Convierte cualquier marco animado en un archivo MP4, GIF, SVG o WebM.

    Cómo exportar archivos