> ## 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).

# How to BUILD your layout in FIGMA to import into GreatPages

Want your Figma page to be imported faithfully and without a mess? Then how you organize your file makes all the difference! 💙

The automatic import "reads" the way you built the layout in Figma. If the file is organized the right way, the result comes out true to what you designed. If it's disorganized, the page may come out with elements out of place, wrong backgrounds or overlapping.

In this article you will learn step by step how to build your layout correctly. It's simpler than it looks! 😉

## The main idea: build the site like a stack of blocks

Every website is a **stack of horizontal blocks, one below the other**, from top to bottom. For example:

* **Header** block (logo + menu)
* Main **banner** block
* **Key benefits** block
* **Photos / gallery** block
* **Footer** block

Each block sits **flush** against the one above and the one below, with **no gaps** and **nothing overlapping anything else**.

## Step by step to build it correctly

### 1. Split the site into blocks

First of all, think: how many horizontal "stripes" does your site have? (header, banner, key benefits, photos, testimonials, footer...). Each stripe will be a block.

### 2. Each block must be a Frame (never a Group)

This is the **most important** point.

After building the elements of a block:

1. Select all the elements of that block;
2. Right-click;
3. Choose **"Frame selection"**.

⚠️ Always use **Frame**, never **Group** (Ctrl + G). Groups don't work well in the import, because they don't store a background color or organization. Whenever possible, work with Frames.

### 3. Put the background color or image INSIDE the Frame

Don't draw a colored rectangle behind the elements to create the background. Instead:

1. Click on the block's **Frame itself**;
2. In the right panel, under **Fill**, choose the background color or image.

⚠️ Loose rectangles over or behind the content confuse the import: the system can't tell what is background and what is content. The background is a property of the Frame, not a separate element.

### 4. Stack the Frames flush and in order

Place the blocks one below the other, **in the same order they appear on the site** — from the header (top) to the footer (bottom).

* No empty gaps left between blocks;
* No block overlapping another;
* In the correct order from top to bottom.

### 5. Everything inside the right block — nothing loose

Every element that appears in a block (text, button, image, icon) must be **inside that block's Frame**. Nothing can be left loose, floating outside or on top of another block.

### 6. Center the block's content

Even if the block takes up the full width of the screen, the **content** (texts and buttons) should be **centered**, within a central area. Avoid pushing text right up against the edges of the screen.

Tip: inside each block Frame, create a smaller centered Frame to hold the texts and buttons. That way the content stays aligned and organized.

### 7. Use real text

Write the headings and paragraphs using Figma's **text tool** (the **T** key). Don't turn text into images or "flatten" the elements — that prevents the text from being editable later in GreatPages.

### 8. Name your blocks

Rename the Frames with clear names: **Header**, **Banner**, **Key benefits**, **Gallery**, **Footer**...  This makes everything easier to find and helps when adjusting the page.

## Quick summary

1. Split the site into **horizontal blocks**, from top to bottom;
2. Each block must be a **Frame**, never a Group;
3. The background color/image goes **inside the Frame itself**, not in a rectangle on top;
4. Stack the Frames **flush and in order**, with nothing loose or overlapping;
5. Put **all the content inside the block** it belongs to;
6. Use **real text** and **name** your blocks.

## What to avoid

* ❌ Building the whole page loose, without splitting it into blocks;
* ❌ Using Groups instead of Frames;
* ❌ Creating backgrounds with rectangles over or behind the content;
* ❌ Leaving elements loose, overlapping or out of order;
* ❌ Turning text into images.

All set! By following this structure, your page will be imported much more faithfully and you'll save time on adjustments. ✨

Once your layout is built this way, just follow the step by step in the article **"**[**How to IMPORT a FIGMA page into GreatPages**](https://ajuda.greatsoftwares.com.br/pt-br/article/como-importar-uma-pagina-do-figma-para-o-greatpages-aabl0/)**"** to do the import.

Still have questions? Reach out to our team on Chat! We're always happy to help. 💙