Saltar al contenido principal

Conectando Figma y Weave

Itay SchiffCo-founder & Chief Creative Officer, Figma Weave
Gráfico de producto de tres paneles que demuestran la transferencia de estilo potenciada por IA. A la izquierda, una interfaz de “Transferir estilo” muestra una imagen objetivo de personas cargando patinetas y un retrato desenfocado usado como la fuente del estilo. En el centro, un lienzo de flujo de trabajo titulado “Campaña de primavera” muestra un nodo de generación de publicaciones conectado que produce un gráfico para redes sociales con temática floral titulado “Novedades de primavera”. A la derecha, una disposición estilo galería muestra recursos creativos generados, incluyendo una obra de arte de apretón de manos ilustrada y tarjetas de diseño de mercancía, mostrando cómo los estilos transferidos pueden aplicarse a través de una campaña.Gráfico de producto de tres paneles que demuestran la transferencia de estilo potenciada por IA. A la izquierda, una interfaz de “Transferir estilo” muestra una imagen objetivo de personas cargando patinetas y un retrato desenfocado usado como la fuente del estilo. En el centro, un lienzo de flujo de trabajo titulado “Campaña de primavera” muestra un nodo de generación de publicaciones conectado que produce un gráfico para redes sociales con temática floral titulado “Novedades de primavera”. A la derecha, una disposición estilo galería muestra recursos creativos generados, incluyendo una obra de arte de apretón de manos ilustrada y tarjetas de diseño de mercancía, mostrando cómo los estilos transferidos pueden aplicarse a través de una campaña.

Hoy anunciamos nuevas formas en que tus flujos de trabajo creativos de Weave pueden convivir junto a tus marcos de Figma.

Compartir Conectando Figma y Weave

Editor de flujo de trabajo visual con tema oscuro que muestra un proceso de diseño de IA basado en nodos, con tarjetas interconectadas para la generación de imágenes y texto dispuestas en un lienzo grande, una barra lateral de navegación vertical y controles del proyecto que muestran los créditos y las opciones para compartir.Editor de flujo de trabajo visual con tema oscuro que muestra un proceso de diseño de IA basado en nodos, con tarjetas interconectadas para la generación de imágenes y texto dispuestas en un lienzo grande, una barra lateral de navegación vertical y controles del proyecto que muestran los créditos y las opciones para compartir.
Instantánea del cliente: OutSystems

Bruno Figueiredo, diseñador principal del equipo de marca en OutSystems, usa Weave para crear de todo, desde visuales de presentaciones, hasta animaciones, gráficos de eventos y artículos promocionales. Cuando el equipo creó un llavero de peluche basado en su mascota, Neo, Bruno generó un modelo 3D para entregar al fabricante en lugar de depender de un especialista externo.

Ahora, él está usando Weave para evolucionar a Neo él mismo. “Weave es poderoso para procesos exploratorios porque puedo usar múltiples modelos y ver cómo evolucionan las cosas”, dice Bruno. El flujo de trabajo basado en nodos le permite ajustar detalles como el estilo de ilustración, los colores del vestuario y las proporciones del cuerpo. “No podría haber alcanzado este nivel de detalle antes. Puedo tener siete flujos funcionando al mismo tiempo y regresar cuando esté listo para retomarlos”.

En Figma, creemos que el mejor trabajo siempre ocurre de manera abierta, en el lienzo, donde el proceso no solo se hace visible, sino compartido. Nuestra adquisición de Weavy, ahora Figma Weave, el año pasado fue el primer paso para acercar el diseño y la producción creativa en un mismo espacio colaborativo. Con los flujos de trabajo basados en nodos de Weave, el proceso de creación y edición de imágenes, video, audio y 3D se convierte en una secuencia que tú y tus compañeros de equipo pueden revisar, ajustar y repetir.

Hoy incorporamos las herramientas de Weave al lienzo de Figma y los flujos de trabajo de Weave a la comunidad de Figma; y con el nodo de Figma en Weave, que estará disponible muy pronto, tendrás que dedicar menos tiempo a la transición entre el diseño y la producción creativa, y más a perfeccionar tu visión.

