Do layout do Figma ao site no ar, sem refazer no código
A FlexPage não importa o .fig — ela entende o seu desenho. Você exporta o frame como imagem ou tira um print, cola na conversa com o Harness e a IA recria a página em HTML e CSS, fiel às cores e à hierarquia, já com os textos do negócio. E quando o que falta é ideia de tela, o conector do Google Stitch gera propostas novas a partir de uma descrição.
O que é verdade — e o que não é
Antes de prometer, o esclarecimento que esta página deve a você: a FlexPage não tem conector Figma e não lê arquivos .fig. O que existe é melhor do que um plugin — e funciona com qualquer referência visual.
O que não existe
Não há plugin para instalar no Figma, não há botão "exportar para FlexPage" e não há upload de arquivo .fig. Quem promete importação direta costuma devolver um HTML quebrado, com posições absolutas, que nenhum buscador entende e ninguém consegue manter.
A FlexPage preferiu outro caminho: em vez de ler o arquivo do Figma, ela lê o desenho.
O que existe de verdade
O Harness enxerga imagens. Você exporta o frame do Figma como PNG ou JPG — ou simplesmente tira um print — e cola na conversa com Ctrl+V. A IA vê o layout e recria a página em HTML e CSS de verdade, respeitando cores, hierarquia e espaçamento, com os textos reais do negócio no lugar do lorem ipsum.
E funciona igual para referência de qualquer origem: Figma, Canva, print do site do concorrente, foto de um rascunho no papel.
Como pedir uma página a partir de um print
O fluxo é o mesmo para o layout aprovado pelo cliente, a referência que o diretor mandou por e-mail ou o rascunho da reunião.
No Figma, selecione o frame e exporte em PNG ou JPG — ou use a ferramenta de captura do sistema. Não precisa recortar pixel a pixel.
Na sessão do site, cole a imagem com Ctrl+V. Um print por mensagem, dizendo o que ele é: "a home", "o rodapé no celular".
O que manter do desenho e o que adaptar: textos reais, telefone do cliente, o formulário que já existe na página atual.
O Harness monta os arquivos e mostra o cartão de aprovação antes de gravar. Pedido de ajuste é uma frase, não um chamado.
Aprovado na homologação, a página sobe para produção. Se algo desagradar, o botão Desfazer volta atrás.
"Colei a home que o designer aprovou. Recria essa página como a nova home do site: mantém as cores e essa hierarquia de seções, mas usa os textos da página atual (o título forte é o da campanha de setembro). O botão verde do topo vira o nosso botão de WhatsApp. No lugar do formulário do desenho, reaproveita o formulário de contato que já temos."
Google Stitch: propostas de tela geradas por IA
O Stitch é um produto do Google que gera propostas visuais a partir de texto. Ele chega à FlexPage como conector oficial, ligado no painel — e serve para quando o cliente ainda não tem layout nenhum.
Como ligar
No painel, em 🔌 Conectores, cadastre a URL https://stitch.googleapis.com/mcp. A chave de API é criada em stitch.withgoogle.com → Settings → API key e vai no cabeçalho X-Goog-Api-Key. A conta e a cota são do Stitch, não da FlexPage.
O que ele faz
A ferramenta generate_screen_from_text cria propostas de tela novas a partir da sua descrição em português. Cada geração usa a cota mensal do Stitch e leva de um a alguns minutos — configure o conector para "Pedir aprovação" antes de gastar.
O que acontece depois
O HTML que o Stitch devolve vem pronto para ver, não para publicar. O Harness converte para o padrão do seu site — CSS próprio, o mesmo envio de formulário da página atual — e salva como proposta separada, sem mexer nas páginas no ar.
Fidelidade ao desenho, ajustes por frase
Depois da primeira versão, o refinemento é uma conversa. Você aponta o que incomodou em português, e a IA ajusta o arquivo — com a sua aprovação antes de gravar.
Espaçamento e ritmo
"Aumenta o respiro entre as seções", "deixa o hero mais baixo", "junta os três cartões numa linha só no computador e empilha no celular".
Cores e tipografia
"Troca para a fonte do cliente", "esse azul ficou claro demais, usa o tom do logotipo", "o título precisa de mais peso".
Celular primeiro
Mande o print da versão mobile do layout junto: a IA monta a página pensando no celular desde o primeiro arquivo, não como adaptação no fim.
Homologação primeiro, publicação quando você mandar
Cada site de produção tem um par de homologação no mesmo plano. A proposta nova sobe no endereço de teste, o link vai para o cliente aprovar textos e cores — e só depois a mesma sessão publica em produção.
Homologação para o cliente
O layout recriado fica visível no domínio de teste, sem tocar no que está no ar. O cliente aprova olhando a página real, não um PDF.
Publicação com um ok
Com o aval, a mesma conversa publica em produção. Não há fila de deploy nem janela de manutenção para uma landing page.
Desfazer como rede de segurança
Publicou e o cliente mudou de ideia? O botão Desfazer volta a alteração. Redesign frequente deixa de ser risco e vira rotina.
Perguntas de quem vem do Figma
A FlexPage importa arquivo .fig?
Não. Não há plugin de Figma nem leitura de arquivo .fig. O caminho é abrir o frame no Figma, exportar como PNG ou JPG (ou tirar um print) e colar a imagem na conversa com Ctrl+V. A IA enxerga o layout e recria a página em HTML e CSS, fiel às cores e à hierarquia do desenho.
Quantos prints posso mandar?
Cole quantos precisar, um por mensagem, dizendo o que cada um é: "esta é a home", "este é o rodapé no celular", "esta tela só existe no plano anual". Com as instruções, a IA monta as partes na ordem certa e separa o que é versão de desktop e de celular.
O Stitch publica direto no site?
Não. O HTML que o conector do Google Stitch devolve vem pronto para ver, não para publicar. O Harness converte esse material para o padrão do seu site — CSS próprio, o mesmo envio de formulário da página atual — e salva como proposta separada, sem mexer nas páginas no ar. Você aprova antes de qualquer publicação.
Serve para layout feito no Canva ou à mão?
Sim. A referência pode ser qualquer imagem: export do Canva, print de um site que você admira, foto de um rascunho desenhado à mão. O processo é o mesmo do print do Figma — cole a imagem na conversa e descreva o que quer manter e o que quer adaptar.
E se eu quiser um design novo todo mês?
A homologação e o botão Desfazer facilitam redesign: a proposta nova sobe no domínio de homologação, você compara com a versão atual no ar e publica quando aprovar. Se algo não agradar depois de publicado, o Desfazer volta atrás.
O resto do trabalho da sua agência
A página é uma frente. Estas são as outras páginas do cluster e a lição do guia que explica os conectores por tipo.