Duas páginas de marcação parecem arrumadas. Ambas têm um campo de data e um botão Guardar. Na primeira, um diálogo altera a marcação; na segunda, abre-se uma página separada. Qual das versões é melhor? Uma captura de ecrã ajuda com as cores e os espaçamentos. Só mostra de forma limitada se as pessoas compreendem o fluxo.
Em 15 de outubro de 2026, a Figma abriu o Code Layers em versão beta. Os protótipos suportados podem continuar a ser desenvolvidos com código e comparados no canvas de design partilhado; o código existente pode ser trazido nas condições documentadas. Do ponto de vista editorial, o aspeto interessante é trabalhar em conjunto no comportamento. Um protótipo passa assim a ser objeto de uma decisão, em vez de apenas mostrar o seu resultado atraente.
Primeiro a mesma tarefa, depois interfaces diferentes
O nosso próprio exemplo é um evento de um clube. A pessoa deve alterar a data, ler a condição de participação e depois guardar ou cancelar. Ambas as versões recebem o mesmo título, a mesma data e a mesma nota mais longa. Se uma versão mostrasse apenas um título provisório curto, a comparação já estaria enviesada.
O diálogo mantém a vista geral das marcações em segundo plano. Uma página de edição separada oferece mais espaço. São decisões de design diferentes, não juízos de qualidade. Torna-se interessante nas transições: onde está a pessoa depois de guardar? O que acontece aos dados que começou a introduzir quando cancela? Que informação continua visível durante a alteração?
Um modelo de estados torna o comportamento discutível
Começa por descrever o fluxo sem sintaxe de programação. A marcação está visível. Editar abre um campo de introdução. Uma introdução inválida leva a uma explicação, e os dados válidos são mantidos. Guardar mostra o estado confirmado. Cancelar regressa ao estado inalterado. Estes são requisitos para o nosso exemplo, não uma promessa sobre funcionalidades integradas da Figma.
View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original viewCom este pequeno modelo, cada versão pode ser examinada de forma direcionada. Talvez o diálogo tenha um aspeto excelente, mas perca o texto de ajuda quando ocorre um erro. Talvez a página separada seja menos elegante, mas torne o caminho de regresso mais fácil de compreender. A avaliação incide então sobre o comportamento observável, não sobre uma preferência geral por diálogos.
O feedback precisa de um ponto de referência comum
Um comentário útil diz: «Depois de cancelar, não consegui perceber se a minha nova data tinha sido guardada.» Indica o local, a ação e a incerteza. «Não parece suficientemente moderno», por outro lado, ainda não fornece uma pergunta sobre a qual alguém possa trabalhar. Quando os rascunhos e os comentários estão no mesmo canvas, a ligação à versão que está a ser vista pode ser preservada.
Para cada alteração, anota que incerteza pretende eliminar. Por exemplo, altera primeiro a confirmação, em vez de mudar ao mesmo tempo o tipo de letra, as cores e a navegação. Assim é mais fácil perceber porque é que uma segunda versão transmite uma impressão diferente. Isto não é um estudo de usabilidade controlado, mas é uma disciplina de trabalho sensata para a fase de design.
A decisão é transferível; o código não o é automaticamente
No fim deve existir uma breve nota de passagem: a versão preferida, a tarefa que apoia, os estados relevantes e as perguntas em aberto. Um rascunho interativo com dados de exemplo ainda não é uma verdadeira plataforma de reservas. O início de sessão, os dados armazenados e as permissões reais têm de funcionar separadamente numa aplicação.
Para um pequeno acréscimo do lado do cliente a uma página KENJTEC, a decisão pode então ser implementada com o teu próprio HTML, CSS e JavaScript. O KENJTEC WebSiteBuilder ai oferece para isso um modo de programador, com uma pré-visualização isolada e um passo próprio de publicação do código. És tu que transferes o componente relevante; isto não significa uma importação da Figma nem alojamento para qualquer aplicação à tua escolha.
De acordo com o estado documentado, o Code Layers continua em beta. A disponibilidade, os projetos de partida suportados e as condições devem ser verificados novamente antes de qualquer guia prático concreto. O método, porém, mantém-se válido independentemente da ferramenta: não te limites a comparar dois ecrãs atraentes. Compara duas respostas rastreáveis à mesma pergunta sobre como algo é utilizado.
Fontes e estado
Pesquisa e documentação à data de 25 de outubro de 2026. Design em conjunto com code layers no canvas.
