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

# Cómo ARMAR tu diseño en FIGMA para importarlo en GreatPages

¿Quieres que tu página de Figma sea importada con fidelidad y sin desorden? ¡Entonces la organización de tu archivo hace toda la diferencia! 💙

La importación automática "lee" la forma en que armaste el diseño en Figma. Si el archivo está organizado de la manera correcta, el resultado sale fiel a lo que diseñaste. Si está desordenado, la página puede quedar con elementos fuera de lugar, fondos equivocados o superpuestos.

En este artículo aprenderás el paso a paso para armar tu diseño correctamente. ¡Es más simple de lo que parece! 😉

## La idea principal: arma el sitio como una pila de bloques

Todo sitio es una **pila de bloques horizontales, uno debajo del otro**, de arriba hacia abajo. Por ejemplo:

* Bloque del **encabezado** (logo + menú)
* Bloque del **banner** principal
* Bloque de **diferenciales**
* Bloque de **fotos / galería**
* Bloque del **pie de página**

Cada bloque queda **pegado** al de arriba y al de abajo, **sin huecos** y **sin nada pasando por encima del otro**.

## Paso a paso para armarlo correctamente

### 1. Separa el sitio en bloques

Antes que nada, piensa: ¿cuántas "franjas" horizontales tiene tu sitio? (encabezado, banner, diferenciales, fotos, testimonios, pie de página...). Cada franja será un bloque.

### 2. Cada bloque debe ser un Frame (nunca un Grupo)

Este es el punto **más importante**.

Después de armar los elementos de un bloque:

1. Selecciona todos los elementos de ese bloque;
2. Haz clic con el **botón derecho**;
3. Elige **"Frame selection"**.

⚠️ Usa siempre **Frame**, nunca **Group** (Ctrl + G). Los grupos no funcionan bien en la importación, porque no guardan el color de fondo ni la organización. Siempre que sea posible, trabaja con Frames.

### 3. Coloca el color o la imagen de fondo DENTRO del Frame

No dibujes un rectángulo de color detrás de los elementos para hacer el fondo. En su lugar:

1. Haz clic en el **propio Frame** del bloque;
2. En el panel de la derecha, en **Fill**, elige el color o la imagen de fondo.

⚠️ Los rectángulos sueltos por encima o por detrás del contenido confunden la importación: el sistema no puede saber qué es fondo y qué es contenido. El fondo es una propiedad del Frame, no un elemento separado.

### 4. Apila los Frames pegados y en orden

Coloca los bloques uno debajo del otro, **en el mismo orden en que aparecen en el sitio** — desde el encabezado (arriba) hasta el pie de página (abajo).

* Sin espacios vacíos entre los bloques;
* Sin que un bloque se superponga a otro;
* En el orden correcto de arriba hacia abajo.

### 5. Todo dentro del bloque correcto — nada suelto

Todo elemento que aparece en un bloque (texto, botón, imagen, ícono) debe estar **dentro del Frame de ese bloque**. Nada puede quedar suelto, flotando por fuera o encima de otro bloque.

### 6. Centraliza el contenido del bloque

Aunque el bloque ocupe todo el ancho de la pantalla, el **contenido** (textos y botones) debe quedar **centrado**, dentro de un área central. Evita dejar el texto pegado a los bordes de la pantalla.

Consejo: dentro de cada Frame de bloque, crea un Frame más pequeño centrado para sostener los textos y botones. Así el contenido queda alineado y organizado.

### 7. Usa textos de verdad

Escribe los títulos y párrafos usando la **herramienta de texto** de Figma (tecla **T**). No transformes el texto en imagen ni "aplanes" los elementos — eso impide que el texto sea editable después en GreatPages.

### 8. Ponles nombre a tus bloques

Renombra los Frames con nombres claros: **Encabezado**, **Banner**, **Diferenciales**, **Galería**, **Pie de página**... Esto hace que todo sea más fácil de encontrar y ayuda a la hora de ajustar la página.

## Resumen rápido

1. Separa el sitio en **bloques horizontales**, de arriba hacia abajo;
2. Cada bloque debe ser un **Frame**, nunca un Grupo;
3. El color/imagen de fondo va **dentro del propio Frame**, no en un rectángulo por encima;
4. Apila los Frames **pegados y en orden**, sin nada suelto ni superpuesto;
5. Coloca **todo el contenido dentro del bloque** al que pertenece;
6. Usa **textos de verdad** y **ponles nombre** a tus bloques.

## Qué evitar

* ❌ Armar la página entera suelta, sin dividirla en bloques;
* ❌ Usar Grupos en lugar de Frames;
* ❌ Hacer el fondo con rectángulos por encima o por detrás del contenido;
* ❌ Dejar elementos sueltos, superpuestos o fuera de orden;
* ❌ Transformar textos en imágenes.

¡Listo! Siguiendo esta organización, tu página será importada con mucha más fidelidad y ahorrarás tiempo de ajustes. ✨

Después de armar el diseño así, solo tienes que seguir el paso a paso del artículo **"**[**Cómo IMPORTAR una página de FIGMA a GreatPages**](https://ajuda.greatsoftwares.com.br/es/article/como-importar-una-pagina-de-figma-1s5yyaa/)**"** para hacer la importación.

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. 💙