Projete em equipe com camadas de código na tela de trabalho
Hoje, as camadas de código entram na fase de beta aberto. As equipes já podem explorar e criar protótipos baseados em código na tela de trabalho.
Compartilhar Projete em equipe com camadas de código na tela de trabalho
Criar design com código permite que você veja como é a experiência de uso e como ela se comporta, de microinterações a fluxos completos. Mas, quando cada pessoa trabalha separadamente em sua ferramenta de programação, pode ter a sensação de estar sozinha no projeto, o que dificulta compartilhar o trabalho ou comparar alternativas.
Foi por isso que introduzimos as camadas de código no início deste ano, trazendo o código para a tela de trabalho compartilhada do Figma. Antes, explorar ideias com código significava trabalhar em um IDE, que não é a forma de trabalho preferida de muitos usuários do Figma. Com as camadas de código, as equipes podem construir visualmente com código e usar todas as ferramentas de colaboração da tela de trabalho do Figma. Os colegas de equipe podem testar protótipos lado a lado, acrescentar feedback ou duplicar uma camada de código para explorar ideias próprias, tudo no mesmo lugar. Converta designs existentes em código funcional, importe protótipos desenvolvidos em código em ferramentas de terceiros, pastas locais ou GitHub, ou capture a versão publicada do seu site com a extensão do Figma para Chrome: as camadas de código permitem que você continue construindo na tela de trabalho.
Confira todos os lançamentos desta semana.
Construa aproveitando o que você já criou
Quando você está explorando uma nova ideia de produto, às vezes é útil começar do zero. Em outras situações, como ao imaginar um novo recurso ou fluxo, é mais eficiente partir da base de código existente. As camadas de código oferecem várias maneiras de construir dessa forma. Importe uma base de código leve e compatível para prototipagem do GitHub ou de uma pasta local e aproveite as telas e interações que você já criou. Quando você importa do GitHub, a camada de código permanece conectada a esse repositório.
Quando Maria Gaston, designer do Figma, quis facilitar a revisão em equipe de um protótipo que havia criado em um IDE, ela importou o código para uma camada de código usando o servidor MCP do Figma. “Trabalhar na ferramenta de programação dificultava compartilhar o trabalho e iterar”, afirmou ela. “Era um ambiente muito isolado. Agora, qualquer pessoa com acesso ao arquivo pode entrar e experimentar à vontade.”
Com a extensão do Figma para Chrome, você pode trazer a experiência de um site em funcionamento para a tela de trabalho como uma camada de código e continuar explorando mudanças lado a lado com a página original.
Por exemplo, na Cox Automotive, que oferece software e serviços para concessionárias, Lindsay Brechler, gerente de produto sênior, levou um protótipo HTML existente para as camadas de código a fim de alinhar os envolvidos em relação a um novo recurso. Como cada versão permanecia na tela de trabalho, Lindsay podia retomar a partir de qualquer uma delas e continuar iterando sem precisar começar do zero. “A cada iteração, as camadas de código mantêm todas as telas e interações muito bem integradas”, disse Lindsay.
Você também pode transformar um design do Figma em uma camada de código interativa. Na Rocket Money, Derek Onay, designer de produto líder de design systems, usa esse método para compartilhar ideias iniciais com a equipe. Quando a equipe estava criando componentes básicos de telas, era importante definir as interações e a acessibilidade desde o início, antes que afetassem as pessoas que usam o produto. Derek criou um conceito em uma camada de código para estimular essas conversas. “O grande valor das camadas de código é poder comunicar melhor as ideias e alinhar os envolvidos”, explicou ele. “Posso compartilhar um protótipo funcional e trabalhar com a equipe onde ela já está: no Figma.”
Além de aproveitar código e designs existentes, você pode trazer um protótipo da sua ferramenta de programação para a tela de trabalho por meio do servidor MCP do Figma ou capturar uma página web funcional como camada de código usando a extensão do Figma para Chrome.
Explore e construa em equipe
Perfil do cliente: Merkle
A Merkle, agência global de experiência do cliente, usa as camadas de código em todo o processo de design e construção, desde a ideação em uma tela de trabalho em branco até a iteração de recursos já implementados em código. O impacto:
→ Iteração e desenvolvimento de recursos 30% mais rápidos.
→ 50% menos documentação, como especificações de interação nos tíquetes.
Quando você trabalha com agentes de programação em uma IDE, é fácil se apegar à primeira ideia antes mesmo de avaliar as alternativas. Com as camadas de código, várias versões de um protótipo podem ficar na tela de trabalho ao mesmo tempo: você e sua equipe podem duplicar um protótipo, experimentar outra abordagem e comparar as duas versões sem precisar alternar entre elas.
Miguel Wermuth, designer de produto da Dell Technologies, trabalha na experiência de contas de clientes empresariais e individuais do site dell.com em dispositivos móveis, tablets e desktops. Ele usa as camadas de código para levar à tela de trabalho experiências de IA conversacional em que um envolvido digita uma pergunta e o protótipo responde com a tela adequada. Depois que outros designers aprovam um fluxo, Miguel o desenvolve nas camadas de código para conseguir a aprovação dos envolvidos da área de negócios, que consideram um protótipo funcional mais fácil de acompanhar do que uma série de telas estáticas. Para comparar versões, ele duplica camadas de código lado a lado na tela de trabalho. “Com as camadas de código, consigo trabalhar com código enquanto projeto na tela de trabalho. A maior alternância entre design e código faz muita diferença.”
Dica sobre camadas de código
Espelhe uma camada de código no app Figma para dispositivos móveis e revise o protótipo onde você estiver.
Mas não se trata apenas de avaliar uma direção: as camadas de código permitem dar um passo atrás e analisar a experiência do produto como um todo. Nas palavras de Matt Davey, diretor de experiência da 1Password: “O verdadeiro superpoder do Figma sempre foi a tela de trabalho. É como quando a gente imprimia todas as páginas de um site e as colava em um quadro branco. Poder analisar esses elementos de UI em conjunto é incrivelmente valioso.”
O verdadeiro superpoder do Figma sempre foi a tela de trabalho. Poder analisar esses elementos de UI em conjunto é incrivelmente valioso.
Refine sem deixar o código para trás
Perfil do cliente: Superside
Você também pode refinar as interações de uma camada de código enviando prompts ao agente Figma. Na Superside, Leonardo Rica, líder de design de movimento, usou prompts para criar uma camada de código de uma carteira de cartões de crédito em que os usuários podem percorrer os cartões, tocar em um deles para trazê-lo à frente e virá-lo. Quando, por alguns instantes, os cartões começaram a se sobrepor na ordem errada, Leonardo descreveu a causa em um único prompt preciso. O agente Figma corrigiu o problema “como em um passe de mágica”.
Conforme aprimora uma ideia, você pode ajustar o design nas camadas de código e aplicá-lo ao protótipo funcional. Para as alterações visuais que você prefere fazer diretamente, o recurso Extrair designs transforma uma tela ou um fluxo de uma camada de código em camadas editáveis do Figma.
Na Checkout.com, Kris Murphy, designer de produto sênior, trabalha com produtos usados pelas empresas nas experiências que oferecem aos próprios clientes. Quando um cliente em potencial quis ver a tecnologia em ação, Kris criou uma demonstração nas camadas de código. “Com as camadas de código, consegui criar a demonstração cerca de 50% mais rápido, mesmo ainda não conhecendo muito bem a ferramenta”, observou Kris. Antes de compartilhar a demonstração com um cliente, Kris queria garantir que cada tela tivesse um visual bem finalizado. Em vez de percorrer o protótipo tela por tela, ele extraiu todas as telas da camada de código para a tela de trabalho do Figma. A partir desse ponto, ficou fácil analisá-las lado a lado para identificar o que precisava de ajustes e correção. Depois, Kris enviou as edições de volta para a camada de código para que a equipe da Checkout.com também pudesse revisar o fluxo completo das alterações feitas na tela de trabalho. “As camadas de código parecem uma verdadeira ponte entre design e desenvolvimento”, afirmou ele. “Isso me ajudou a explorar ideias e entregar resultados com agilidade.”
Dica sobre camadas de código
Você também pode combinar ideias de diferentes versões do protótipo. Se a equipe gostar do layout de uma versão e das interações de outra, pode pedir ao agente Figma para combinar tudo em uma nova versão e testá-la.
Outras opções de edição incluem comentar diretamente em um protótipo, fazer anotações em quadros de um protótipo para mostrar ao agente onde é necessário alterar algo ou inspecionar e editar diretamente o código. A experiência em tela cheia, atualizada recentemente, também permite manter várias conversas com o agente para diferentes partes do trabalho.
Quando tudo estiver pronto para compartilhar as alterações, você pode enviar o código atualizado para uma ramificação, permitindo que a equipe continue a desenvolver a partir do protótipo. A criação de uma solicitação de pull permite que a equipe revise essas alterações antes de integrá-las ao projeto compartilhado.
A partir de hoje, as camadas de código começam a ser disponibilizadas na versão beta aberta e usarão créditos de IA. Nos planos pagos, a criação e a edição nas camadas de código serão gratuitas até 4 de novembro de 2026.
