Figma leva código à tela de design e amplia criação de sites e apps com IA

RESUMO ＋

O Figma anunciou recursos para aproximar o desenho de uma interface de seu funcionamento como site ou aplicação web. As novidades incluem protótipos com código dentro da tela de design, documentos compartilhados para orientar equipes e agentes e integração com o Payload para gerenciar conteúdo e dados. A distribuição será gradual, com ferramentas em diferentes estágios de teste.

Transformar o desenho de um site em uma página que funciona, recebe dados e pode ser atualizada é o foco das novidades anunciadas pelo Figma nesta quinta-feira, 15. A plataforma apresentou ferramentas que aproximam design e programação e permitem que equipes trabalhem com agentes de inteligência artificial no mesmo espaço visual.

As atualizações foram apresentadas na Config Índia, em Bengaluru. Entre elas estão as camadas de código, que colocam protótipos interativos dentro da tela de design, e a integração com o Payload, que acrescenta estrutura para armazenar informações e gerenciar o conteúdo dos projetos.

O Figma já permitia criar com inteligência artificial (IA), inclusive transformar descrições em aplicações web no Figma Make. O avanço anunciado agora está em reunir mais etapas desse trabalho: desenhar, experimentar o funcionamento, registrar decisões e conectar o produto a conteúdo e dados reais.

O que muda na hora de criar um site?

Um layout mostra como uma página deve parecer. Um protótipo interativo permite experimentar como ela responde. As camadas de código levam essa segunda experiência para o espaço em que designers e outros profissionais já discutem o projeto.

É possível pedir ao agente do Figma que transforme um design existente em uma versão baseada em código, comece com uma descrição ou importe um projeto do GitHub. A equipe pode interagir com o resultado, comparar alternativas e pedir alterações na mesma tela.

O objetivo, segundo a empresa, é reduzir a distância entre quem propõe uma interface e quem precisa avaliar seu funcionamento. Gerar uma primeira versão não significa que o projeto esteja automaticamente revisado ou pronto para qualquer uso.

Para Dylan Field, cofundador e CEO do Figma, a colaboração é o centro da mudança. “Os clientes costumam nos dizer que preferem trabalhar em conjunto com suas equipes na tela, em vez de sozinhos com agentes de codificação em um terminal ou IDE”, afirmou no comunicado.

Conteúdo e dados entram no projeto

A integração com o Payload trata de outra etapa: o que acontece depois que a interface está desenhada. A ferramenta reúne recursos de bastidor, como banco de dados, armazenamento de arquivos, autenticação e um painel para administrar conteúdo.

No exemplo apresentado pela companhia, um designer pode trabalhar com conteúdo real enquanto um profissional de marketing atualiza essas informações pelo painel. Um desenvolvedor pode personalizar o aplicativo usando a estrutura de código aberto do Payload.

Isso permite que o trabalho avance além de uma demonstração preenchida com textos e imagens provisórios. O projeto passa a ter uma estrutura para manter e atualizar as informações que aparecem na tela.

Como explicar à IA o que a equipe quer?

Outra novidade, o Figma Specs, cria um espaço para registrar o que será construído e como deverá funcionar. Os documentos podem reunir texto, referências visuais, diagramas e camadas de código.

A proposta é dar à equipe e aos agentes uma referência compartilhada. Em vez de depender apenas de uma sequência de pedidos em um chat, decisões e requisitos podem ficar ao lado do trabalho visual.

O anúncio também inclui recursos para conectar bibliotecas de código e orientações de design. Essas referências ajudam o agente a seguir componentes e padrões da equipe, uma parte do trabalho necessária para manter o controle criativo sobre o resultado.

Quem já pode usar e o que será cobrado?

As ferramentas não chegam todas no mesmo estágio. As camadas de código entram em beta aberto, com distribuição gradual para os planos compatíveis. O Specs também está em beta aberto, com acesso nos planos pagos e em modalidades educacionais elegíveis, segundo a Central de Ajuda.

O Payload começa a ser distribuído em todos os planos do Figma Make. Já o espaço centralizado para reunir sistemas de design foi apresentado como uma prévia, sem disponibilidade geral anunciada.

Beta aberto não significa uso ilimitado e gratuito. As camadas de código utilizarão créditos de IA, com consumo variável conforme a tarefa. Nos planos pagos, gerar e editar código dentro dessas camadas não consumirá créditos até 4 de novembro. Outras ações executadas pelo agente no mesmo pedido podem continuar consumindo créditos durante esse período.

---

Perguntas frequentes

O Figma agora cria sites com inteligência artificial?

O Figma Make já permitia gerar protótipos e aplicações web. As novidades ampliam a integração entre design, código, conteúdo e dados.

O que são as camadas de código?

São elementos com código em execução dentro da tela de design. Elas permitem experimentar e modificar protótipos interativos no mesmo espaço usado pela equipe.

Para que serve o Payload?

Ele oferece a estrutura de bastidor para conteúdo e dados, incluindo banco de dados, arquivos, autenticação e painel de administração.

O que é o Figma Specs?

É um espaço para documentar decisões e requisitos, com referências aos designs e outros elementos do projeto, compartilhando contexto com pessoas e agentes.

As novidades já estão disponíveis para todos?

Não simultaneamente. A liberação é gradual, varia por plano e inclui recursos em beta aberto, beta fechado e prévia.

Usar as camadas de código será gratuito?

Elas utilizarão créditos de IA. Nos planos pagos, há uma promoção até 4 de novembro de 2026 para gerar e editar código dentro das camadas, sem isentar outras ações do agente.