Presentando Figma Motion: Tu lienzo ahora tiene una línea de tiempo
Ahora Motion vive en el lienzo —en el mismo archivo que tus componentes, variables y equipo—, para que tus diseños cobren vida desde el primer día.
Compartir Presentando Figma Motion: Tu lienzo ahora tiene una línea de tiempo
Instantánea del cliente: Atlassian
Para Atlassian, el movimiento en el lienzo ha eliminado la fricción que puede impedir que se envíe. “Convierte las ilustraciones animadas de una transferencia especializada en una capacidad del sistema,” dice la diseñadora senior de productos Alexandra Pereira. “Dev Mode y poder comentar en la línea de tiempo permitirá un ida y vuelta sin problemas.”
Para los diseñadores menos familiarizados con el movimiento, el agente los guía a través de los conceptos básicos. “Cuando estaba animando un banner, le pedí al agente que me sugiriera qué estaba funcionando y qué no”, dice el Diseñador de Producto Principal Davy Fung. Esto ayuda a desmitificar el movimiento para todos, dice el Diseñador Principal de Movimiento Maxwell Hathaway: “La gente puede ver cómo se mueven las cosas rápidamente, y ese acceso les ayudará a desarrollar el gusto más rápido.”
Cuando se hace bien When you’re designing motion, you’re designing with time. Understanding the mechanics turns movement into meaning.Principles in motion
A partir de hoy, el movimiento es nativo en el mismo lienzo donde vive el resto de tus diseños. Motion ya no es un cuello de botella o el trabajo de una sola persona. Cualquier diseñador ahora puede solicitar al agente de Figma que construya movimiento directamente en la nueva línea de tiempo de animación, reduciendo la barrera creativa mientras se eleva el techo de lo que es posible. Y con el acceso a Dev Mode y la funcionalidad, toda la experiencia está diseñada para una entrega mucho más fluida.
Diseña y anima en el mismo archivo
Los estilos de animación personalizados están por llegar, así que pronto podrás crear y guardar los tuyos propios.
Sentado junto a los modos Design, Draw y Dev Mode, Motion es la capa más nueva de una experiencia conectada en el lienzo. Cambia cualquier marco a modo Motion, y la línea de tiempo aparece junto a tu diseño.
- Control de la línea de tiempo: Arrastra las capas para ajustar el tiempo; mueve el control deslizante para la vista previa de cualquier momento; y ajusta de manera independiente la posición, escala, rotación y opacidad con fotogramas clave. Activa el auto-fotograma para registrar cada cambio que hagas mientras el cabezal de reproducción está en movimiento. Y con comentarios basados en el tiempo en el lienzo, cualquiera puede señalar un momento específico en la animación, involucrando a todo el equipo en las revisiones de movimiento.
- Estilos de animación: añade estilos de animación predefinidos—desvanecer, mover, escalar—para la forma más rápida de entrar y luego continúa refinando en el lienzo. Puedes apilar estilos de animación en la línea de tiempo para reproducirlos al mismo tiempo, o arrastrarlos para secuenciarlos.
El diseño atómico ahora es un diseño de movimiento atómico porque tengo fotogramas clave en el lienzo. Es la última gran pieza en el mundo interactivo.
Instantánea del cliente: Adanna Onuekwusi
Para la diseñadora de productos e ilustradora Adanna Onuekwusi, el movimiento siempre ha sido una forma de aportar alegría y emoción a su trabajo. Pero moverse entre herramientas externas, complementos basados en navegador y Figma para animar una sola ilustración significaba un cambio constante de contexto. Tener movimiento directamente en el lienzo cambia eso. “Tener todo en un solo espacio es realmente útil”, dice ella. “Puedo sistematizar el proceso de movimiento y publicarlo como una biblioteca, de modo que extienda el trabajo de algo que una persona hace a algo de lo que otras personas pueden beneficiarse.”
Crea un sistema de movimiento para todos tus archivos
Un buen movimiento no es una colección de animaciones únicas. Es un conjunto de valores definidos una vez y aplicados en todas partes. Sin embargo, la mayoría de los equipos nunca han tenido un lugar para crear ese sistema, por lo que el movimiento se reconstruye desde cero cada sprint, y lo que se lanza refleja a quien tuvo tiempo, no lo que fue diseñado.
- Componentes animados: Los componentes son la unidad fundamental de un sistema de diseño. Ahora también llevan movimiento. Una vez que creas una animación para un componente, esta viaja con ese componente a través de cada pantalla y archivo del colaborador, de la misma manera que lo hacen el relleno y la tipografía.
- Variables de movimiento: las variables de movimiento te permiten personalizar esa animación. Crea una variable de aceleración, define múltiples modos para esa variable y aplícala a tus animaciones. Cambia el modo a nivel de página, y cada animación que haga referencia a esa variable se actualiza de inmediato.
Si es algo con lo que interactúas a diario, el software debería hacerte sentir algo. El movimiento es otro camino para darle vida a eso.
Efectos de sombreado y movimiento
Cada propiedad que un shader expone ahora puede tener fotogramas clave en la línea de tiempo de movimiento. Tradicionalmente, las propiedades animables de Figma eran limitadas. Los shaders cambian eso: cualquier cosa que puedas controlar con un deslizador o un campo de entrada, ahora puedes animarla con fotogramas clave a lo largo del tiempo.
Transformaciones 3D próximamente
El movimiento y las transformaciones 3D son parte de la misma decisión de diseño. Cuando piensas en cómo se mueve algo, estás pensando en dónde vive en el espacio.
Con transformaciones 3D, podrás rotar marcos, vectores y texto en el eje z con controles nativos y una vista previa en vivo mientras arrastras. Cada transformación permanece completamente editable. El resultado se exporta a CSS y se conecta a través de MCP, por lo que el diseño espacial que construyes es el diseño espacial que está en el código. Combina transformación 3D con movimiento en el mismo archivo y podrás prototipar interacciones espaciales que antes no eran posibles en Figma.
Avanza con el agente de Figma
El Motion es técnicamente exigente. Para un diseñador que no ha animado antes, el agente de Figma Starting today, work with an agent that is built for Figma—directly on the canvas.The Figma design agent is here
Para un diseñador que ya anima, maneja el trabajo repetitivo para que puedas centrarte en la transición del trabajo y ajustar los detalles. Ajusta la curva de aceleración o el tiempo, añade una propiedad, o desmóntala y replantea. Puedes ejecutar varios comandos al mismo tiempo, para que puedas mantener tu flujo mientras el agente maneja varios marcos.
Poder generar dentro de los límites es realmente importante para los sistemas de empresa. Permite consistencia, accesibilidad y calidad de implementación tanto como velocidad.
Envía el movimiento que has diseñado
Motion en producción raramente coincide exactamente con lo que se diseñó. Detalles que tomaron horas de ajuste, como la facilitación y el tiempo, se pierden en la traducción entre el archivo y el código. Figma cierra esa brecha incluso antes de que llegues a la entrega. Selecciona cualquier marco animado y exporta un MP4, GIF, SVG o WEBM directamente desde el archivo, para que puedas obtener una alineación temprana y entradas.
Cuando el archivo esté listo para el desarrollo, cambia a Dev Mode y abre la pestaña de Motion. La línea de tiempo completa es visible e inspeccionable. Cada valor de tiempo, curva de aceleración y fotograma clave es legible sin necesidad de interpretación por parte del desarrollador. Pueden copiar el código de animación directamente del panel en CSS, JSON o React y motion.dev listos para el framework.
Motion también es compatible con MCP Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.
The TL;DR on MCP: Why context matters and how to put it to work
Si un compañero puede inspeccionar y traducir fácilmente el movimiento con los formatos que necesitamos, se reduce la brecha entre la intención y el envío.
La animación ya no es un paso final o un riesgo de alcance. El Motion ahora se mueve a través del proceso de diseño de la misma manera que todo lo demás: desde el primer marco hasta la construcción final, en un solo lugar.
Motion está en beta abierta. Los usuarios iniciales pueden acceder a motion con exportaciones limitadas. Los usuarios de puesto Full en todos los planes pueden acceder a las primitivas de motion y exportar. La integración completa del sistema de diseño y el agente de Figma para motion están disponibles en planes de pago.
Aprende los principios del diseño de movimiento efectivo y obtén práctica creando animaciones en Figma Motion. Prueba el movimiento por ti mismo en nuestro archivo de área de pruebas o comienza en el centro de ayuda. Regístrate aquí para unirte a la lista de espera para las transformaciones en 3D.
Lee el resumen del Config de Dylan Field, CEO y cofundador de Figma.
