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" para hacer la importación.

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

Actualizado el: 28/07/2026