Herramientas de Weave en Figma

La primera forma en que Weave se integra a Figma comienza justo donde la mayoría de los diseñadores pasan su tiempo: en nuestro lienzo de diseño, avanzando en su trabajo. A partir de hoy, más de 20 tareas de imagen con IA son accesibles directamente desde el panel izquierdo de Figma Design como herramientas de Weave. Cada herramienta de Weave es un flujo de trabajo de Weave ya creado, integrado en una UI sencilla en Figma Design: transferencias de estilo, sesiones fotográficas de productos, extracción de materiales y dirección de arte en una docena de lenguajes visuales. Piénsalo como el poder y la amplitud creativa de Weave, preparada para ti.

Con Weave, puedes ramificar ideas, remezclar resultados, comparar enfoques y perfeccionar el trabajo en todos los modelos. ¿Nuevo en Weave? Comienza aquí.

¿Necesitas cambiar la relación de aspecto, preparar una sesión fotográfica para un sitio de comercio electrónico o procesar una foto con un estilo Art Nouveau? Elige la herramienta, ingresa tus datos y obtén resultados con calidad de producción, sin tener que escribir tú mismo una instrucción libre. El uso de la herramienta Weave ofrece un resultado consistente en todo momento, por lo que puedes resolver repetidamente casos de uso con solo unos pocos clics. Tú aportas la dirección creativa y el flujo de trabajo se encarga de la ejecución.

No todo el mundo necesita crear un flujo de trabajo desde cero, pero cuando alguien de tu equipo lo haga, ese flujo debería tener un mayor alcance. Pronto, cualquier diseñador podrá publicar sus propios flujos de trabajo como herramientas de Weave directamente en Figma. Define la lógica una vez, compártela con tu equipo o con el mundo, y todos se benefician del razonamiento detrás de ella.

Es genial tener las herramientas de Weave en Figma. Pueden ayudarnos a expandir nuestra fotografía e ilustración existentes para desarrollar nuevas guías de marca o generar maquetas en los estilos que necesitamos.
Bruno Figueiredo, Diseñador principal, OutSystems
Diapositiva 1 de 4
Una interfaz lado a lado que muestra una herramienta de transferencia de estilo de IA. A la izquierda, un modal titulado “Estilo de transferencia” contiene una foto a color de corredores vista desde arriba y una imagen negativa en blanco y negro que se utiliza como fuente del estilo. Un cursor grande apunta al botón azul “Generar”. A la derecha, se muestra el resultado generado dentro del diseño de sitios web, donde la imagen de los corredores se ha transformado utilizando el estilo visual monocromático negativo.Una interfaz lado a lado que muestra una herramienta de transferencia de estilo de IA. A la izquierda, un modal titulado “Estilo de transferencia” contiene una foto a color de corredores vista desde arriba y una imagen negativa en blanco y negro que se utiliza como fuente del estilo. Un cursor grande apunta al botón azul “Generar”. A la derecha, se muestra el resultado generado dentro del diseño de sitios web, donde la imagen de los corredores se ha transformado utilizando el estilo visual monocromático negativo.
Aplica el estilo de una imagen fuente a una imagen objetivo, para que sean consistentes.

Flujos de trabajo de Weave en la comunidad de Figma

Lienzo de flujo de trabajo creativo basado en nodos con tema oscuro para la dirección artística impulsada por IA, que muestra un proceso de ramificación que genera y compara múltiples conceptos de renderización de productos conectados a través de indicaciones, resultados de imágenes y etapas de revisión.Lienzo de flujo de trabajo creativo basado en nodos con tema oscuro para la dirección artística impulsada por IA, que muestra un proceso de ramificación que genera y compara múltiples conceptos de renderización de productos conectados a través de indicaciones, resultados de imágenes y etapas de revisión.
Instantánea del cliente: Taxi Studio

