Figma Make ganha painel de propriedades e anotações para edição visual

Painel de propriedades e anotações no Figma Make

O Figma Make recebeu duas novidades que aproximam a edição visual da edição de código: um painel de propriedades e um sistema de anotações diretamente no editor.

Painel de propriedades

O painel traz controles familiares do Figma Design - espaçamento, tipografia, layout, opacidade, z-index, border-radius, entre outros - para dentro do Make. O fluxo funciona assim: o usuário seleciona "Edit" na barra superior, ajusta o que quiser visualmente e as alterações ficam staged na caixa de prompt, sem consumir créditos até serem aplicadas. Ao aplicar, o Make atualiza o código subjacente e cria uma nova versão do arquivo.

Também é possível visualizar a árvore DOM completa (um "layers panel" para o código) e selecionar todas as instâncias de um elemento para editar em lote. Por enquanto, o painel usa tokens de cor e tipografia já definidos no codebase; com o Code Connect (em breve), ele se integrará também aos componentes do Figma Design.

Anotações

Para mudanças que vão além de propriedades visuais - interações, animações, efeitos de hover -, as anotações permitem marcar áreas específicas no canvas e descrever a mudança em linguagem natural. Exemplos citados: "quando o usuário passar o mouse sobre este thumbnail, dê um leve zoom", "faça este botão aparecer com fade após 300ms", "adicione um efeito sutil de pressionar neste botão". O agente lê o contexto marcado e aplica as alterações em todos os elementos selecionados.

Consumo de créditos

A manipulação direta consome menos tokens e termina mais rápido do que descrever a mesma mudança em um prompt textual. As edições ficam acumuladas sem custo até o usuário decidir aplicá-las; só então os créditos são consumidos.

Disponibilidade

As duas funcionalidades estão sendo distribuídas para todos os planos e assentos do Figma Make. Importante: o painel de propriedades só funciona com designs criados a partir de agora no Make - designs anteriores continuam usando a ferramenta de edição antiga. A mesma experiência de edição visual também chegará aos code layers no Figma Design em breve.