Radar Figma lanza Motion: animación integrada y asistencia IA en la plataforma de diseño
Figma presentó Motion, un modo que añade timeline y keyframes a sus diseños, permite exportar código y videos, y cuenta con un asistente IA para generar animaciones básicas.
Figma amplió su suite de diseño con un nuevo modo llamado Motion. La función, anunciada en beta el 24 de junio, incorpora una línea de tiempo directamente en la interfaz de Figma Design, junto a los modos Design, Draw y Dev. Al activar Motion en cualquier frame, aparece una barra de tiempo donde los usuarios pueden arrastrar capas, definir posiciones, escalas, rotaciones y opacidades, y fijar esos valores como keyframes.
Los presets de animación, como fade o move, facilitan la creación de transiciones sin necesidad de programar manualmente cada paso. Cuando se asigna una animación a un componente, esta se replica automáticamente en todas las instancias del mismo, lo que simplifica la consistencia visual en productos con múltiples pantallas.
En el modo Dev, los desarrolladores pueden inspeccionar los valores de tiempo y las curvas de easing que definen la aceleración de los objetos. La herramienta genera fragmentos de código en CSS, JSON o formato React, listos para copiar. Además, Motion soporta la exportación de la animación en formatos MP4, WebM, SVG animado y GIF, cubriendo tanto videos como gráficos vectoriales.
Una novedad relevante es la integración del Figma Agent, un asistente basado en IA. Mediante prompts de texto, el agente sugiere una animación inicial que el diseñador puede refinar. Esta capacidad está disponible en los planes de pago, mientras la versión gratuita permite crear animaciones básicas y exportar código, pero restringe la publicación de componentes animados y la generación mediante IA.
La comunidad de usuarios reaccionó con nostalgia, comparando Motion con la experiencia que ofrecía Adobe Flash para crear animaciones web antes de la adopción de HTML5. Sin embargo, algunos expertos advierten que la similitud es superficial; Motion se centra en la integración directa con el flujo de trabajo de diseño y desarrollo, mientras que Flash era una plataforma independiente.
Para los equipos de producto y diseño, Motion representa una forma de acelerar la iteración de prototipos animados sin depender de herramientas externas. La generación automática de código reduce la brecha entre diseñadores y desarrolladores, minimizando errores de traducción y acortando los ciclos de entrega. Las empresas que ya utilizan Figma pueden evaluar la incorporación de Motion en sus planes gratuitos para validar su impacto en la velocidad de desarrollo, y considerar la suscripción completa si la generación de video en alta resolución o la asistencia IA son críticas para sus flujos.
En términos de costos, la edición completa de Motion forma parte del plan "Full Sheet" de Figma, cuyo precio está disponible en la página de tarifas. Las organizaciones que requieran exportar animaciones como assets listos para producción, o que necesiten la capacidad de generar animaciones a partir de descripciones en lenguaje natural, deberán contemplar este nivel de suscripción.
Cierre proyectivo: con la creciente demanda de experiencias interactivas y micro‑animaciones en aplicaciones móviles y web, herramientas que integren diseño, animación y código, como Figma Motion, podrían convertirse en estándar, desplazando soluciones fragmentadas y reduciendo la dependencia de software especializado.
Más información sobre Figma Motion
