Saltar hasta el contenido principal

El agente de diseño de Figma, ahora con herramientas personalizadas y más contexto

Georgia RustManager of Product Management, Figma
Rodrigo DaviesProduct Manager, Figma
Maqueta de un lienzo de diseño móvil en Figma rodeado de indicaciones de tareas generadas por IA. En el lienzo aparece seleccionado un póster titulado “MODULAR LIVING“de Camille Vosk, mientras que unas burbujas azules de estado muestran mensajes como “Creando el plugin del código QR“, “Generando la capa de código“, “Creando un sombreado personalizado“ y “Comprobando el contraste de color“, que ilustran los flujos de trabajo de diseño asistidos por IA.Maqueta de un lienzo de diseño móvil en Figma rodeado de indicaciones de tareas generadas por IA. En el lienzo aparece seleccionado un póster titulado “MODULAR LIVING“de Camille Vosk, mientras que unas burbujas azules de estado muestran mensajes como “Creando el plugin del código QR“, “Generando la capa de código“, “Creando un sombreado personalizado“ y “Comprobando el contraste de color“, que ilustran los flujos de trabajo de diseño asistidos por IA.

Las indicaciones te ayudan a empezar. Las herramientas personalizadas, el contexto real y las habilidades llevan al agente de diseño más lejos, para que lo que acabe apareciendo en el lienzo refleje realmente tu estilo.

Compartir El agente de diseño de Figma, ahora con herramientas personalizadas y más contexto

Explora nuestros archivos de área de pruebas para el agente y las herramientas personalizadas.

La diferencia entre un agente que te ayuda a trabajar de manera más eficiente y uno que realmente entiende cómo trabajas es el contexto. Cuando un agente conoce la forma de trabajar de tu equipo, puede aportar mucho más que simple productividad. Puede colaborar.

Lo interesante de esa colaboración es lo que pasa en el propio lienzo de Figma: se crean herramientas, efectos y experiencias que antes no habrían sido posibles. El agente de diseño de Figma

The Figma design agent is here

Starting today, work with an agent that is built for Figma—directly on the canvas.

ya está disponible para más usuarios en versión beta abierta, ofreciéndote más flexibilidad, precisión y control creativo sobre tu trabajo.

Crea tus propias herramientas

Instantánea del cliente: Edward Chechique

Los plugins generativos del diseñador de productos Edward Chechique importan HTML al lienzo, crean disposiciones de paneles y visualizan datos. Antes, crearlos era un proceso frustrante. “Tenía que recurrir a un desarrollador, que a veces no tenía tiempo para ayudarme”, dice Edward. “Más tarde, las herramientas de IA lo hicieron posible, pero aún así tenía que cambiar entre diferentes herramientas y flujos de trabajo. Ahora, con el agente de Figma, es mucho más rápido y fácil porque solo tengo que pedir directamente lo que quiero. He pasado de no tener ninguna posibilidad a tener un montón de posibilidades”.

Cada persona trabaja a su manera, pero las herramientas de diseño suelen ser iguales para todos. Las disposiciones, texturas y efectos vienen determinados en gran medida por lo que admite de forma nativa tu herramienta de diseño. A partir de hoy, puedes personalizar tus herramientas igual que personalizas tus diseños. Esto te da más libertad para experimentar visualmente y compartir lo que creas con tu equipo.

Plugins generativos

Un plugin amplía las posibilidades del lienzo de Figma, pero crear uno siempre ha requerido conocimientos técnicos y un entorno de desarrollo con los que muchos diseñadores no cuentan. Ahora puedes pedir al agente de diseño que cree plugins reutilizables.

Como utilizan PropsKit, estos plugins generativos tienen un aspecto y un funcionamiento muy similares a los de Figma. Y como se ejecutan directamente en el lienzo, te proporcionan un control más directo mientras vas realizando iteraciones. Para cualquier cosa ajena a Figma Design, como servicios de IA o API de terceros, sigue usando los plugins clásicos.

Un plugin generador de disposiciones de imágenes te ayuda a organizar los recursos.
El agente sugirió formas de resolver problemas. Eso fue mágico para mí porque me habló como un desarrollador que quería ayudarme.
Edward Chechique, diseñador de producto

Efectos y rellenos de sombreado

Instantánea del cliente: Anna Zhang

La tecnóloga creativa Anna Zhang creó sus propios sombreados para combinar sus propias fotografías con efectos de collage, mármol, fugas de luz, relieve metálico y prisma. “Es una forma de complementar lo que he estado haciendo hasta ahora o de crear un flujo de trabajo reutilizable”, explica. “Hay mucho potencial expresivo partiendo de una sola base“.

Anna se centró en la funcionalidad y dejó que el agente se encargara de la IU: “Fue un diálogo continuo entre el agente y yo, y lo que él generaba determinaba los parámetros que yo iba añadiendo más adelante. Fue como una negociación“.

El agente también puede crear sombreados: pequeños programas personalizables basados en WebGPU

Figma rendering: Powered by WebGPU

We’ve updated our renderer to use WebGPU, unlocking new performance optimization opportunities. Here’s how we did it.