Taxi Studio, una agencia de diseño de marca con sede en Bristol, Inglaterra, configuró un flujo de trabajo de Weave para generar imágenes renderizadas en 3D para una presentación de diseño con su cliente, Carlsberg.

Con tres elementos sencillos —un vaso de cerveza, una hoja de lúpulo y un fondo—, crearon un punto de partida para la imagen de marca y pudieron perfeccionar aún más la iluminación, el ángulo de la cámara y la textura. “Todo esto nos llevó un día, mientras que a un especialista en 3D le habrían tomado semanas y decenas de miles [de dólares] idear todos estos elementos”, dice Jack Goozee, diseñador de Midweight. “Es una gran manera de elevar y agregar riqueza al trabajo, mientras se mantiene el control total”.

Cuando hayas construido tu flujo de trabajo, publicarlo toma solo unos pasos:

1. Abre el menú Compartir en Weave

2. Selecciona “Publicar en la comunidad de Figma”

3. Añade un título, descripción y categoría

4. Sube una miniatura

5. Publica tu plantilla pública

Lo mejor que un diseñador puede compartir con otro no es la pieza terminada, sino el proceso que lo hizo posible. A través de la Comunidad de Figma, ahora puedes publicar y descubrir flujos de trabajo de Weave: las secuencias de pasos y decisiones detrás del resultado creativo. Un flujo de trabajo compartido en la Comunidad se convierte en un recurso al igual que una biblioteca de componentes: algo que otros pueden abrir, comprender, adaptar y utilizar como base. Anuncios automatizados, fotografías de productos desde múltiples ángulos, sistemas de movimiento social, visualizadores de moda, hojas de diseño de personajes, todo allí para construir sobre ello.

Crea un flujo de trabajo que resuelva un problema que sigues encontrando. Publícalo. Deja que la comunidad lo ejecute, que lo hagan suyo. Tu lógica creativa se convierte en el punto de partida de alguien más.

Un gráfico de producto de pantalla dividida. A la izquierda, un editor de flujo de trabajo visual oscuro muestra nodos de IA conectados, incluyendo un nodo de solicitud de texto que se alimenta a un nodo generador de imágenes etiquetado “Gemini 3 (Nano Banana Pro)”. Un gran botón verde lima “Publicar” y una superposición de cursor en la interfaz. A la derecha, la imagen generada ocupa toda la pantalla: una mujer pelirroja con un vestido azul cobalto que fluye con el movimiento se recuesta sobre una alfombra estampada, frente a un fondo de estudio de tonos cálidos con jarrones decorativos y flores secas. La disposición ilustra la publicación de un flujo de trabajo de generación de imágenes impulsado por IA y su resultado.Un gráfico de producto de pantalla dividida. A la izquierda, un editor de flujo de trabajo visual oscuro muestra nodos de IA conectados, incluyendo un nodo de solicitud de texto que se alimenta a un nodo generador de imágenes etiquetado “Gemini 3 (Nano Banana Pro)”. Un gran botón verde lima “Publicar” y una superposición de cursor en la interfaz. A la derecha, la imagen generada ocupa toda la pantalla: una mujer pelirroja con un vestido azul cobalto que fluye con el movimiento se recuesta sobre una alfombra estampada, frente a un fondo de estudio de tonos cálidos con jarrones decorativos y flores secas. La disposición ilustra la publicación de un flujo de trabajo de generación de imágenes impulsado por IA y su resultado.
Construye tu flujo de trabajo de Weave y publícalo en la Comunidad de Figma.
Con Weave, puedes dedicar mucho más tiempo a pensar en tu visión de la marca. Te da la capacidad de explorar libremente y concentrarte en lo que deseas.
Jack Goozee, Diseñador intermedio, Taxi Studio
Instantánea del cliente: NBBJ

En el estudio de arquitectura NBBJ, Weave ayuda a los diseñadores a visualizar conceptos abstractos, generar imágenes en 3D y crear gráficos y diagramados. “La velocidad de adopción es increíble en comparación con otras herramientas,” dice Simon Manning, Líder de integración de Tecnología de diseño. “De manera consistente, los nuevos usuarios de Weave que se capacitan el miércoles pueden producir contenido para el viernes. No tienen problemas porque es lo suficientemente similar a otros flujos de trabajo donde pueden transferir sus habilidades, y también es muy fácil para otras personas del equipo compartir flujos de trabajo”.

