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

Diseñar con código te permite ver cómo se siente y se comporta una experiencia, desde las microinteracciones hasta los flujos completos. Sin embargo, cuando cada persona trabaja por separado con sus propias herramientas de programación, puede parecer que diseñas de forma aislada, lo que dificulta compartir el trabajo o comparar alternativas.

Por eso presentamos las capas de código a principios de este año, para llevar el código al lienzo compartido de Figma. Antes, explorar ideas con código implicaba trabajar en un entorno de desarrollo integrado (IDE), algo que no encaja con la forma en que muchos usuarios de Figma prefieren trabajar. Las capas de código permiten a los equipos crear visualmente con código y aprovechar todas las herramientas de colaboración que ofrece el lienzo de Figma. Los compañeros de equipo pueden probar prototipos uno al lado del otro, dejar feedback junto a ellos o duplicar una capa de código para explorar sus propias ideas, todo en un mismo lugar. Ya sea que conviertas diseños existentes en código funcional, importes un prototipo desarrollado con código desde una herramienta externa, una carpeta local o GitHub, o captures lo que está activo en tu sitio web mediante la extensión de Figma para Chrome, las capas de código te permiten seguir creando directamente en el lienzo.

Descubre todos los lanzamientos de esta semana.

Aprovecha el trabajo que ya tienes

Cuando exploras una nueva idea de producto, a veces resulta ú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 existente. Las capas de código te ofrecen varias formas de aprovechar el trabajo existente. Importa una base de código ligera y compatible para la creación de prototipos desde GitHub o una carpeta local y sigue trabajando sobre 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, una empresa que ofrece software y servicios para concesionarios de automóviles, Lindsay Brechler, gerente sénior de producto, importó un prototipo HTML existente a las capas de código para alinear a las partes interesadas en torno a una nueva función. Como todas las versiones permanecían en el lienzo, Lindsay podía retomar cualquiera de ellas y seguir iterando sin tener que empezar desde cero. "Las capas de código permiten mantener todas las pantallas e interacciones muy bien conectadas de una iteración a otra", explica Lindsay.

También puedes convertir un diseño de Figma en una capa de código interactiva. En Rocket Money, Derek Onay, diseñador principal de productos para sistemas de diseño, utiliza 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 los aspectos de accesibilidad desde el principio, antes de que afectaran a las personas que utilizan el producto. Derek creó un concepto en una capa de código para facilitar esas conversaciones. "El verdadero valor de las capas de código está en poder comunicar mejor las ideas y conseguir que las partes interesadas estén alineadas", explica. "Puedo compartir un prototipo funcional y colaborar con mi equipo directamente donde ya trabaja: en Figma".

Además de trabajar con código y diseños existentes, puedes llevar un prototipo desde tu herramienta de programación al lienzo mediante el servidor MCP de Figma o capturar tu página web activa como una capa de código con la extensión de Figma para Chrome.

Explora y crea en equipo

Cuando trabajas con agentes de programación en un IDE, es fácil aferrarte a tu primera idea antes de considerar otras alternativas. Con las capas de código, puedes tener varias versiones de un prototipo en el lienzo al mismo tiempo. Tú y tu equipo pueden duplicar un prototipo, probar otro enfoque y comparar ambas versiones sin tener que alternar entre ellas.

Miguel Wermuth, diseñador de productos de Dell Technologies, trabaja en la experiencia de las cuentas de clientes, tanto para clientes empresariales como para compradores de dell.com, en dispositivos móviles, tablets y computadoras de escritorio. Utiliza capas de código para llevar al lienzo experiencias de IA conversacional en las que una parte interesada puede escribir una pregunta y el prototipo responde mostrando la pantalla correspondiente. Una vez que sus compañeros diseñadores aprueban un flujo, Miguel lo desarrolla en capas de código para obtener la aprobación de 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 y las coloca una al lado de la otra en el lienzo. "Con las capas de código, puedo trabajar con código mientras diseño en el lienzo. Es realmente útil poder pasar del diseño al código y viceversa con mayor fluidez".

Pero no se trata solo de evaluar una dirección: las capas de código también te permiten tomar distancia y analizar la experiencia de un producto en su conjunto. Como explica Matt Davey, director de Experiencia de 1Password: "El verdadero superpoder de Figma siempre ha sido el lienzo. Es como cuando imprimíamos todas las páginas de un sitio web y las pegábamos en una pizarra. Poder ver todos esos elementos de UI juntos es increíblemente valioso".

Perfecciona tus diseños sin dejar de trabajar con código

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

En Checkout.com, Kris Murphy, diseñador sénior de productos, trabaja en productos que las empresas integran en sus propias experiencias de cliente. Cuando un cliente potencial quiso ver la tecnología en acción, Kris creó una demostración con capas de código. "Las capas de código me ayudaron a crear la demostración aproximadamente un 50 % más rápido, y eso que todavía no domino del todo la herramienta", cuenta Kris. Antes de compartir la demostración con el cliente, Kris quería asegurarse de que todas las pantallas estuvieran bien pulidas. En lugar de recorrer el prototipo pantalla por pantalla, extrajo todas las pantallas de la capa de código y las llevó al lienzo de Figma. Así, pudo revisarlas una al lado de la otra para detectar y corregir cualquier detalle que necesitara ajustes. Después, Kris incorporó esos cambios a la capa de código, y el equipo de Checkout.com también pudo revisar el flujo completo de las modificaciones realizadas en el lienzo. "Las capas de código son un verdadero puente entre el diseño y el desarrollo", explica. "Me han ayudado a generar ideas y llevarlas a la práctica rápidamente".

Otras opciones de edición incluyen dejar comentarios directamente en un prototipo, añadir anotaciones a sus marcos para indicarle al agente dónde se necesita un cambio o inspeccionar y editar el código directamente. Además, la nueva experiencia de pantalla completa te permite trabajar con varios hilos de conversación con el agente para abordar distintas partes del trabajo.

Cuando estés listo para compartir tus cambios, puedes enviar el código actualizado a una rama para que tus compañeros de equipo puedan seguir desarrollando el prototipo. Al crear una solicitud de incorporación de cambios (pull request), tu equipo puede revisar las modificaciones antes de integrarlas en el proyecto compartido.

Las capas de código comienzan a implementarse hoy en versión beta abierta y consumirán créditos de IA. En los planes de pago, crear y editar contenido dentro de las capas de código será gratis hasta el 4 de noviembre de 2026.