Saltar hasta el contenido principal

Conectar Figma y Weave

Itay SchiffCo-founder & Chief Creative Officer, Figma Weave
Gráfico de producto de tres paneles que muestra la transferencia de estilos basada en IA. A la izquierda, una interfaz de ”Transferencia de estilos” muestra una imagen final de personas con monopatines y un retrato borroso que sirve de fuente de estilo. En el centro, un lienzo de flujo de trabajo titulado ”Campaña de primavera” muestra un nodo de posgeneración conectado que produce un gráfico para redes sociales con temática floral titulado ”Novedades de primavera”. A la derecha, una disposición tipo galería muestra los recursos creativos generados, como una ilustración de un apretón de manos y tarjetas con diseños de artículos promocionales, mostrando cómo se pueden aplicar los estilos transferidos a lo largo de una campaña.Gráfico de producto de tres paneles que muestra la transferencia de estilos basada en IA. A la izquierda, una interfaz de ”Transferencia de estilos” muestra una imagen final de personas con monopatines y un retrato borroso que sirve de fuente de estilo. En el centro, un lienzo de flujo de trabajo titulado ”Campaña de primavera” muestra un nodo de posgeneración conectado que produce un gráfico para redes sociales con temática floral titulado ”Novedades de primavera”. A la derecha, una disposición tipo galería muestra los recursos creativos generados, como una ilustración de un apretón de manos y tarjetas con diseños de artículos promocionales, mostrando cómo se pueden aplicar los estilos transferidos a lo largo de una campaña.

Hoy anunciamos nuevas formas de combinar tus flujos de trabajo creativos de Weave con tus marcos de Figma.

Compartir Conectar 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 de 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 de 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 de OutSystems, usa Weave para crear de todo, desde imágenes para presentaciones hasta animaciones, pasando por gráficos para eventos y material promocional. Cuando el equipo creó un llavero de peluche basado en su mascota, Neo, Bruno generó un modelo 3D para enviárselo al fabricante, en lugar de recurrir a un especialista externo.

Ahora, está usando Weave para seguir desarrollando al propio Neo. “Weave es una herramienta increíble para los procesos exploratorios porque puedo usar múltiples modelos y observar cómo van evolucionando las cosas”, dice Bruno. El flujo de trabajo basado en nodos le permite ajustar detalles como el estilo de las ilustraciones, los colores del vestuario y las proporciones corporales. “Antes no habría podido alcanzar este nivel de detalle. Puedo tener siete flujos funcionando a la vez y volver a ellos cuando esté listo para retomarlos”.

En Figma, creemos que el mejor trabajo siempre surge de forma abierta: en el lienzo, donde el proceso no solo se hace visible, sino que se comparte. 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 podéis revisar, ajustar y repetir.

Hoy incorporamos las herramientas de Weave al lienzo de Figma y los flujos de trabajo de Weave a Figma Community; y con el nodo de Figma en Weave, que llegará dentro de poco, 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

Weave llega a Figma primero donde la mayoría de los diseñadores pasan su tiempo: en nuestro lienzo de diseño, para que el trabajo avance. A partir de hoy, puedes acceder a más de 20 tareas de imágenes con IA directamente desde el panel izquierdo de Figma Design comoherramientas de Weave. Cada herramienta de Weave es un flujo de trabajo de Weave prediseñado, integrado en una IU sencilla dentro de Figma Design: transferencias de estilo, sesiones fotográficas de productos, extracción de materiales y dirección artística en una docena de lenguajes visuales. Es como tener todo el potencial y la variedad creativa de Weave, configurados especialmente para ti.

Con Weave puedes ramificar ideas, combinar resultados, comparar enfoques y perfeccionar tu trabajo en distintos modelos. ¿No conoces Weave? Empieza aquí.

¿Necesitas cambiar la relación de aspecto, crear una sesión fotográfica para un comercio electrónico o retocar una foto al estilo Art Nouveau? Elige la herramienta, añade tus datos y obtén un resultado con calidad profesional, sin necesidad de escribir ninguna indicación libre. La herramienta Weave te ofrece un resultado consistente en todo momento, para que puedas resolver una y otra vez casos prácticos con solo unos 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 hace, debería poder compartirlo. 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 entero, y todos se beneficiarán del razonamiento que hay detrás.

