> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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**](https://ajuda.greatsoftwares.com.br/pt-br/article/como-importar-uma-pagina-do-figma-para-o-greatpages-aabl0/)**"** para fazer a importação.

Ficou com alguma dúvida? Chame nossa equipe no Chat! Estamos sempre prontos para ajudar. 💙