Figma Config 2026: todas las novedades y qué cambian para quien hace webs

Por Daniele Forciniti

Índice

Figma Config 2026 es el evento anual de Figma, celebrado el 24 de junio de 2026 en San Francisco, y este año ha traído un giro importante: el código, las animaciones y la inteligencia artificial entran directamente en el canvas, es decir, en la zona donde se diseña. Las seis novedades principales son los code layers (el código tratado como un material más del proyecto), Figma Motion (las animaciones nativas), los shaders generados describiéndolos con palabras, los plugins generativos, las Weave tools y el Figma agent, el asistente de IA. En dos palabras: diseñar una interfaz y construirla dejan de ser dos mundos separados.

Llevo más de 10 años trabajando con webs, SEO y contenidos, y Figma es la herramienta con la que diseño la mayoría de los sitios antes de desarrollarlos. Por eso seguí Config con atención: no es la típica lista de funciones para expertos, es un cambio de rumbo que afecta también a quien solo encarga una web. Aquí te explico cada novedad con palabras sencillas, qué hace de verdad y —algo que los otros artículos no cuentan— por qué debería interesarte aunque nunca vayas a abrir Figma en tu vida.

Las seis novedades de Figma Config 2026 en resumen

Si tienes prisa, aquí está todo en una tabla. Más abajo tienes cada punto explicado con calma y en cristiano.

Novedad	Qué hace, en una línea
Code layers	Convierte un elemento diseñado en código funcional con un clic
Figma Motion	Crea las animaciones con una línea de tiempo dentro de Figma, exportable a código
Shaders	Genera efectos y texturas describiéndolos con palabras
Plugins generativos	Te montas herramientas a medida sin saber programar
Weave tools	Montas flujos de imágenes con IA conectando varios modelos
Figma agent	El asistente de IA que construye el resto y aprende tu estilo

Qué es Config y por qué este año pesa más

Config es la conferencia que Figma organiza una vez al año para anunciar hacia dónde va. Figma, por si no lo conoces, es el programa con el que hoy se diseña la inmensa mayoría de webs y apps del mundo: dibujas las páginas, los botones, los colores, antes de escribir una sola línea de código. Se ha convertido en el estándar porque funciona en el navegador y varias personas pueden estar en el mismo archivo a la vez, como en un documento compartido.

El hilo conductor de este año lo resumió el fundador Dylan Field con una frase: hasta ahora la IA ha «bajado el suelo» —ha hecho más fácil empezar— pero no ha «subido el techo», es decir, no ha llevado más alto lo que se puede crear. Config 2026 lo intenta poniendo en la misma mesa materiales que antes vivían en programas distintos: el código, el movimiento, los efectos visuales. Todo en el mismo sitio donde ya se diseña.

Code layers: el código se vuelve un material más

Es la novedad que más me llamó la atención. Desde siempre en nuestro oficio se habla de «diseño contra código», como si fueran dos equipos rivales: primero el diseñador dibuja, luego el desarrollador lo reconstruye todo desde cero escribiendo código. Un trabajo doble, con el inevitable «pero no era así en el diseño» al final.

Con los code layers conviertes un elemento dibujado en un elemento de código funcional con un clic (o describiéndolo con palabras). Desde ahí lo puedes duplicar para probar varios caminos en paralelo, comentarlo con el equipo y —comodidad nada obvia— volver al diseño editable cuando haga falta. El código deja de ser una fase aparte y pasa a ser un material del proyecto, como lo son una imagen o un color. La lista de espera está abierta en figma.com/config-betas y el despliegue empezó en julio de 2026.

Code layers de Figma: diseno y codigo uno al lado del otro en el mismo canvas — Fuente: Figma

Figma Motion: las animaciones entran en el diseño

Las animaciones —un botón que reacciona, un menú que se desliza suave, un elemento que aparece con gracia— son las que hacen que una web parezca «viva» en vez de una postal quieta. El problema es que hasta ahora, para hacerlas, había que salir de Figma y pasar a otros programas.

Con Figma Motion llega una línea de tiempo dentro de Figma —la misma barra temporal con la que se montan los vídeos— con fotogramas clave y ajustes ya listos. Puedes animar desde cero o pedirle al Figma agent un punto de partida. Tres cosas la hacen seria para quien luego construye la web de verdad:

La animación entra en el sistema de diseño: la creas una vez en un componente y viaja por cada pantalla y cada archivo del equipo, igual que hacen los colores y las tipografías.
En modo desarrollo cada valor es legible y se puede copiar directamente el código de la animación en CSS, JSON o React, sin interpretaciones a ojo.
Puedes exportar en MP4, WebM, SVG animado o GIF.

Está disponible con despliegue gradual desde el 24 de junio. Esta es, en mi opinión, la novedad que tendrá el impacto más concreto en las webs que veremos los próximos meses.

Figma Motion: la linea de tiempo para animar directamente en Figma — Fuente: Figma

Shaders: efectos con materia descritos con palabras

Los shaders son los efectos que dan «materia» a una superficie: degradados complejos, texturas, luces que se mueven, ese aspecto tridimensional y vivo que ves en ciertas gráficas cuidadas. Hasta ahora crearlos era cosa de especialistas y difícil de compartir con el resto del equipo.

Ahora describes el efecto que quieres, o subes una imagen de referencia, y lo construye el Figma agent. El resultado llega ya «desmontable»: los parámetros se vuelven controles en el canvas, así lo ajustas a tu gusto, lo apilas con otros efectos y lo conviertes en código cuando haga falta. Los shaders interactivos, dicen desde Figma, llegarán algo más adelante —todavía están afinando el rendimiento, y lo escriben con honestidad en vez de prometerlo todo ya.

Plugins generativos: te montas tus herramientas hablando

Cada profesional tiene sus automatismos, esos micro-atajos que le ahorrarían horas. Hasta ayer, para construírtelos en Figma, hacía falta saber programar un plugin. Con los plugins generativos describes la herramienta que necesitas —qué debe hacer, qué controles tener— y Figma te la crea, sin entorno de desarrollo ni conocimientos técnicos. La guardas para ti o la compartes con quien trabaja en tu archivo, y pronto se podrán publicar para todo el equipo o la comunidad.

Figma Weave: los flujos creativos se vuelven visuales

Las Weave tools traen a Figma una forma distinta de trabajar con las imágenes generadas por IA. Weave es un lienzo hecho de «nodos»: en vez de escribir una orden y cruzar los dedos, conectas varios modelos entre sí, transformas los elementos paso a paso y comparas versiones. En la práctica, en lugar de pedir un único resultado modelas un proceso entero, visible y reutilizable. Puedes construir un flujo y publicarlo como plantilla para que otros lo reutilicen o lo modifiquen.

Figma Weave: la herramienta Transfer style aplica un estilo a otra imagen — Fuente: Figma

Figma agent: el asistente que aprende cómo trabajas

El Figma agent es el asistente de IA que sostiene todo lo demás: es él quien construye los shaders, quien genera los plugins, quien prepara una animación de partida. La novedad de este año es que ahora se puede personalizar con herramientas e instrucciones propias, para que lo que produce se parezca de verdad a tu estilo en vez de ser un resultado anónimo. Es la IA aplicada al diseño con criterio: hace el trabajo repetitivo, la dirección la pones tú.

Si te interesa el tema de la IA que entra en las herramientas de trabajo, hablé de ello también a propósito de los modelos que uso cada día en el artículo sobre cuánto estás pagando por la IA.

Figma agent ejecutando varias tareas: crea plugins, aplica estilos, genera shaders — Fuente: Figma

Qué cambia de verdad para quien hace (o encarga) una web

Aquí llega la parte que los artículos escritos por diseñadores para diseñadores se olvidan. ¿Por qué deberían interesarte estas novedades si solo quieres una web, o si la construyes pero no vives dentro de Figma?

La distancia entre diseño y realidad se estrecha. Con los code layers y con la animación que se lleva su propio código, lo que ves en la fase de proyecto se parece mucho más a la web terminada. Menos sorpresas del tipo «en la vista previa era distinto».
Las webs serán más animadas. Con Figma Motion el movimiento deja de ser un lujo de gran presupuesto. Espera micro-animaciones cuidadas también en webs de pequeños negocios —con el riesgo, para quien se pasa, de recargarlas: a una web lenta no la salva ninguna animación.
La velocidad de trabajo sube y los costes pueden bajar. Si parte del trabajo manual desaparece, un proyecto bien planteado puede costar menos o estar listo antes. No es una promesa automática, pero la dirección es esa.
La diferencia la hará cada vez más el criterio, no la herramienta. Si todos tienen la IA que genera efectos y animaciones, lo que distinguirá una web bonita de una anónima será quien sabe elegir. La herramienta ha subido, el criterio no.