Es fantástico contar con las herramientas de Weave en Figma. Nos ayudan a ampliar nuestras fotografías e ilustraciones existentes para desarrollar nuevas directrices de marca o crear maquetas con los estilos que necesitamos.
Bruno Figueiredo, diseñador principal, OutSystems
Diapositiva 1 de 4
Interfaz comparativa que muestra una herramienta de transferencia de estilos basada en IA. A la izquierda, una ventana emergente con el título ”Estilo de transferencia” muestra una foto en color de unos corredores vista desde arriba y una imagen negativa en blanco y negro que sirve de fuente para el estilo. Un cursor grande señala el botón azul ”Generar”. A la derecha, el resultado generado aparece dentro del diseño de sitios web, donde la imagen de los corredores se ha transformado utilizando el estilo visual monocromo negativo.Interfaz comparativa que muestra una herramienta de transferencia de estilos basada en IA. A la izquierda, una ventana emergente con el título ”Estilo de transferencia” muestra una foto en color de unos corredores vista desde arriba y una imagen negativa en blanco y negro que sirve de fuente para el estilo. Un cursor grande señala el botón azul ”Generar”. A la derecha, el resultado generado aparece dentro del diseño de sitios web, donde la imagen de los corredores se ha transformado utilizando el estilo visual monocromo negativo.
Aplica el estilo de una imagen original a una imagen final para que tengan un aspecto coherente.

Flujos de trabajo de Weave en Figma Community

Lienzo de flujo de trabajo creativo basado en nodos, con tema oscuro, para la dirección artística basada en IA, que muestra un proceso ramificado para generar y comparar varios conceptos de renderizado de productos conectados a través de indicaciones, resultados de imágenes y fases de revisión.Lienzo de flujo de trabajo creativo basado en nodos, con tema oscuro, para la dirección artística basada en IA, que muestra un proceso ramificado para generar y comparar varios conceptos de renderizado de productos conectados a través de indicaciones, resultados de imágenes y fases de revisión.
Instantánea del cliente: Taxi Studio

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

Con solo tres elementos básicos —un vaso de cerveza, una hoja de lúpulo y un fondo—, crearon una base para las imágenes de marca y pudieron ir perfeccionando 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 hecho falta semanas y decenas de miles para idear estos elementos”, dice Jack Goozee, diseñador de nivel medio. “Es una forma excelente de mejorar y enriquecer el trabajo, sin perder el control en ningún momento”.

Cuando hayas creado tu flujo de trabajo, publicarlo es cuestión de unos pocos pasos:

1. Abre el menú Compartir en Weave

2. Selecciona “Publicar en Figma Community”

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

4. Sube una miniatura

5. Publica tu plantilla pública

Lo mejor que un diseñador puede compartir con otro no es el trabajo terminado, sino el proceso que lo hizo posible. A través de Figma Community, ahora puedes publicar y descubrir flujos de trabajo de Weave: las secuencias de pasos y decisiones que hay detrás de cada creación. Un flujo de trabajo compartido en la Comunidad se convierte en un recurso, igual que una biblioteca de componentes: algo que otros pueden abrir, entender, adaptar y utilizar como base. Anuncios automatizados, fotos de productos desde múltiples ángulos, sistemas de movimiento para redes sociales, visualizadores de moda, hojas de diseño de personajes. Todo a tu alcance para que lo aproveches.

Crea un flujo de trabajo que resuelva un problema con el que te topas constantemente. Publícalo. Deja que la comunidad lo pruebe y se apropie de él. Tu lógica creativa se convierte en la base para otra persona.

