Saltar al contenido principal

Config 2026: Nuevos materiales, nuevas herramientas y un lienzo más expresivo

Dylan FieldCo-founder & Chief Executive Officer, Figma
Imagen de producto en estilo collage que muestra flujos de trabajo de diseño y desarrollo asistidos por IA, con indicaciones para la creación de plugins, controles de efectos visuales, herramientas de generación de código y componentes de UI interactivos dispuestos en un espacio de trabajo creativo.Imagen de producto en estilo collage que muestra flujos de trabajo de diseño y desarrollo asistidos por IA, con indicaciones para la creación de plugins, controles de efectos visuales, herramientas de generación de código y componentes de UI interactivos dispuestos en un espacio de trabajo creativo.

Supera los límites de lo que creías posible con capas de código, Figma Motion, shaders, plugins generativos y herramientas Weave, todo ello en el lienzo.

Compartir Config 2026: Nuevos materiales, nuevas herramientas y un lienzo más expresivo

El diseño consiste en plantearse las preguntas difíciles. En este momento, estas preguntas parecen más importantes que nunca. ¿Qué está cambiando? ¿Qué es posible? ¿Y qué significa realmente crear? Aquí en Figma, siempre volvemos a una premisa sencilla: ninguna herramienta debería limitar el alcance de una idea.

Los anuncios de Config de este año giran en torno a la expresión sin límites en el lienzo. Estamos incorporando nuevos materiales para expresar cualquier cosa que imagines, además de nuevas herramientas para darles forma y llevarlos más lejos que nunca: código, animación, shaders, plugins generativos y herramientas de Weave, todo en el lienzo de Figma.

En ediciones anteriores de Config, hablamos sobre el papel de la IA para hacer que la creatividad sea accesible para todos y ampliar el horizonte de posibilidades. Pero si bien la IA ha hecho que la creatividad sea accesible para todos, aún no ha superado los límites.

Diseñadores, creativos, desarrolladores: ustedes superarán los límites.

En los próximos meses y años, creo que habrá una explosión de creatividad, de disposición a tomar riesgos y de expresión audaz. Nuestro objetivo en Figma es ayudarte a diseñar sin límites, con materiales y herramientas que se combinan entre sí y te permitan improvisar y experimentar al ritmo de tus ideas. El lienzo es más que el lugar donde reside tu trabajo. También es donde todo se conecta.

Aquí te presentamos todo lo que anunciamos en Config 2026.

Código en el lienzo

Durante años, la industria del diseño ha hablado de “diseño versus código”, y las herramientas (¡incluido Figma!) han obligado a elegir entre uno u otro. Pero este es un debate falso. El diseño es un proceso. El código es un material, al igual que las imágenes, los vectores y las capas de diseño. Durante mucho tiempo, el código ha existido en entornos individuales diseñados para el pensamiento lineal. Dicho de otra manera: el material estaba separado del proceso. Creemos que el código debe tratarse como cualquier otro material de diseño. Por eso estamos introduciendo las capas de código en Figma.

En el lienzo, puedes convertir cualquier capa de diseño en una capa de código interactiva con solo un clic (o un comando). Puedes duplicar rápidamente una capa de código para explorar varias opciones en paralelo, tal como lo harías con un marco de diseño.

A partir de ahí, funciona igual que el lienzo: puedes improvisar, comentar e iterar con todos tus compañeros de equipo en el mismo archivo.

En los momentos en los que se quiera volver del código a las capas de diseño, se pueden extraer marcos de diseño como capas de diseño editables. Luego, cuando se quiera volver al código, con un solo clic se actualiza la capa de código con los cambios realizados.

Únete a la lista de espera en figma.com/config-betas para tener acceso anticipado cuando se lancen las capas de código a partir de julio.

Más información →

Concepto de producto con pantalla dividida que muestra la página web de una exposición, una interfaz generada para la reserva de entradas y la implementación correspondiente en código React, dispuestas una al lado de la otra, lo que ilustra un flujo de trabajo de diseño a código.Concepto de producto con pantalla dividida que muestra la página web de una exposición, una interfaz generada para la reserva de entradas y la implementación correspondiente en código React, dispuestas una al lado de la otra, lo que ilustra un flujo de trabajo de diseño a código.
Explora las opciones con las capas de código en el lienzo de Figma.

