Diseña junto con las capas de código en el lienzo

Diseñar con código te permite ver cómo se percibe y cómo funciona una experiencia, desde las microinteracciones hasta los flujos completos. Pero cuando cada uno trabaja por su cuenta con sus propias herramientas de programación, puede parecer que estás diseñando de forma aislada, lo que dificulta compartir el trabajo o comparar alternativas.

Es por eso que a principios de este año introdujimos las capas de código, incorporando el código al lienzo compartido de Figma. Antes, explorar el código significaba trabajar en un IDE, algo que no se ajusta a la forma en que muchos usuarios de Figma quieren trabajar. Las capas de código permiten a los equipos crear visualmente con código, con todas las herramientas de colaboración que ofrece el lienzo de Figma. Los compañeros de equipo pueden probar prototipos en paralelo, dejar comentarios junto a ellos o duplicar una capa de código para explorar sus propias ideas, todo en un mismo lugar. Tanto si estás convirtiendo diseños existentes en código funcional, importando un prototipo codificado desde una herramienta de terceros, una carpeta local o GitHub, como si estás capturando lo que hay en tu página web con la extensión de Chrome, las capas de código te permiten seguir creando en el lienzo.

Infórmate sobre todo lo que se lanza esta semana.

Crea a partir de tu trabajo previo

Cuando estás explorando una nueva idea de producto, a veces es útil empezar desde cero. Otras veces, como cuando estás pensando en una nueva función o flujo, es más eficiente partir de tu código base ya existente. Las capas de código te ofrecen varias formas de partir del trabajo previo. Importa un código base de creación de prototipos sencillo y compatible desde GitHub o una carpeta local para seguir desarrollando a partir de las pantallas e interacciones que ya tienes. Cuando importas desde GitHub, la capa de código permanece conectada a ese repositorio.

Por ejemplo, en Cox Automotive, que ofrece software y servicios para concesionarios de coches, la gerente de producto sénior Lindsay Brechler incorporó un prototipo HTML ya existente a las capas de código para que todas las partes interesadas se pusieran de acuerdo sobre una nueva función. Dado que todas las versiones se quedaban en el lienzo, Lindsay podía retomar cualquiera de ellas y seguir iterando sin tener que empezar desde cero. “De iteración en iteración, las capas de código mantienen muy bien unidas todas las pantallas y las interacciones”, dice Lindsay.

También puedes convertir un diseño de Figma en una capa de código interactiva. En Rocket Money, Derek Onay, diseñador jefe de productos para sistemas de diseño, usa este método para compartir ideas iniciales con su equipo. Cuando el equipo estaba creando los componentes básicos de las pantallas, era importante definir las interacciones y la accesibilidad desde el principio, antes de que afectaran a los usuarios del producto. Derek creó un concepto en una capa de código para impulsar esas conversaciones. “Con las capas de código, el verdadero valor está en poder comunicar mejor las ideas y conseguir que todas las partes interesadas estén de acuerdo”, dice. “Puedo compartir un prototipo funcional y reunirme con mi equipo justo donde ya están, en Figma”.

Más allá del código y los diseños existentes, puedes importar un prototipo desde tu herramienta de programación al lienzo a través del servidor MCP de Figma, o capturar tu página web en tiempo real como una capa de código con la extensión de Chrome en Figma.

Explora y crea conjuntamente

Cuando trabajas con agentes de programación en un IDE, es fácil quedarte con tu primera idea antes de considerar las alternativas. Con las capas de código, puedes tener varias versiones de un prototipo en el lienzo al mismo tiempo: tú y tu equipo podéis duplicar un prototipo, probar un enfoque diferente y comparar ambas versiones sin tener que cambiar de una a otra.

Miguel Wermuth, diseñador de productos en Dell Technologies, trabaja en la experiencia de los clientes, tanto de empresas como de los que compran en dell.com, en dispositivos móviles, tabletas y ordenadores de escritorio. Utiliza capas de código para crear experiencias de IA conversacional en el lienzo, en las que una parte interesada puede escribir una pregunta y el prototipo responde con la pantalla adecuada. Una vez que sus compañeros diseñadores aprueban un flujo, Miguel lo desarrolla en capas de código para que lo den el visto bueno las partes interesadas del negocio, a quienes les resulta más fácil seguir un prototipo funcional que una serie de pantallas estáticas. Para comparar versiones, duplica las capas de código una al lado de la otra en el lienzo. “Con las capas de código, puedo trabajar con el código mientras diseño en el lienzo. Es realmente útil poder alternar más fácilmente entre el diseño y el código”.

Pero no se trata solo de evaluar una única dirección; las capas de código te permiten tomar distancia y ver la experiencia del producto de forma integral. Como dice Matt Davey, director de experiencias de 1Password: “El verdadero superpoder de Figma siempre ha sido el lienzo. Es como cuando solíamos imprimir todas las páginas de un sitio web y pegarlas en una pizarra. Poder ver todos estos elementos de la IU juntos tiene un valor increíble”.

Perfecciona sin perder código

A medida que vas perfeccionando una idea, las capas de código te permiten realizar ajustes de diseño y aplicarlos al prototipo funcional. Para los cambios visuales que prefieras hacer directamente, la función Extraer diseños convierte una pantalla o un flujo de una capa de código en capas de Figma editables.

En Checkout.com, Kris Murphy, diseñador sénior de producto, trabaja en productos que las empresas integran en sus propias experiencias del cliente. Cuando un cliente potencial quiso ver la tecnología en acción, Kris creó una demo en capas de código. “Las capas de código me ayudaron a crear la demo un 50 % más rápido, y eso que aún no estoy del todo familiarizado con la herramienta”, explica Kris. Antes de compartir la demo con un cliente, Kris quería asegurarse de que todas las pantallas estuvieran pulidas. En lugar de ir pasando pantalla por pantalla por el prototipo, sacó todas las pantallas de la capa de código y las colocó en el lienzo de Figma. Desde ahí, fue fácil revisarlas una al lado de la otra para detectar y arreglar cualquier cosa que hubiera que retocar. Después, Kris volvió a enviar esos cambios a las capas de código, y el equipo de Checkout.com también pudo revisar todo el flujo de modificaciones realizadas en el lienzo. “Las capas de código son como un puente perfecto entre el diseño y el desarrollo”, dice. “Me han ayudado a generar ideas y a entregarlas rápidamente”.

Otras opciones de edición incluyen comentar directamente en un prototipo, añadir anotaciones a los marcos del prototipo para indicarle al agente dónde hay que hacer un cambio, o inspeccionar y editar el código directamente. Además, la experiencia a pantalla completa, recién actualizada, te permite trabajar en varios hilos con el agente para diferentes partes del proyecto.

Cuando quieras compartir tus cambios, puedes enviar el código actualizado a una rama para que tus compañeros puedan seguir desarrollando a partir del prototipo. Crear una solicitud de extracción permite a tu equipo revisar esos cambios antes de fusionarlos en el proyecto compartido.

Las capas de código estarán disponibles en beta abierta a partir de hoy y consumirán créditos de IA. En los planes de pago, la creación y edición dentro de las capas de código es gratis hasta el 4 de noviembre de 2026.