Do Figma ao site no ar: como nasce um site profissional

O Figma é a ferramenta onde muitos designers desenham as telas de um site antes de ele virar código: cores, textos, fotos e posição de cada botão, tudo visível e fácil de ajustar. Mas o layout no Figma é uma etapa do meio. Antes dele vêm briefing, conteúdo e identidade visual; depois vêm desenvolvimento, testes e publicação no seu domínio.

Entender esse caminho ajuda você a contratar melhor, a cobrar o que foi combinado e a não se assustar quando a agência pede “o texto da página Sobre” antes de mostrar qualquer tela. Este guia explica cada etapa em português simples e mostra como é o processo na Sarmy.

Já montou um site com IA e quer colocar de pé do jeito certo? Fale com a Sarmy

O que é o Figma, em poucas palavras

O Figma é um programa de design que roda no navegador. Várias pessoas editam o mesmo arquivo ao mesmo tempo, e o cliente pode abrir um link para ver as telas e comentar direto nelas.

Três usos aparecem com frequência em projetos de site:

• Layout: o desenho de cada página, no celular e no computador.
• Protótipo: telas ligadas entre si, para clicar e simular a navegação antes de existir código.
• Passagem para o desenvolvimento: o Figma tem um modo para desenvolvedores, o Dev Mode, que mostra medidas, cores, trechos de código e permite baixar ícones e imagens. Segundo a central de ajuda oficial, esse modo está disponível nos planos pagos (Guide to Dev Mode).

O Figma também lançou o Figma Sites, que publica sites a partir do próprio arquivo de design. Pela documentação oficial, a publicação exige plano pago e o site sai num subdomínio figma.site, com opção de domínio próprio. Serve bem para páginas simples de quem já trabalha no Figma.

Do Figma ao site no ar: as etapas de um site profissional

O desenho é só uma parte. Um site profissional costuma passar por estas etapas, nesta ordem.

1. Briefing

Perguntas sobre o negócio, o público, os serviços, as cidades atendidas e o que o visitante deve fazer ao chegar (chamar no WhatsApp, pedir orçamento, agendar). Sem briefing, o designer desenha no escuro.

2. Conteúdo

Textos, fotos, lista de serviços, perguntas frequentes. Parece inversão (texto antes do visual?), mas é o conteúdo que define o tamanho de cada bloco. Um layout desenhado com texto de mentira quebra quando o texto real chega.

3. Identidade visual

Logo, cores e fontes. Se a marca ainda não existe, ela precisa nascer antes do site, senão cada tela vira uma decisão isolada. Explicamos o porquê em identidade visual antes do site.

4. Estrutura (wireframe)

Um rascunho em blocos cinza, sem cor, que define a ordem das seções: o que aparece primeiro, onde fica o botão, quantas páginas existem. É aqui que se decide se o projeto é uma página única ou um site com várias páginas. Se estiver em dúvida, leia landing page ou site institucional.

5. Layout

A estrutura ganha identidade: cores, fontes, fotos, ícones. É a etapa em que o Figma costuma brilhar. O layout deve ser pensado primeiro para o celular, porque é de lá que vem boa parte das visitas de negócios locais.

6. Aprovação

O cliente revisa as telas ou a versão navegável e pede ajustes. Quanto mais clara a aprovação aqui, menos retrabalho depois. Mudar a cor de um botão no Figma leva segundos; mudar a estrutura de uma página já programada leva bem mais.

7. Desenvolvimento

O layout aprovado vira código de verdade. Aqui entram velocidade, adaptação a telas diferentes, formulários, integração com WhatsApp e a preparação para o Google (títulos, descrições, dados estruturados, sitemap).

8. Revisão técnica

Antes de publicar: testar no celular, medir velocidade, conferir links, revisar textos e checar se formulários chegam. É a etapa que mais se pula em projetos apressados.

9. Publicação

O site vai ao ar no seu domínio, com a conta de hospedagem no seu nome. Depois disso, é hora de cadastrar no Search Console e no Perfil da Empresa no Google.

10. Ajustes e manutenção

Site publicado não é site encerrado. Telefones mudam, serviços entram, promoções acabam. Combine antes quem cuida disso.

Resumo das etapas

Etapa	Quem decide	O que sai dela
Briefing	Você e quem vai fazer o site	Objetivo e público definidos
Conteúdo	Você (com apoio)	Textos e fotos reais
Identidade	Designer, com sua aprovação	Logo, cores, fontes
Estrutura e layout	Designer	Telas no Figma ou versão navegável
Aprovação	Você	Sinal verde para programar
Desenvolvimento e revisão	Desenvolvedor	Site rápido e testado
Publicação	Desenvolvedor, na sua conta	Site no seu domínio

Todo site profissional passa pelo Figma?

Não. O Figma é uma ferramenta, não uma etapa obrigatória. Em projetos grandes, com muitas telas e muita gente opinando, desenhar tudo antes economiza retrabalho. Em sites de escopo fechado, com identidade já aprovada e estrutura conhecida, é comum ir direto para uma versão navegável e ajustar sobre ela.

O que não pode faltar, com ou sem Figma, é a ordem: conteúdo e identidade aprovados antes de programar, revisão técnica antes de publicar.

Como é o processo na Sarmy

Na Sarmy, o caminho segue essa lógica, com escopo fechado desde o começo:

1. Briefing online, sem precisar de reunião presencial. A Sarmy atende Belo Horizonte, Nova Lima, Contagem e clientes remotos.
2. Conteúdo e identidade aprovados. Se você ainda não tem marca, os pacotes Vitrine Viva (R$ 3.000) e Funil Pronto (R$ 4.500) incluem identidade visual.
3. Produção em Astro, uma tecnologia que gera sites estáticos e rápidos. A Sarmy usa IA no processo para ganhar velocidade, com revisão humana em texto e código.
4. Entrega com uma rodada de ajustes.
5. Publicação no seu domínio, com domínio e conta no seu CPF ou CNPJ.

O prazo orientativo vai de 7 a 25 dias úteis conforme o pacote, contado a partir do conteúdo e da identidade aprovados. Para escolher o pacote, veja como escolher o pacote de site.

Perguntas frequentes

Preciso saber usar o Figma para contratar um site?

Não. Se o projeto usar Figma, você recebe um link para ver as telas e comentar. Nenhuma instalação é necessária.

Posso mandar um layout que fiz no Figma para alguém programar?

Pode. Confira antes se o layout tem versão para celular, se usa as fontes e cores da sua marca e se o texto é o real. Layout só de computador costuma gerar ajustes grandes na programação.

O Figma Sites substitui um desenvolvedor?

Para páginas simples, pode resolver. Para sites que precisam de formulários que guardam contatos, preparação cuidadosa para o Google e manutenção por anos, a etapa de desenvolvimento e revisão continua fazendo diferença.

Por que pedem o texto antes de mostrar o layout?

Porque o tamanho do texto define o tamanho de cada bloco. Layout com texto provisório parece pronto, mas muda quando o conteúdo real entra.

Em resumo

O Figma é onde muitas telas de site são desenhadas, mas o design é só uma parte do caminho. Um site profissional passa por briefing, conteúdo, identidade, estrutura, layout, aprovação, desenvolvimento, revisão e publicação, nessa ordem. Pular etapas é o que faz projeto atrasar ou ficar diferente do esperado.

Se você quer um processo com escopo fechado, prazo claro e site no seu domínio, conheça os pacotes de criação de sites da Sarmy.