Dale vida a tus diseños con Figma Motion

Los diseñadores de animación logran dar vida a los objetos de una manera difícil de explicar y aún más difícil de reproducir. Muchos de nosotros hemos aspirado a crear ese mismo tipo de magia, pero nos ha parecido algo inalcanzable. Y, a menudo, eso significaba tener que recurrir a otras herramientas. A partir de hoy, puedes crear animaciones directamente en Figma.

En Figma Design, hemos agregado una línea de tiempo que incluye fotogramas clave, ajustes predeterminados y mucho más. Puedes crear animaciones desde cero, superponerlas a diseños existentes o pedirle al agente de Figma que genere un punto de partida. Espero que Figma Motion te resulte potente, intuitivo y que sea un placer utilizarlo. Si ya eres diseñador de animación, Figma elimina el trabajo repetitivo para que puedas enfocarte en llevar tu creatividad más allá.

Dado que la animación se crea en la plataforma de Figma, ahora puede ser un elemento fundamental de tus sistemas de diseño. Puedes animar un componente una sola vez, y esa animación se aplica en todas las pantallas y en los archivos de todos los colaboradores, de la misma manera que lo hacen los rellenos y la tipografía.

Por último, Figma Motion también está diseñado para funcionar en código. Cuando cambias al Dev Mode, la línea de tiempo completa queda visible y se puede inspeccionar: cada valor de tiempo, cada curva de aceleración y cada fotograma clave se puede leer sin necesidad de interpretación. Puedes copiar el código de animación directamente en CSS, JSON o React listo para usar con marcos de trabajo. Motion también es compatible con MCP, por lo que puedes pasar cualquier marco animado directamente a un agente de programación para su implementación. También puedes exportar como MP4, WebM, SVG animado o GIF, y ya estamos trabajando para ofrecer más formatos y tipos de exportación.

Más información →

Anima tus diseños con la nueva línea de tiempo de Figma Design.

Rellenos y efectos con shaders

Los shaders siempre han existido en Figma, impulsando el renderizado de nuestro lienzo detrás de escena. Pero crear shaders puede resultar intimidante, y son difíciles de compartir con tu equipo.

Ahora puedes describir lo que quieres, o utilizar una imagen como referencia, y el agente de Figma lo creará por ti. Un efecto transforma lo que ya está en la capa, y un relleno actúa como un nuevo material. Como todo esto se crea con el agente de Figma, los rellenos y efectos con shaders están parametrizados de forma predeterminada. Esto te permite agregar controles directamente en el lienzo y darles la forma que desees.

El resultado se ve y funciona como si siempre hubiera sido parte de Figma. Los parámetros se exponen como controles, son apilables con otros efectos y están listos para convertirse de forma fluida a código y formatos populares.

Los shaders interactivos también estarán disponibles pronto, pero estamos trabajando para que el rendimiento sea el adecuado.

Más información →

Interfaz del editor de animación gráfica que muestra un efecto visual generativo con parámetros ajustables de la cuadrícula de partículas, controles de animación de fotogramas clave y una línea de tiempo para animar ilustraciones procedimentales.Interfaz del editor de animación gráfica que muestra un efecto visual generativo con parámetros ajustables de la cuadrícula de partículas, controles de animación de fotogramas clave y una línea de tiempo para animar ilustraciones procedimentales.
Combina efectos con shaders como mapa de gradiente, impresión Riso y partículas de luminancia.

Plugins generativos

Cada vez vemos a más equipos crear sus propias herramientas, ¡y nos parece increíble! Cada diseñador tiene flujos de trabajo únicos. Los plugins generativos te permiten crear todas las herramientas que desees. Para crear un plugin generativo, solo describe la herramienta que necesitas: cómo funciona, sus controles y sus parámetros. No se requiere un entorno de desarrollo local ni conocimientos de la API de plugins. Se integra de manera natural en el lienzo, igual que cualquier otra herramienta de Figma.

