Como MONTAR seu layout no FIGMA para importar no GreatPages

Quer que sua página do Figma seja importada com fidelidade e sem bagunça? Então a organização do seu arquivo faz toda a diferença! 💙

A importação automática "lê" a forma como você montou o layout no Figma. Se o arquivo estiver organizado do jeito certo, o resultado sai fiel ao que você desenhou. Se estiver desorganizado, a página pode vir com elementos fora do lugar, fundos errados ou sobrepostos.

Neste artigo você vai aprender o passo a passo para montar seu layout corretamente. É mais simples do que parece! 😉

A ideia principal: monte o site como uma pilha de blocos

Todo site é uma pilha de blocos horizontais, um embaixo do outro, de cima para baixo. Por exemplo:

• Bloco do topo (logo + menu)
• Bloco do banner principal
• Bloco de diferenciais
• Bloco de fotos / galeria
• Bloco do rodapé

Cada bloco fica colado no de cima e no de baixo, sem buracos e sem nada passando por cima do outro.

Passo a passo para montar corretamente

1. Separe o site em blocos

Antes de tudo, pense: quantas "listras" horizontais o seu site tem? (topo, banner, diferenciais, fotos, depoimentos, rodapé...). Cada listra será um bloco.

2. Cada bloco precisa ser um Frame (nunca um Grupo)

Esse é o ponto mais importante.

Depois de montar os elementos de um bloco:

1. Selecione todos os elementos daquele bloco;
2. Clique com o botão direito;
3. Escolha "Frame selection".

⚠️ Use sempre Frame, nunca Group (Ctrl + G). Grupos não funcionam bem na importação, porque não guardam cor de fundo nem organização. Sempre que possível, trabalhe com Frames.

3. Coloque a cor ou imagem de fundo DENTRO do Frame

Não desenhe um retângulo colorido atrás dos elementos para fazer o fundo. Em vez disso:

1. Clique no próprio Frame do bloco;
2. No painel da direita, em Fill, escolha a cor ou a imagem de fundo.

⚠️ Retângulos soltos por cima ou por trás do conteúdo confundem a importação: o sistema não consegue saber o que é fundo e o que é conteúdo. O fundo é uma propriedade do Frame, não um elemento separado.

4. Empilhe os Frames colados e em ordem

Coloque os blocos um embaixo do outro, na mesma ordem em que aparecem no site — do topo (em cima) até o rodapé (embaixo).

• Sem espaços vazios sobrando entre os blocos;
• Sem um bloco sobrepondo o outro;
• Na ordem certa de cima para baixo.

5. Tudo dentro do bloco certo — nada solto

Todo elemento que aparece em um bloco (texto, botão, imagem, ícone) precisa estar dentro do Frame daquele bloco. Nada pode ficar solto, flutuando por fora ou em cima de outro bloco.

6. Centralize o conteúdo do bloco

Mesmo que o bloco ocupe toda a largura da tela, o conteúdo (textos e botões) deve ficar centralizado, dentro de uma área central. Evite jogar texto colado nas bordas da tela.

Dica: dentro de cada Frame de bloco, crie um Frame menor centralizado para segurar os textos e botões. Assim o conteúdo fica alinhado e organizado.

7. Use textos de verdade

Escreva os títulos e parágrafos usando a ferramenta de texto do Figma (tecla T). Não transforme texto em imagem nem "achate" os elementos — isso impede que o texto seja editável depois no GreatPages.

8. Dê nomes aos seus blocos

Renomeie os Frames com nomes claros: Topo, Banner, Diferenciais, Galeria, Rodapé... Isso deixa tudo mais fácil de encontrar e ajuda na hora de ajustar a página.

Resumo rápido

1. Separe o site em blocos horizontais, de cima para baixo;
2. Cada bloco precisa ser um Frame, nunca um Grupo;
3. A cor/imagem de fundo vai dentro do próprio Frame, não num retângulo por cima;
4. Empilhe os Frames colados e em ordem, sem nada solto ou sobreposto;
5. Coloque todo o conteúdo dentro do bloco ao qual ele pertence;
6. Use textos de verdade e nomeie seus blocos.

O que evitar

• ❌ Montar a página inteira solta, sem dividir em blocos;
• ❌ Usar Grupos no lugar de Frames;
• ❌ Fazer fundo com retângulos por cima ou por trás do conteúdo;
• ❌ Deixar elementos soltos, sobrepostos ou fora de ordem;
• ❌ Transformar textos em imagens.

Pronto! Seguindo essa organização, sua página será importada com muito mais fidelidade e você economiza tempo de ajustes. ✨

Depois de montar o layout assim, é só seguir o passo a passo do artigo "Como IMPORTAR uma página do FIGMA para o GreatPages" para fazer a importação.

Atualizado em: 01/06/2026