Durante mucho tiempo, diseñar una página web o una aplicación funcionaba más o menos así: el equipo de diseño preparaba las pantallas en Figma, desarrollaba un prototipo para explicar algunas interacciones y, después, entregaba todo al equipo de programación con la esperanza de que el resultado final se pareciera lo suficiente.
Y sí, a veces se parecía muchísimo.
Pero otras veces… digamos que había ciertas “diferencias creativas”.
En Config 2026, Figma presentó una serie de actualizaciones que buscan reducir precisamente esa distancia entre lo que se diseña, lo que se imagina y lo que finalmente se desarrolla. La plataforma está dejando de funcionar únicamente como un espacio para crear pantallas bonitas y se está convirtiendo en un entorno donde también podemos explorar movimiento, profundidad, comportamiento y código.
La frase podría sonar bastante técnica, pero la idea es sencilla: ahora los diseños pueden acercarse mucho más a la experiencia real que tendrá el usuario.
Config es la conferencia anual de Figma, donde la empresa presenta nuevas herramientas, cambios en la plataforma y una especie de adelanto de hacia dónde se dirige el diseño digital.
En la edición de 2026, una parte importante de los anuncios estuvo relacionada con nuevos materiales y formas de trabajar directamente dentro del canvas. Entre las novedades se encuentran Figma Motion, las transformaciones en 3D, los shaders y las nuevas Code Layers.
Aunque todas estas funciones tienen bastante potencial, hay dos que llaman especialmente la atención para quienes trabajamos en UX/UI y diseño web: Figma Motion y Code Layers.
No porque vayan a reemplazar automáticamente al equipo de desarrollo, sino porque pueden ayudarnos a comunicar mucho mejor cómo debería funcionar una experiencia.
Hasta ahora, Figma ya permitía construir prototipos, conectar pantallas y agregar ciertas transiciones. Era suficiente para explicar que un botón llevaba a otra página, que un menú se desplegaba o que una tarjeta cambiaba al pasar el cursor.
Pero cuando la interacción era más compleja, el prototipo podía quedarse corto.
Figma Motion incorpora una línea de tiempo directamente dentro de Figma. Desde ahí es posible controlar elementos como la duración de una animación, los keyframes, las curvas de movimiento y el momento exacto en que aparece o se transforma cada objeto.
Pensemos, por ejemplo, en el hero de una página web.
Podríamos definir que primero aparezca el título, después la descripción, luego el botón principal y, finalmente, una imagen con un movimiento sutil. En lugar de decirle al desarrollador “quiero que aparezca bonito y como con un pequeño efecto”, ahora podemos mostrar con mayor precisión qué elemento se mueve, cuánto dura la animación y cómo debería sentirse.
Y eso último es importante: cómo debería sentirse.
Porque una animación no solamente sirve para decorar. También puede ayudar a dirigir la atención, explicar una acción, confirmar que algo sucedió o hacer que una interfaz se sienta más clara.
El movimiento bien utilizado puede mejorar la experiencia. El movimiento utilizado porque “se veía padre” puede terminar haciendo que una página se sienta lenta, confusa o incluso cansada.
La herramienta no sustituye el criterio del diseñador. Simplemente nos da más posibilidades para expresar una idea.
Una de las partes más interesantes de Figma Motion aparece cuando el diseño entra en Dev Mode.
Los desarrolladores pueden inspeccionar la línea de tiempo, revisar los tiempos, las curvas y los keyframes de la animación. Además, Figma permite copiar esa información en formatos como CSS, JSON o React.
Esto puede ayudar a reducir una de las conversaciones más comunes en proyectos web:
—La animación no se siente como en el diseño.
—Pues es que no entendí exactamente cómo querías que se moviera.
Al tener valores más específicos, la comunicación entre diseño y desarrollo puede ser mucho más clara. Ya no se entrega solamente una referencia visual; también se comparte información que puede utilizarse durante la implementación.
Eso no significa que el código esté completamente terminado o que siempre pueda copiarse y publicarse sin revisión. El desarrollo sigue necesitando validaciones, optimización, accesibilidad y ajustes según la tecnología del proyecto.
Pero sí significa que el punto de partida puede ser mucho más preciso.
La otra actualización que puede cambiar bastante la manera de trabajar son las Code Layers.
Las Code Layers permiten colocar experiencias interactivas creadas con código directamente dentro del canvas de Figma. Se puede comenzar desde un frame existente, utilizar una plantilla, pedirle al agente de Figma que genere una propuesta o incluso importar un repositorio de GitHub o una carpeta con código.
Aquí es donde Figma empieza a borrar todavía más la frontera entre diseño y desarrollo.
Imaginemos que estamos diseñando un buscador, una calculadora, una tabla dinámica o una sección con filtros. En un prototipo tradicional podríamos simular algunos estados, pero normalmente tendríamos que preparar varias pantallas para mostrar qué pasa cuando el usuario interactúa.
Con una Code Layer, la experiencia puede comportarse de una manera más cercana al producto real.
Además, el equipo puede colocar diferentes opciones una al lado de la otra, compararlas, dejar comentarios y seguir ajustándolas dentro del mismo archivo. Figma explica que estas capas pueden redimensionarse, modificarse y duplicarse para explorar distintas versiones sin perder la propuesta original.
Para UX, esto puede ser especialmente útil porque permite probar no solamente cómo se ve una interfaz, sino también cómo responde.
No necesariamente.
Y tampoco significa que Figma vaya a convertir a cualquier persona en desarrolladora después de ver tres tutoriales y tomarse un café.
Lo que sí está sucediendo es que los límites entre algunas disciplinas son cada vez menos rígidos.
Los diseñadores pueden comprender mejor cómo funciona el código. Los desarrolladores pueden participar antes en la exploración de una interfaz. Y las herramientas de inteligencia artificial pueden ayudar a transformar una idea en una primera versión funcional con mayor rapidez.
El valor del diseñador seguirá estando en entender al usuario, organizar la información, detectar problemas, construir jerarquías claras y tomar decisiones estratégicas.
Saber utilizar Motion o Code Layers puede ampliar nuestras posibilidades, pero una interfaz no mejora solamente porque tenga animaciones o porque utilice código dentro de Figma.
Una mala experiencia con movimiento sigue siendo una mala experiencia. Solo que ahora se mueve.
Probablemente, el cambio más importante sea la conversación.
En lugar de diseñar una pantalla estática y explicar verbalmente todo lo que debería ocurrir, los equipos podrán presentar experiencias más cercanas al resultado final.
Esto puede ayudar a validar interacciones antes de invertir tiempo completo en desarrollo, comparar distintas soluciones y detectar problemas desde etapas más tempranas.
También podría hacer que las presentaciones con clientes sean mucho más claras. No es lo mismo mostrar una imagen de un menú que permitir que el cliente interactúe con él y entienda cómo se comportará dentro de su página.
Figma no está dejando de ser una herramienta de diseño. Está intentando convertirse en el espacio donde la idea, la interacción, el código y la colaboración sucedan con menos pasos intermedios.
Y aunque todavía tendremos que ver cómo funcionan estas herramientas en proyectos reales, Config 2026 dejó algo bastante claro:
El futuro del diseño digital no consiste solamente en decidir cómo se ve una interfaz.
También consiste en definir cómo se mueve, cómo responde y cómo llega realmente a las manos del usuario.