Gráfico de producto en pantalla dividida. A la izquierda, un editor visual de flujo de trabajo con tema oscuro muestra nodos de IA conectados, incluido un nodo de indicación de texto que alimenta a un nodo de generación de imágenes etiquetado como “Gemini 3 (Nano Banana Pro)“. Un gran botón verde lima con la palabra “Publicar“ y el cursor se superponen a la interfaz. A la derecha, la imagen generada ocupa toda la pantalla: una mujer pelirroja con un vestido azul cobalto que le cae suelta está recostada sobre una alfombra estampada, con un fondo de estudio en tonos cálidos, jarrones decorativos y flores secas. La disposición ilustra la publicación de un flujo de trabajo de generación de imágenes basado en IA y el resultado final.Gráfico de producto en pantalla dividida. A la izquierda, un editor visual de flujo de trabajo con tema oscuro muestra nodos de IA conectados, incluido un nodo de indicación de texto que alimenta a un nodo de generación de imágenes etiquetado como “Gemini 3 (Nano Banana Pro)“. Un gran botón verde lima con la palabra “Publicar“ y el cursor se superponen a la interfaz. A la derecha, la imagen generada ocupa toda la pantalla: una mujer pelirroja con un vestido azul cobalto que le cae suelta está recostada sobre una alfombra estampada, con un fondo de estudio en tonos cálidos, jarrones decorativos y flores secas. La disposición ilustra la publicación de un flujo de trabajo de generación de imágenes basado en IA y el resultado final.
Crea tu flujo de trabajo en Weave y publícalo en Figma Community.
Con Weave, puedes dedicar mucho más tiempo a pensar en tu visión de la marca. Te permite explorar libremente y centrarte en lo que realmente quieres.
Jack Goozee, diseñador de nivel medio, 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 diagramas. “La rapidez con la que se aprende a usarlo es asombrosa en comparación con otras herramientas”, dice Simon Manning, responsable de integración de tecnologías de diseño. “Los nuevos usuarios de Weave que reciben formación un miércoles suelen ser capaces de crear contenido con la herramienta ya el viernes. No tienen ningún problema porque es lo suficientemente parecido a otros flujos de trabajo como para que puedan aplicar sus conocimientos, y además es muy fácil para el resto del equipo compartirlos”.

El nodo de Figma en la práctica

Piensa, por ejemplo, en la disposición de una marca en Figma: tipografía fijada, cuadrícula configurada y dirección visual totalmente controlada por ti. Cuando lo importas a Weave como un nodo de Figma, se conecta a un archivo CSV con el texto traducido y genera una versión localizada para cada región. Un solo diseño, docenas de resultados, y ninguno se desvía del estándar que has creado.

Nodo de Figma en Weave

Las herramientas de Weave incorporan flujos de trabajo creativos basados en IA a tu lienzo. El nodo de Figma funciona al revés: incorpora tus marcos de Figma a Weave.

En Config, te ofrecemos un primer 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 hagas en el marco de Figma se reflejará en tiempo real en todo tu flujo de trabajo de Weave. Tu diseño y tu proceso creativo avanzan al unísono.

Esto cambia el concepto de lo que puede ser un marco de Figma. No es solo un artefacto acabado, 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 permite generar resultados de IA a gran escala.

Weave se encarga de la generación. Figma se encarga del diseño.

Interfaz de producto en pantalla dividida que muestra un diseño conectado a un flujo de trabajo de IA. A la izquierda, un diseño cuadrado para una publicación en redes sociales titulado “Novedades de primavera“ está abierto en un editor de diseño, con 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 como “Campaña de primavera“. Un menú contextual ofrece las opciones “Actualizar el diseño de Figma“ o “Revisar la actualización“, que ilustran la sincronización entre los archivos de diseño y los flujos de trabajo de generación automática de contenido.Interfaz de producto en pantalla dividida que muestra un diseño conectado a un flujo de trabajo de IA. A la izquierda, un diseño cuadrado para una publicación en redes sociales titulado “Novedades de primavera“ está abierto en un editor de diseño, con 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 como “Campaña de primavera“. Un menú contextual ofrece las opciones “Actualizar el diseño de Figma“ o “Revisar la actualización“, que ilustran la sincronización entre los archivos de diseño y los flujos de trabajo de generación automática de contenido.
Incorpora marcos de Figma en tus flujos de trabajo de Weave para asegurarte de que cualquier cambio que se haga en el diseño original se refleje en tus resultados finales.
Al final, el cliente obtiene un producto mucho mejor porque hemos podido explorar más opciones, y con mayor profundidad, de lo que habíamos podido hacer antes en el mismo tiempo.
Paul Audsley, director y responsable de tecnologías de la información de NBBJ

Con las herramientas de Weave, los flujos de trabajo colaborativos y el próximo nodo de Figma, estamos un poco más cerca de un mundo donde todos tus archivos de diseño y tus decisiones basadas en nodos coexistan.

Las herramientas Weave están en fase beta abierta y podrás usarlas gratis el tiempo que dure la beta. Cuando estén disponibles de forma generalizada, las herramientas de Weave en Figma consumirán créditos de Figma AI. Los flujos de trabajo de Weave ya están disponibles en Figma Community para que los explores o, si quieres, publiques los tuyos propios. No te pierdas 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 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