En mi trabajo Figma es el primer paso de cada proyecto: diseño ahí la web, la comparto con el cliente y solo después la construyo, normalmente en WordPress o en Wix Studio. Estas novedades no cambian el oficio, cambian la velocidad: la máquina se queda el trabajo repetitivo, yo me quedo las decisiones. Y es justo ahí donde tiene que estar la frontera.

Cuándo llegan y en qué planes

Como siempre con estos anuncios, «presentado» no significa «ya en manos de todos». Este es el cuadro de plazos, para que no te pillen las expectativas equivocadas:

Novedad	Disponibilidad
Figma Motion	Despliegue gradual desde el 24 de junio de 2026
Code layers	Lista de espera abierta, despliegue desde julio de 2026
Shaders, plugins generativos, Weave	Ligados al Figma agent, llegando por fases
Figma agent	El corazón de IA sobre el que se apoya el resto

El consejo práctico: si usas Figma, apúntate a la lista de espera de las betas y prueba las funciones en un proyecto real, no en un ejercicio. Se ve si una herramienta sirve solo poniéndola a trabajar. Y si lo que haces es encargar una web, lo útil que debes saber es que el mercado se está moviendo hacia webs más animadas y hechas más rápido: pregúntale a tu proveedor cómo las está usando.

Preguntas frecuentes

¿Qué es Figma Config 2026?
Es la conferencia anual de Figma, celebrada el 24 de junio de 2026 en San Francisco, en la que la empresa anuncia las novedades de sus herramientas. La edición 2026 trajo el código, las animaciones y la IA directamente al canvas de diseño, con seis novedades: code layers, Figma Motion, shaders, plugins generativos, Weave tools y un Figma agent más potente.

¿Qué son los code layers de Figma?
Son elementos diseñados que con un clic se convierten en código funcional, directamente en el canvas. Sirven para tratar el código como un material del proyecto, explorar varias versiones en paralelo y reducir la distancia entre el diseño y la web terminada. Están desplegándose desde julio de 2026 con lista de espera.

¿Figma Motion sirve para hacer las animaciones de las webs?
Sí. Añade una línea de tiempo dentro de Figma para crear animaciones, que luego se pueden exportar o convertir en código CSS, JSON o React. Está pensada precisamente para que el movimiento nazca en el mismo archivo del diseño y llegue coherente hasta la web construida.

¿Estas novedades ya están disponibles para todos?
No, no todas. Figma Motion se despliega de forma gradual desde el 24 de junio de 2026, los code layers tienen lista de espera con despliegue desde julio, y las funciones ligadas a la IA (shaders, plugins generativos, Weave) llegan por fases. «Anunciado» no significa aún «activo en tu cuenta».

¿Hay que saber programar para usar las novedades de Config 2026?
No. El sentido de estos anuncios es justo el contrario: describes con palabras lo que quieres —un efecto, una animación, una herramienta— y la IA de Figma lo construye. Hace falta más bien ojo y criterio para decidir qué te quedas, no conocimientos de código.

¿Figma sustituye el trabajo del diseñador web?
No, le cambia la parte aburrida. La IA se queda el trabajo repetitivo —generar variantes, preparar efectos, escribir el código base— mientras las decisiones de gusto, jerarquía y estrategia siguen siendo humanas. Si acaso, quien sabe decidir bien se vuelve más valioso, no menos.

Fuentes

Daniele Forciniti

Soy Daniele Forciniti, un experto en diseño web y SEO con más de 10 años de experiencia y diversas certificaciones profesionales. Estoy especializado en HTML y CSS, y utilizo CMS como WordPress. Soy el mayor experto en España en WIX y WIX Studio, y también me encargo del posicionamiento web SEO en buscadores y de marketing digital. Me apasiona mi trabajo y me actualizo constantemente para ofrecer soluciones innovadoras y de alta calidad a mis clientes.