Saltar al contenido principal

Programar en el lienzo de Figma

Nikolas KleinProduct Manager, Figma
Concepto de producto con pantalla dividida que muestra, una a una, una página web de la exposición, una interfaz generada para la reserva de boletos y la implementación del código React correspondiente, lo que ilustra un flujo de trabajo desde el diseño hasta el código.Concepto de producto con pantalla dividida que muestra, una a una, una página web de la exposición, una interfaz generada para la reserva de boletos y la implementación del código React correspondiente, lo que ilustra un flujo de trabajo desde el diseño hasta el código.

Con las capas de código en Figma Design, puedes explorar múltiples direcciones con programar, junto a tu equipo.

Compartir Programar en el lienzo de Figma

Los agentes han ampliado quién puede construir y qué es posible crear. Pero con demasiada frecuencia, el proceso para llegar allí sucede solo, en chats separados, flujos de trabajo desconectados y exploración aislada.

Comenzar es flexible:

En Figma Design, agrega una capa de código desde la barra de herramientas, crea una a partir de un marco existente o pídele al asistente de Figma que genere una. Desde ahí, comienza desde una plantilla o describe lo que quieres construir. También puedes incorporar una base de código existente: importa un repositorio de GitHub o sube una carpeta local directamente.

En Make, genera y edita el código, y luego colócalo en el lienzo como una capa de código para explorarlo, compararlo y perfeccionarlo junto con tu equipo.

Con las capas de código en Figma Design, el código interactivo se integra directamente en el lienzo, lo que facilita que los equipos exploren, perfeccionen y den forma a sus ideas juntos en un mismo lugar.

Explora opciones con capas de código en el lienzo de Figma.

Entretén todas tus alternativas

Los diseñadores siempre han duplicado marcos para probar alternativas; las capas de código funcionan de la misma manera. Las experiencias de trabajo pueden vivir en el lienzo, para que puedas comparar cómo se sienten las opciones realmente, no solo cómo se ven. Mueve, ajusta y cambia el tamaño de los elementos y obtén una respuesta de código inmediata. Sigue iterando con las indicaciones y el agente generará una nueva versión, conservando la original. Dado que las capas de código existen en tu archivo compartido, los compañeros de equipo pueden intervenir, dejar comentarios e indicaciones en la misma capa.

Un diseño de mapa con un marcador de ubicación, junto a un menú en el que aparece resaltada la opción “Crear esto con código”.Un diseño de mapa con un marcador de ubicación, junto a un menú en el que aparece resaltada la opción “Crear esto con código”.
Convierte cualquier marco en el lienzo en código funcional pidiéndole al agente que lo construya por ti.

Alterna entre tus materiales

Las capas de código hacen que el software sea exploratorio. Al seleccionar extraer diseños puedes hacer que el código sea visualmente comprensible al convertir el estado actual de nuevo en capas editables de Figma. Decides qué aparece en el lienzo: una sola pantalla, un estado específico, o un flujo completo. Desde allí, un clic actualiza la capa de código con tus ediciones. Así puedes trabajar fluidamente entre el lienzo y el código.

Dos maquetas de apps móviles en una herramienta de diseño, con una barra de herramientas que dice “Extraer diseños” y “Abrir el editor de código”.Dos maquetas de apps móviles en una herramienta de diseño, con una barra de herramientas que dice “Extraer diseños” y “Abrir el editor de código”.
Extrae flujos y estados clave del código al lienzo como capas de diseño editables.

Refina con tu criterio

Si quieres ser más específico, puedes agregar anotaciones en el editor de código y pedirle al agente que realice el cambio que deseas, o bien hacer clic en el código y editarlo tú mismo. Cuando estés satisfecho, vuelve a convertirlo a la capa de código y súbelo a tu repositorio para que el código fuente refleje los cambios que acabas de implementar. Ahora todo tu equipo puede ver la actualización.

Un editor de código que muestra el código de React, App.tsx, superpuesto a un diseño oscuro de página de evento.Un editor de código que muestra el código de React, App.tsx, superpuesto a un diseño oscuro de página de evento.
Realiza cambios en el código generado en el editor de código.

Con las capas de código en Figma Design, el lienzo se convierte en un espacio compartido donde el diseño y el código evolucionan juntos: un lugar para probar cosas, compararlas y dar con la idea adecuada para desarrollar.

Las capas de código se están lanzando en beta cerrada durante las próximas semanas. Regístrate aquí para solicitar acceso anticipado. Visita nuestro centro de ayuda para ver un resumen de lo que lanzamos en Config y cómo comenzar. Encuentra respuestas e inspiración sobre todo lo relacionado con Figma en Figma Learn.

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.

Related articles

Create and collaborate with Figma

Get started for free