Presentamos Figma Motion: Tu lienzo ahora tiene una línea de tiempo
Ahora Motion cobra vida en el lienzo —en el mismo archivo que tus componentes, tus variables y tu equipo—, para que los diseños se hagan realidad desde el primer día.
Compartir Presentamos Figma Motion: Tu lienzo ahora tiene una línea de tiempo
Instantánea del cliente: Atlassian
Para Atlassian, la posibilidad de mover elementos en el lienzo ha eliminado los obstáculos que podían impedir su lanzamiento. “Convierte las ilustraciones animadas, que antes eran una tarea a cargo de un especialista, en una capacidad del sistema”, afirma la diseñadora sénior de productos Alexandra Pereira. “Dev Mode y la posibilidad de comentar en la línea de tiempo permitirán un ida y vuelta fluido”.
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 diera sugerencias sobre lo que funcionaba y lo que no», dice Davy Fung, diseñador jefe de producto. Esto ayuda a desmitificar el movimiento para todos, afirma el diseñador principal de Motion Maxwell Hathaway: “La gente puede ver cómo se mueven las cosas muy rápido, y ese acceso les ayudará a desarrollar su gusto más rápido”.
Cuando se hace correctamente 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 se encuentran el resto de tus diseños. Motion ya no es un obstáculo ni un trabajo que pueda realizar una sola persona. Cualquier diseñador ahora puede pedirle al agente de Figma que genere movimiento directamente en la nueva línea de tiempo de animación, lo que reduce la barrera de creación y amplía los límites 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
Pronto llegarán estilos de animación personalizados, por lo que pronto podrás crear y guardar los tuyos.
Junto con Design, Draw y Dev Mode, Motion es la capa más nueva de una experiencia conectada en el lienzo. Cambia cualquier marco al modo Motion y la línea de tiempo aparece junto a tu diseño.
- Control de la línea de tiempo: arrastra capas para ajustar el tiempo; desliza para previsualizar cualquier momento; y anima la posición, escala, rotación y opacidad de forma independiente. Habilita los fotogramas clave automáticos para registrar cada cambio que realices mientras el cabezal de reproducción se mueve. Y gracias a los comentarios con marca de tiempo en el lienzo, cualquiera puede señalar un momento específico de la animación, lo que permite que todo el equipo participe en las revisiones de movimiento.
- Estilos de animación: agrega estilos de animación predeterminados—desvanecer, mover, escalar—para empezar de la manera más rápida, y luego sigue perfeccionando el diseño en el lienzo. Puedes apilar estilos de animación en la línea de tiempo para que se reproduzcan al mismo tiempo, o arrastrarlos para ordenarlos.
El diseño atómico ahora es 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 deleite y emoción a su trabajo. Pero tener que alternar entre herramientas externas, plugins del navegador y Figma para animar una sola ilustración implicaba cambiar constantemente de contexto. Tener el movimiento directamente en el lienzo cambia eso. “Tener todo en un solo espacio es realmente útil”, dice ella. “Puedo sistematizar el proceso de animación y publicarlo como una biblioteca, de modo que el trabajo pase de ser algo que hace una sola persona a algo de lo que puedan beneficiarse otras personas”.
Construye 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. Pero la mayoría de los equipos nunca han tenido un espacio para desarrollar ese sistema, por lo que el movimiento se reconstruye desde cero en cada sprint, y lo que se lanza al mercado depende de quién haya tenido tiempo, no de lo que se diseñó.
- 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 se traslada junto con ese componente a todas las pantallas y a los archivos de todos los colaboradores, de la misma manera que lo hacen el relleno y la tipografía.
- Variables de Motion: las variables de movimiento te permiten personalizar esa animación. Crea una variable de aceleración, define varios modos para esa variable y aplícala a todas tus animaciones. Cambia el modo a nivel de página y todas las animaciones que hagan referencia a esa variable se actualizarán de inmediato.
Si es algo con lo que interactúas todos los días, el software debería hacerte sentir algo. Motion es otro camino para darle vida.
Efectos de sombreado y movimiento
Cada propiedad que un sombreado expone ahora se puede animar en la línea de tiempo de movimiento. Tradicionalmente, las propiedades animables de Figma eran limitadas. Los sombreados cambian eso: cualquier cosa que puedas controlar con un deslizador o un campo de entrada, ahora se puede animar con fotogramas clave a lo largo del tiempo.
Próximamente transformaciones 3D
Motion 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 se encuentra en el espacio.
Con las 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 que está en el código. Combina la transformación 3D con el movimiento en el mismo archivo y podrás prototipar interacciones espaciales que antes no eran posibles en Figma.
Llega más lejos con el agente de Figma
El movimiento 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, gestiona el trabajo repetitivo para que puedas centrarte en impulsar el trabajo y afinar los detalles. Ajusta la curva de aceleración o la duración, agrega una propiedad o elimínala y replantéala. Puedes ejecutar varias indicaciones al mismo tiempo, para que puedas mantenerte en tu flujo mientras el agente aborda múltiples marcos.
Para los sistemas empresariales, es muy importante poder generar código dentro de unos límites establecidos. Permite consistencia, accesibilidad y calidad de implementación tanto como velocidad.
Envía el movimiento que diseñaste
El movimiento en la producción rara vez coincide exactamente con lo que se diseñó. Los detalles que llevaron horas ajustar, como la progresividad y la sincronización, se pierden en la conversión del archivo al código. Figma cierra esa brecha incluso antes de que llegues a la entrega. Selecciona cualquier fotograma animado y exporta un archivo MP4, GIF, SVG o WEBM directamente desde el archivo, para que puedas obtener comentarios y sugerencias desde el principio.
Cuando el archivo esté ready for dev, cambia a Dev Mode y abre la pestaña de Motion. La línea de tiempo completa es visible e inspeccionable. Cada valor de sincronización, cada curva de aceleración y cada fotograma clave se puede leer sin que el desarrollador tenga que interpretarlos. Pueden copiar el código de animación directamente del panel en CSS, JSON, o React y motion.dev listos para el marco.
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 de equipo puede revisar y adaptar fácilmente las animaciones a los formatos que necesitamos, se reduce la brecha entre la intención y el lanzamiento.
La animación ya no es un paso final o un riesgo de alcance. Ahora, Motion recorre el proceso de diseño igual que todo lo demás: desde el primer fotograma hasta la versión final, todo en un solo lugar.
Motion está en beta abierta. Los usuarios del plan Inicial pueden acceder a motion con exportaciones limitadas. Los usuarios con puesto Full en todos los planes pueden acceder a los elementos básicos 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 descubre los secretos del diseño de movimiento eficaz y adquiere experiencia práctica creando animaciones en Figma Motion. Prueba el movimiento tú 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 3D.
Lee el resumen de Config de Dylan Field, CEO y cofundador de Figma.
