Saltar al contenido principal

El agente de diseño de Figma, ahora con herramientas personalizadas y mayor contexto

Georgia RustManager of Product Management, Figma
Rodrigo DaviesProduct Manager, Figma
Maqueta de un lienzo de diseño para dispositivos móviles en Figma, rodeada 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 plugin de código QR", "Generando capa de código", "Creando sombreador personalizado" y "Verificando el contraste de color", que ilustran los flujos de trabajo de diseño asistidos por IA.Maqueta de un lienzo de diseño para dispositivos móviles en Figma, rodeada 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 plugin de código QR", "Generando capa de código", "Creando sombreador personalizado" y "Verificando el contraste de color", que ilustran los flujos de trabajo de diseño asistidos por IA.

Una indicación te ayuda a comenzar. Las herramientas personalizadas, el contexto real y las habilidades aportan un plus al agente de diseño, para que lo que aparezca en el lienzo realmente se vea como tú lo pensaste.

Compartir El agente de diseño de Figma, ahora con herramientas personalizadas y mayor contexto

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

La diferencia entre un agente que te permite 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 hacer mucho más que solo producir. Puede colaborar.

La colaboración se pone interesante en el propio lienzo de Figma, que permite crear 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.

ahora está disponible para más usuarios en versión beta abierta y te brinda 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 código HTML al lienzo, crean disposiciones de paneles y visualizan datos. Antes, crearlos era un proceso frustrante. "Debía pedirle ayuda a un desarrollador que tal vez no tenía tiempo para ayudarme", recuerda Edward. "Con el tiempo, las herramientas de IA lo hicieron posible, pero de todos modos debía alternar entre diferentes herramientas y flujos de trabajo. Ahora, con el agente incluido en Figma, es mucho más rápido y fácil porque puedo pedir directamente lo que quiero. Pasé de no tener ninguna a tener enormes posibilidades".

Cada persona trabaja a su manera, pero las herramientas de diseño suelen ser iguales para todos. Las disposiciones, las texturas y los efectos están determinados por las funciones que tu herramienta de diseño admite de forma nativa. A partir de hoy, puedes darles forma a tus herramientas así como les das forma a tus diseños. Así tendrás más libertad para experimentar visualmente y compartir lo que creas junto a tu equipo.

Plugins generativos

Un plugin amplía las posibilidades del lienzo de Figma, pero, para crearlo, siempre se necesitaron habilidades técnicas y un entorno de desarrollo que muchos diseñadores no suelen tener. Ahora puedes indicarle al agente de diseño que cree plugins reutilizables.

Como usan PropsKit, estos plugins generativos se ven y se sienten como si fueran nativos de Figma. Además, al estar en el lienzo, te dan un control más directo a medida que iteras. Para todo lo que trascienda Figma Design, como los servicios de IA o las API de terceros, sigue utilizando los plugins clásicos.

Un plugin generador de disposiciones de imágenes te ayuda a organizar tus recursos.
El agente sugirió posibles soluciones para resolver los problemas. Me pareció mágico, porque me hablaba como un desarrollador interesado en ayudarme.
Edward Chechique, diseñador de producto

Efectos de sombreado y rellenos

Instantánea del cliente: Anna Zhang

La tecnóloga creativa Anna Zhang creó sus propios sombreadores para remixear sus propias fotografías con efectos de collage, marmolado, fugas de luz, relieve metálico y prismas. "Es una forma de ampliar lo que he estado haciendo hasta ahora, o de crear un flujo de trabajo reutilizable", señala. "Hay mucho potencial expresivo desde un solo punto de partida".

Anna se centró en la funcionalidad y dejó que el agente se encargara de la interfaz de usuario: "Fue un diálogo de ida y vuelta entre el agente y yo. Y lo que generaba determinaba los parámetros que yo añadiría más tarde. Fue como una negociación".

El agente también puede crear sombreadores, pequeños programas personalizables que funcionan con 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.