que definen cómo se renderizan los píxeles. Piensa en tramado, metal líquido, ruido fractal. Hay dos tipos:

  • Los efectos de sombreado on como los efectos nativos de Figma, pero creados íntegramente por ti, como el estiramiento de partículas, la distorsión de lente, el contorno de color y mucho más. Puedes superponerlos, ajustar sus propiedades y combinarlos con los efectos nativos para conseguir el resultado que quieras.

Usar cualquier plugin o sombreado —ya sea creado por ti, compartido por tus compañeros de equipo o encontrado en la Comunidad— es siempre gratis y está disponible en todos los planes. Para indicar al agente que cree plugins o sombreados, necesitas acceso al agente de diseño de Figma y te costará créditos de IA una vez que esté disponible de forma generalizada.

  • Los rellenos de sombreado son dinámicos y generativos: van mucho más allá de los colores lisos y los degradados, e incluyen acuarelas, efectos moiré, cuadrículas de patrones y mucho más.
Interfaz de Figma que muestra un panel de la biblioteca de “Rellenos de sombreado“ junto a una composición gráfica con tipografía en negro y patrones de semitonos en naranja y gris. El panel muestra ajustes predeterminados de sombreado personalizados que incluyen ondas de tramado, semitono fluido, red de partículas y campo magnético, con un cursor seleccionando uno de ellos.Interfaz de Figma que muestra un panel de la biblioteca de “Rellenos de sombreado“ junto a una composición gráfica con tipografía en negro y patrones de semitonos en naranja y gris. El panel muestra ajustes predeterminados de sombreado personalizados que incluyen ondas de tramado, semitono fluido, red de partículas y campo magnético, con un cursor seleccionando uno de ellos.
Juega con rellenos de sombreado como ondas de tramado, semitono fluido, red de partículas y campo magnético.

Los sombreados y los plugins generativos se encuentran en una nueva pestaña de Herramientas, junto con los plugins clásicos, lasherramientas de Weave

Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.

Connecting Figma and Weave

Today, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.

y los widgets. Figma cuenta con más de 30 plugins y sombreados para que puedas empezar, pero los más útiles son aquellos que puedes crear por tu cuenta.

Cuando creas con el agente de diseño, tú decides el tipo de sombreado que quieres crear y qué propiedades necesitas manipular, y el agente lo crea por ti. Pero lo que el agente puede hacer en el lienzo depende totalmente de las herramientas que le proporciones para trabajar.

Panel de plugin Figma titulado “Halftone” sobre una ilustración abstracta con rayas rojas y blancas. El panel muestra controles para el tipo de patrón, la escala, el umbral y el color, mientras que un cursor ajusta un control deslizante para modificar un efecto de semitonos basado en ruido en tiempo real.Panel de plugin Figma titulado “Halftone” sobre una ilustración abstracta con rayas rojas y blancas. El panel muestra controles para el tipo de patrón, la escala, el umbral y el color, mientras que un cursor ajusta un control deslizante para modificar un efecto de semitonos basado en ruido en tiempo real.
Personaliza los controles de tus efectos y rellenos de sombreado.
Imagen abstracta editada con efectos de sombreado superpuestos en Figma. Texturas vibrantes en naranja, morado, rojo y blanco llenan el lienzo, mientras que los controles flotantes etiquetados como “Impresión risográfica“, “Cuadrícula de partículas“ y “Mapa de degradado“ muestran efectos visuales en capas y un procesamiento creativo de la imagen.Imagen abstracta editada con efectos de sombreado superpuestos en Figma. Texturas vibrantes en naranja, morado, rojo y blanco llenan el lienzo, mientras que los controles flotantes etiquetados como “Impresión risográfica“, “Cuadrícula de partículas“ y “Mapa de degradado“ muestran efectos visuales en capas y un procesamiento creativo de la imagen.
Aplica efectos en capas para conseguir los resultados que quieras.
Poder crear tus propias herramientas te permite tener el control: cada una refleja una visión global de lo que debería ser posible.
Anna Zhang, tecnóloga creativa

Aporta más contexto a cada conversación

Un buen contexto no solo informa al agente, también da forma a lo que este crea. Cuanto más cerca esté el agente de tu proyecto, tu marca y tus formas de trabajar, más preciso será el resultado.

  • Adjunta archivos directamente: incluye archivos como una entrevista con un usuario, un documento de texto de UX o un informe de datos en el chat con el agente. El agente los usa como referencia durante toda la conversación, para que el trabajo refleje el contexto y la dirección de tu proyecto.
  • Usa otros archivos de Figma como referencia: cuando pegas un enlace de archivo de Figma, el agente obtiene la estructura completa —componentes, tokens, disposición y estilos— y puede entender y reproducir los patrones de diseño, no solo aproximarse a ellos a partir de una imagen plana.
  • Busca en la web: el agente puede obtener datos en tiempo real sin salir de Figma, como nombres y fotos reales de restaurantes para un listado, patrones de UX actuales de la competencia y contenido actualizado para maquetas realistas.
  • Conecta tus herramientas: los conectores MCP aportan contexto de GitHub, Atlassian, Slack y otras herramientas directamente al agente, y pueden publicar actualizaciones en ellas. Obtén tickets de producto de Linear para orientar el diseño, o consulta datos de Hex sin tener que copiar y pegar.