El nodo de Figma en práctica

Tomemos como ejemplo la disposición de una marca en Figma: tipografía fijada, cuadrícula configurada y dirección visual totalmente bajo tu control. Cuando se lleva a Weave como un nodo de Figma, se conecta a un CSV de texto traducido y genera una versión localizada para cada región. Un diseño, docenas de resultados, ninguno que se desvíe del estándar que tú estableciste.

Nodo de Figma en Weave

Las herramientas de Weave llevan flujos de trabajo creativos con IA a tu lienzo. El nodo de Figma funciona en la otra dirección: lleva tus marcos de Figma a Weave.

En Config, te ofrecemos un adelanto de lo que está por venir: pega cualquier marco de Figma directamente en el lienzo de Weave como un nodo de Figma. Conéctalo a los nodos anteriores y posteriores de tu flujo de trabajo, y cualquier cambio que realices en el marco en Figma se reflejará en tiempo real en todo tu flujo de trabajo de Weave. Tu diseño y tu proceso creativo avanzan juntos.

Esto cambia lo que puede ser un marco de Figma. No es solo un producto terminado, sino una fuente de datos en tiempo real: una disposición de producto que se integra directamente en una campaña, un marco de marca que impulsa los resultados de la IA a gran escala.

Weave maneja la generación. Figma mantiene el diseño.

Interfaz de producto de pantalla dividida que muestra un diseño conectado a un flujo de trabajo de IA. A la izquierda, se ve una publicación cuadrada para redes sociales titulada “Novedades de primavera” abierta en un editor de diseño, que muestra un retrato de moda sobre un fondo floral. A la derecha, el mismo diseño aparece dentro de un lienzo de flujo de trabajo etiquetado “Campaña de primavera”. Un menú contextual ofrece las opciones “Actualizar Figma Design” o “Revisar actualización”, lo que ilustra la sincronización entre los archivos de diseño y los flujos de trabajo de generación automática de contenido.Interfaz de producto de pantalla dividida que muestra un diseño conectado a un flujo de trabajo de IA. A la izquierda, se ve una publicación cuadrada para redes sociales titulada “Novedades de primavera” abierta en un editor de diseño, que muestra un retrato de moda sobre un fondo floral. A la derecha, el mismo diseño aparece dentro de un lienzo de flujo de trabajo etiquetado “Campaña de primavera”. Un menú contextual ofrece las opciones “Actualizar Figma Design” o “Revisar actualización”, lo que ilustra la sincronización entre los archivos de diseño y los flujos de trabajo de generación automática de contenido.
Inserta marcos de Figma en tus flujos de trabajo de Weave para asegurar que cualquier cambio realizado al diseño original se refleje en tus resultados finales.
Al final, el cliente obtiene un producto mucho mejor porque pudimos investigar más opciones, más a fondo, de lo que habíamos podido hacer antes en la misma cantidad de tiempo.
Paul Audsley, Director principal y CIO, NBBJ

Con las herramientas de Weave, los flujos de trabajo compartibles y el próximo nodo de Figma, estamos unos pasos más cerca de un mundo en el que todos tus archivos de diseño y tus decisiones basadas en nodos coexistirán.

Las herramientas de Weave están en beta abierta y serán gratuitas durante la duración de la fase beta. Una vez que estén generalmente disponibles, las herramientas de Weave en Figma consumirán los créditos de Figma AI. Los flujos de trabajo de Weave están en vivo en la Comunidad de Figma hoy para que explores o intentes publicar el tuyo propio. No pierdas de vista el nodo de Figma en Weave, cuyo lanzamiento está previsto para finales de este verano.

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 de Dylan Field, CEO y cofundador de Figma.

Create and collaborate with Figma

Get started for free