Código en el lienzo de Figma
Con las capas de código de Figma Design, puedes explorar múltiples direcciones con código, en paralelo con tu equipo.
Compartir Código en el lienzo de Figma
Los agentes han ampliado las posibilidades de quién puede crear y qué se puede crear. Pero, con demasiada frecuencia, el proceso para llegar hasta ahí se lleva a cabo en solitario, en chats separados, con flujos de trabajo inconexos y una exploración aislada.
Empezar es sencillo:
En Figma Design, añade una capa de código desde la barra de herramientas, crea una a partir de un marco ya existente o pide al asistente de Figma que genere una. A partir de ahí, empieza con una plantilla o describe aquello que quieres crear. También puedes incorporar un código ya existente: importa un repositorio de GitHub o sube directamente una carpeta local.
En Make, genera y edita el código, y después incorpóralo al lienzo como una capa de código para poder explorarlo, compararlo y perfeccionarlo con tu equipo.
Con las capas de código en Figma Design, el código interactivo pasa a formar parte del propio lienzo, haciendo que sea más fácil para los equipos explorar, iterar y desarrollar ideas juntos en el mismo lugar.
Considera todas tus alternativas
Los diseñadores siempre han duplicado marcos para probar alternativas; las capas de código funcionan igual. Las experiencias de trabajo pueden plasmarse en el lienzo para que puedas comparar cómo se perciben realmente las opciones, no solo cómo se ven. Mueve, ajusta y cambia el tamaño de los elementos y obtén una respuesta inmediata del código. Continúa iterando con indicaciones y el agente generará una nueva versión conservando la original. Como las capas de código están en tu archivo compartido, tus compañeros de equipo pueden participar, dejar comentarios y dar indicaciones sobre la misma capa.
Muévete de un material a otro
Las capas de código permiten explorar el software. Al seleccionar extraer diseños, puedes hacer que el código resulte comprensible a simple vista convirtiendo el estado actual de nuevo en capas editables de Figma. Tú decides qué aparece en el lienzo: una sola pantalla, un estado específico o un flujo completo. A partir de ahí, con un solo clic se actualiza la capa de código con tus cambios. Así puedes trabajar con fluidez entre el lienzo y el código.
Usa tu criterio para perfeccionar
Cuando quieras añadir más detalles, puedes hacer anotaciones en el editor de código y pedirle al agente que haga el cambio que deseas, o bien hacer clic y editarlo tú mismo. Una vez que esté todo a tu gusto, vuelve a convertirlo a la capa de código y envía los cambios a tu repositorio para que el código fuente refleje los cambios que has decidido implementar. Ahora todo tu equipo podrá ver la actualización.
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 que desarrollar.
Las capas de código se están desplegando 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.
Lee el resumen de Config de Dylan Field, director ejecutivo y cofundador de Figma.