y que determinan cómo se renderizan los píxeles. Piensa en tramado, metal líquido y ruido fractal. Están disponibles en dos versiones:

  • Los efectos de sombreado son similares a los efectos nativos de Figma, pero tú eres quien los crea, como el estiramiento de partículas, la distorsión de lente, el esquema de color y mucho más. Puedes superponerlos, ajustar sus propiedades y combinarlos con efectos nativos para obtener el resultado que desees.

El uso de cualquier plugin o sombreador, ya sea creado por ti, compartido por un compañero de equipo o encontrado en la comunidad de Figma, siempre es gratuito y está disponible en todos los planes. Para que el agente cree plugins o sombreadores, necesitas tener acceso al agente de diseño de Figma. Cuando esté disponible para el público en general, esto tendrá un costo en créditos de IA.

  • Los rellenos de sombreado son dinámicos y generativos: superan ampliamente los colores sólidos y los gradientes e incluyen efectos de acuarela, moiré, cuadrículas de patrones y mucho más.
Interfaz de Figma que muestra un panel de la biblioteca "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 sombreadores personalizados, entre los que se incluyen ondas de tramado, semitonos fluidos, red de partículas y campo magnético, con un cursor que selecciona uno de ellos.Interfaz de Figma que muestra un panel de la biblioteca "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 sombreadores personalizados, entre los que se incluyen ondas de tramado, semitonos fluidos, red de partículas y campo magnético, con un cursor que selecciona uno de ellos.
Juega con rellenos de sombreado, como ondas de tramado, semitonos fluidos, redes de partículas y campos magnéticos.

Los sombreadores y los plugins generativos se encuentran en una nueva pestaña llamada Herramientas, junto con los plugins clásicos, las herramientas 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 tiene más de 30 plugins y sombreadores para comenzar, pero los más útiles son los que tú mismo creas.

Cuando creas con el agente de diseño, tú decides qué tipo de sombreador quieres generar y qué propiedades necesitas manipular. El agente lo genera por ti. Pero lo que el agente pueda hacer en el lienzo dependerá de lo que tú le proporciones para trabajar.

Panel del plugin de Figma denominado "Semitono" sobre una obra de arte 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 en tiempo real un efecto de semitonos basado en ruido.Panel del plugin de Figma denominado "Semitono" sobre una obra de arte 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 en tiempo real un efecto de semitonos basado en ruido.
Personaliza los controles de tus efectos de sombreado y rellenos.
Imagen abstracta editada con efectos de sombreado combinados en Figma. El lienzo se llena de texturas vibrantes en naranja, morado, rojo y blanco, mientras que los controles flotantes con las etiquetas "Impresión Riso", "Cuadrícula de partículas" y "Mapa de gradiente" muestran efectos visuales en capas y el procesamiento creativo de imágenes.Imagen abstracta editada con efectos de sombreado combinados en Figma. El lienzo se llena de texturas vibrantes en naranja, morado, rojo y blanco, mientras que los controles flotantes con las etiquetas "Impresión Riso", "Cuadrícula de partículas" y "Mapa de gradiente" muestran efectos visuales en capas y el procesamiento creativo de imágenes.
Efectos en capas para obtener los resultados que deseas.
El hecho de poder crear tus propias herramientas te permite tener el control. Cada una de ellas refleja una visión del mundo sobre lo que debería ser posible.
Anna Zhang, tecnóloga creativa

Aporta más contexto a cada conversación

Un buen contexto no solo le brinda información al agente, sino que además le da forma a lo que crea. Cuanto más familiarizado esté el agente con tu proyecto, tu marca y tu forma de trabajar, más preciso será el resultado.

  • Adjunta archivos directamente: Arrastra y suelta archivos en el chat del agente, como una entrevista con un usuario, un documento de copy UX o un informe de datos. El agente los tomará como referencia a lo largo de la conversación, de modo que el trabajo refleje el contexto y la orientación de tu proyecto.
  • Usa otros archivos de Figma como referencia: Si pegas el enlace a un archivo de Figma, el agente accederá a la estructura completa (componentes, tokens, diseño y estilos) y podrá comprender y reproducir los patrones de diseño, en lugar de limitarse a generar un resultado aproximado a partir de una imagen plana.
  • Busca en la web: El agente accede a datos en tiempo real sin salir de Figma, como nombres y fotos reales de restaurantes para un anuncio, patrones actuales de UX de la competencia y contenido actualizado, para crear maquetas realistas.
  • Conecta tus herramientas: Los conectores MCP incorporan información contextual de GitHub, Atlassian, Slack y otras herramientas directamente en el agente. Incluso pueden enviar actualizaciones a esas plataformas. Obtén tickets de productos de Linear para orientar un diseño o consulta datos de Hex sin necesidad de 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 menciona 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", lo que demuestra la generación basada en inteligencia artificial 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 menciona 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", lo que demuestra la generación basada en inteligencia artificial a partir de datos estructurados.