Lienzo de diseño que muestra una interfaz de mapa de museo con tema oscuro junto a una tarjeta de indicaciones de IA. La tarjeta hace referencia a un archivo CSV adjunto llamado “exhibits.csv“ y contiene la instrucción: “Crea un mapa dinámico de las exposiciones del museo utilizando el estilo y los datos adjuntos“, como ejemplo de generación basada en IA a partir de datos estructurados.Lienzo de diseño que muestra una interfaz de mapa de museo con tema oscuro junto a una tarjeta de indicaciones de IA. La tarjeta hace referencia a un archivo CSV adjunto llamado “exhibits.csv“ y contiene la instrucción: “Crea un mapa dinámico de las exposiciones del museo utilizando el estilo y los datos adjuntos“, como ejemplo de generación basada en IA a partir de datos estructurados.
Adjunta archivos directamente en el chat del agente.
Interfaz de Figma con el menú de conectores desplegado. Las opciones incluyen Atlassian, Dovetail, GitHub, Granola, Hex, Notion y Slack, con Notion resaltado, que ilustra el acceso a herramientas externas conectadas y fuentes de conocimiento..Interfaz de Figma con el menú de conectores desplegado. Las opciones incluyen Atlassian, Dovetail, GitHub, Granola, Hex, Notion y Slack, con Notion resaltado, que ilustra el acceso a herramientas externas conectadas y fuentes de conocimiento..
Incorpora contexto desde herramientas externas al agente.

Amplía tu punto de vista

Las buenas indicaciones transmiten un punto de vista. Las habilidades te permiten guardar esas ideas, compartirlas con tu equipo y poner en práctica tu dirección creativa más allá de tus propios archivos.

  • Crea habilidades personalizadas: las habilidades convierten las indicaciones a las que recurres una y otra vez en comandos de barra reutilizables, ya sea para aplicar una estética concreta, revisar diseños o automatizar algo que ya has resuelto.
  • Publica habilidades para tu equipo: cuando compartes una habilidad, tu forma de pensar pasa a formar parte de la forma de trabajar de todo el equipo. Una filosofía de diseño, una estética característica, una forma de recibir comentarios… todo ello se convierte en algo que cualquier compañero puede implementar, de lo que puede aprender y sobre lo que puede seguir trabajando.
  • Consulta las indicaciones de tus colaboradores: el historial de iteraciones no es solo un registro, es una ventana a la forma de pensar de cada uno. Las conversaciones con los agentes son visibles para los colaboradores del archivo de forma predeterminada, por lo que el proceso se convierte en un recurso compartido. Puedes mantenerlas privadas siempre que lo necesites.
Menú de habilidades y comandos mostrado en una interfaz de chat. Se selecciona un comando personalizado llamado “/contrast-improvements“, que muestra una descripción sobre cómo sustituir combinaciones de colores de bajo contraste por alternativas accesibles que cumplan con las normas WCAG. A continuación, aparece una indicación que pide comprobar todos los diseños utilizando la habilidad seleccionada.Menú de habilidades y comandos mostrado en una interfaz de chat. Se selecciona un comando personalizado llamado “/contrast-improvements“, que muestra una descripción sobre cómo sustituir combinaciones de colores de bajo contraste por alternativas accesibles que cumplan con las normas WCAG. A continuación, aparece una indicación que pide comprobar todos los diseños utilizando la habilidad seleccionada.
Crea y comparte habilidades personalizadas que convierten los flujos de trabajo repetitivos en comandos con un solo clic.

El mejor momento del diseño es cuando lo que tienes en la cabeza aparece en la pantalla. Actualmente, tienes más formas de hacer realidad esa idea. Tu código, tus plugins, tus sombreados, tu contexto… todo en el lienzo de Figma. Eso es lo que te permite el agente de diseño de Figma.

El agente de diseño de Figma está disponible en versión beta abierta para los usuarios de puestos Full de los planes Profesional, Organización y Empresa. Los usuarios con puestos Collab, Dev y View pueden usar el agente en sus borradores. El agente es gratuito durante la fase beta. Realiza pruebas en el archivo de área de pruebas del agente o aprende formas prácticas de usar la IA en tu flujo de trabajo de diseño. Lee más sobre el agente de Figma y los plugins generativos y sombreados en nuestro centro de ayuda.

Gráfico de producto estilo collage que muestra flujos de trabajo de diseño y desarrollo asistidos por IA, con propuestas de creación de plugins, controles de efectos visuales, herramientas de generación de código y componentes de la IU interactivos organizados en un espacio de trabajo creativo.Gráfico de producto estilo collage que muestra flujos de trabajo de diseño y desarrollo asistidos por IA, con propuestas de creación de plugins, controles de efectos visuales, herramientas de generación de código y componentes de la IU interactivos organizados en un espacio de trabajo creativo.

Lee el resumen de Config de Dylan Field, director ejecutivo y cofundador de Figma.

Related articles

Create and collaborate with Figma

Get started for free