Tanto en el caso de los plugins generativos como de los shaders, puedes crear algo para ti y compartirlo con cualquier persona que tenga acceso a tu archivo. Pronto podrás publicar herramientas para tu equipo, tu organización o la comunidad en general.

Más información →

Un plugin generador de disposición de imágenes te ayuda a organizar recursos.

Herramientas de Figma Weave

Las herramientas de Figma Weave aplican el mismo enfoque al contenido visual, lo que te permite crear y reutilizar flujos de trabajo expresivos. Y ahora están disponibles en el lienzo de Figma.

Algo de contexto: Weave es un lienzo basado en nodos donde creas flujos de trabajo generativos. Puedes conectar modelos, transformar recursos, refinar resultados y comparar enfoques. En lugar de buscar un único resultado, trabajas con los resultados de los modelos como si fueran arcilla para esculpir un flujo de trabajo multimodelo que te permita convertir cualquier idea que tengas en mente en un proceso visible que puedas inspeccionar, iterar y reutilizar.

Hoy en día, puedes crear flujos de trabajo en Weave y publicarlos como plantillas para que otros los utilicen o los adapten. Pronto podrás publicarlos como herramientas para tu equipo, organización o comunidad. Para ayudarte a dar los primeros pasos, hemos agregado varias herramientas de Weave que te servirán de inspiración.

Más información →

Interfaz de transferencia de estilos que muestra una imagen de destino, una imagen de referencia de estilo y una vista previa de la página web generada, lo que ilustra la aplicación de estilos visuales impulsada por IA en los recursos de diseño.Interfaz de transferencia de estilos que muestra una imagen de destino, una imagen de referencia de estilo y una vista previa de la página web generada, lo que ilustra la aplicación de estilos visuales impulsada por IA en los recursos de diseño.
Utiliza la herramienta de Weave de transferencia de estilo para aplicar el estilo de una imagen de origen a una imagen de destino.

Un agente que sabe cómo trabajas

El agente de Figma (¡lanzado ayer para todos!) está diseñado para entender el lienzo de diseño.

Las habilidades agrupan tus flujos de trabajo y convenciones en instrucciones reutilizables para el agente. Puedes crear las tuyas propias, utilizar las habilidades de tu equipo o tomarlas de la comunidad. Los conectores permiten que el agente acceda a las herramientas que ya tienes en tu entorno, por ejemplo, Notion, Slack, Granola, Hex, GitHub, Atlassian y más, y luego envíe actualizaciones. Los archivos adjuntos pueden incluir investigaciones, resúmenes o cualquier material relevante.

Los chats del agente ahora también son visibles para tus compañeros de equipo de forma predeterminada, para que puedas ver qué direcciones están explorando los demás y desarrollar sus ideas. Por supuesto, también puedes hacer que los chats sean privados cuando lo necesites.

El agente también estará disponible en más plataformas, como FigJam y Slides. Únete a la lista de espera para obtener acceso anticipado en figma.com/config-betas.

Más información →

Diseño de un cartel para dispositivos móviles rodeado de acciones del asistente de IA, con indicaciones flotantes para crear plugins, aplicar estilos, generar efectos personalizados y verificar la accesibilidad dentro de un flujo de trabajo de diseño.Diseño de un cartel para dispositivos móviles rodeado de acciones del asistente de IA, con indicaciones flotantes para crear plugins, aplicar estilos, generar efectos personalizados y verificar la accesibilidad dentro de un flujo de trabajo de diseño.
Adjunta archivos, conecta otras herramientas y utiliza habilidades para darle más contexto a tu agente de diseño.

Con más posibilidades que nunca en el lienzo de Figma, estamos ansiosos por ver cómo superas los límites. Ve y crea algo que solo tú puedas hacer.

Visita nuestro centro de ayuda para ver un resumen de lo que lanzamos, su disponibilidad y cómo empezar. Encuentra respuestas e inspiración sobre todo lo relacionado con Figma en Figma Learn.

Create and collaborate with Figma

Get started for free