Adjunta archivos directamente en el chat del agente.
Interfaz de Figma con el menú de conectores desplegado. Entre las opciones se encuentran Atlassian, Dovetail, GitHub, Granola, Hex, Notion y Slack, con Notion destacado, para ilustrar el acceso a herramientas externas conectadas y fuentes de conocimiento.Interfaz de Figma con el menú de conectores desplegado. Entre las opciones se encuentran Atlassian, Dovetail, GitHub, Granola, Hex, Notion y Slack, con Notion destacado, para ilustrar el acceso a herramientas externas conectadas y fuentes de conocimiento.
Transfiere contexto desde herramientas externas al agente.

Amplía tu punto de vista

Las buenas indicaciones transmiten un punto de vista. Las habilidades te permiten conservar 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 instrucciones que usas constantemente en comandos de barra reutilizables, ya sea para aplicar una estética específica, revisar diseños o automatizar algo que ya aprendiste a hacer.
  • Publica habilidades para tu equipo: Comparte una habilidad y tu forma de pensar se integrará en la manera de trabajar de todo el equipo. Tanto una filosofía de diseño, como una estética distintiva o una perspectiva basada en feedback pueden convertirse en algo que cualquier miembro del equipo sea capaz de implementar, tomar de referencia y desarrollar.
  • Ve las indicaciones de tus colaboradores: El historial de iteraciones no es un simple registro, sino una ventana al modo de pensar de cada persona. De forma predeterminada, las conversaciones con los agentes son visibles para quienes colaboran en tu archivo, lo que convierte el proceso en un recurso compartido. Hazlas privadas cuando lo necesites.
Menú de habilidades y comandos en una interfaz de chat. Se selecciona un comando personalizado llamado "/contrast-improvements", que muestra una descripción sobre cómo reemplazar combinaciones de colores de bajo contraste por alternativas accesibles que cumplan con las normas WCAG. A continuación, aparece una indicación que solicita verificar todos los diseños utilizando la habilidad seleccionada.Menú de habilidades y comandos en una interfaz de chat. Se selecciona un comando personalizado llamado "/contrast-improvements", que muestra una descripción sobre cómo reemplazar combinaciones de colores de bajo contraste por alternativas accesibles que cumplan con las normas WCAG. A continuación, aparece una indicación que solicita verificar todos los diseños utilizando la habilidad seleccionada.
Crea y comparte habilidades personalizadas que conviertan los flujos de trabajo repetitivos en comandos de un solo clic.

El mejor momento en el diseño es cuando lo que tienes en mente aparece en la pantalla. Hoy en día, tienes más formas de materializar tus ideas. Tu código, tus plugins, tus sombreadores, tu contexto: todo está en el lienzo de Figma. Eso es lo que el agente de diseño de Figma te permite alcanzar.

El agente de diseño de Figma está disponible en versión beta abierta para los usuarios de puestos Full en los planes Profesional, Organización y Empresa. Los puestos Collab, Dev y View pueden utilizar el agente en sus borradores. El agente es gratuito durante la fase beta. Experimenta 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. Obtén más información sobre el agente de Figma, así como sobre los plugins generativos y los sombreadores, 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 indicaciones de 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.Gráfico de producto estilo collage que muestra flujos de trabajo de diseño y desarrollo asistidos por IA, con indicaciones de 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.

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

Related articles

Create and collaborate with Figma

Get started for free