¿Cómo organizar tu diseño con marcos, grupos y capas en Figma?

Organizar tu diseño con marcos, grupos y capas significa estructurar cada elemento dentro de contenedores lógicos para que tu archivo sea fácil de editar, escalar y compartir con otros diseñadores.

Sin organización, un archivo de Figma se convierte en un caos de capas sin nombre y elementos flotantes. Con la estructura correcta, cualquier pantalla —desde una app de Liverpool hasta un portal de FEMSA— se puede modificar en segundos.

¿Qué es un Frame en Figma?

Un Frame es el contenedor principal de cualquier pantalla o componente en Figma. Funciona como el "lienzo" de una pantalla real: un celular, una tablet o una ventana de navegador.

Cuando creas un Frame, Figma te muestra presets de dispositivos comunes. Puedes elegir iPhone 14 (390×844 px), Android Large (360×800 px) o definir dimensiones personalizadas.

Atajo para crear un Frame: presiona F en tu teclado y arrastra sobre el canvas.

Diferencia entre Frame y rectángulo

Un rectángulo es solo una forma visual. Un Frame es un contenedor inteligente: puede tener restricciones de tamaño, auto layout, y contener otros elementos organizados.

Siempre usa Frames para representar pantallas. Usa rectángulos solo para elementos visuales dentro de esas pantallas, como fondos de tarjetas o botones.

Estructura recomendada para una pantalla

Antes de dibujar cualquier elemento, define la jerarquía de tu diseño. Una estructura clara sigue este modelo:

Frame: Pantalla Principal
├── Frame: Header
│   ├── Logo
│   └── Menú de navegación
├── Frame: Contenido
│   ├── Grupo: Tarjeta de producto 1
│   │   ├── Imagen
│   │   ├── Nombre del producto
│   │   └── Precio
│   └── Grupo: Tarjeta de producto 2
└── Frame: Footer
    ├── Texto: Términos y condiciones
    └── Texto: Contacto

Esta jerarquía representa una pantalla real de una tienda en línea, como la app de Mercado Libre. Cada sección vive dentro de su propio Frame o Grupo.

¿Qué es un Grupo en Figma?

Un Grupo une varios elementos para moverlos o transformarlos juntos, sin crear un contenedor estructural. Es más ligero que un Frame.

Usa grupos para elementos que siempre se mueven juntos, como el ícono + texto de una etiqueta de precio, o el nombre + calificación de un producto en Bimbo Direct.

Atajo para agrupar: selecciona los elementos y presiona Ctrl + G (Windows) o Cmd + G (Mac).

Cuándo usar Grupo vs. Frame

La regla práctica: si necesitas que el contenedor tenga comportamiento (restricciones, auto layout, clip de contenido), usa Frame. Si solo necesitas mover elementos juntos, usa Grupo.

El panel de capas: tu mapa del archivo

El panel de capas aparece en el lado izquierdo de Figma. Muestra todos los elementos de tu archivo en orden jerárquico.

Los elementos del panel se listan de arriba hacia abajo en orden de apilamiento. El elemento más arriba en el panel aparece al frente en el canvas.

Cómo nombrar capas correctamente

Nombrar capas es tan importante como diseñar bien. Un diseñador que entrega un archivo con capas llamadas Rectangle 47 o Group 12 dificulta el trabajo del equipo.

Convención de nombres recomendada:

• Usa nombres descriptivos: Header / Logo, Tarjeta / Precio, Botón / Comprar ahora
• Usa / como separador de jerarquía para que Figma los organice como componentes
• Escribe en minúsculas con mayúscula inicial: Menú principal, Imagen de portada

Cómo renombrar una capa: haz doble clic sobre el nombre en el panel de capas.

Atajo para renombrar múltiples capas a la vez: selecciona varias capas, presiona Ctrl + R (Windows) o Cmd + R (Mac), y Figma abre un panel de renombrado masivo.

Tres ejemplos prácticos con contexto mexicano

Ejemplo 1: Pantalla de inicio de una app de pagos (OXXO Pay)

Imagina que diseñas la pantalla de inicio de una app de pagos inspirada en OXXO Pay. Tu estructura en Figma sería:

Frame: Home_OXXOPay (390×844)
├── Frame: Header
│   ├── Ícono: Menú hamburguesa
│   └── Texto: "Hola, Carlos"
├── Frame: Saldo
│   ├── Texto: "Tu saldo disponible"
│   └── Texto: "$1,200"
├── Frame: Acciones rápidas
│   ├── Grupo: Botón_Enviar
│   ├── Grupo: Botón_Recibir
│   └── Grupo: Botón_Pagar
└── Frame: Movimientos recientes
    ├── Grupo: Movimiento_1
    └── Grupo: Movimiento_2

Cada sección tiene nombre claro. Los botones están agrupados. El Frame principal tiene las dimensiones de iPhone 14.

Ejemplo 2: Tarjeta de producto para Liverpool

Una tarjeta de producto contiene imagen, nombre, precio y botón. La estructura correcta:

Frame: Tarjeta_Producto (320×400)
├── Imagen: Foto_Producto
├── Texto: Nombre_Producto — "Licuadora Oster 1200W"
├── Texto: Precio — "$2,499"
├── Texto: Precio_anterior — "$3,200"
└── Frame: Botón_Agregar
    └── Texto: "Agregar al carrito"

El botón es un Frame (no un grupo) porque necesita padding interno y puede recibir Auto Layout. La tarjeta completa también es un Frame para que pueda repetirse como componente.

Ejemplo 3: Barra de navegación para un portal corporativo de FEMSA

Frame: Navbar (1440×72)
├── Grupo: Marca
│   ├── Logo_FEMSA
│   └── Texto: "Portal Corporativo"
├── Grupo: Links_Navegación
│   ├── Texto: "Inicio"
│   ├── Texto: "Productos"
│   ├── Texto: "Sustentabilidad"
│   └── Texto: "Contacto"
└── Frame: Botón_Sesión
    └── Texto: "Iniciar sesión"

Este navbar usa el preset de Desktop (1440 px de ancho). Los links de navegación están en un Grupo porque siempre se mueven juntos.

Errores comunes al organizar capas

Error 1: Dejar elementos fuera de cualquier Frame

Cuando creas formas directamente en el canvas sin Frame, aparecen como "elementos sueltos" en el panel de capas. Esto rompe la organización y complica la exportación.

Solución: selecciona el elemento suelto y usa Ctrl + Alt + G para envolverlo en un Frame de inmediato.

Error 2: No nombrar las capas

Figma asigna nombres genéricos como Rectangle 3 o Frame 7. Si tu archivo tiene 50 capas sin nombre, nadie puede entenderlo.

Solución: nombra cada capa en el momento en que la creas. Dedica 5 segundos por capa; ahorrarás horas de confusión después.

Error 3: Anidar demasiados Frames dentro de Frames

Cuando anidas cinco o seis niveles de Frames sin necesidad, el archivo se vuelve lento y difícil de navegar. No todo necesita ser un Frame.

Solución: usa Grupos para agrupaciones simples que no necesiten comportamiento especial. Reserva los Frames para secciones reales y componentes interactivos.

Error 4: Usar el mismo nombre para capas distintas

Tener tres capas llamadas Texto o dos llamadas Botón en el mismo Frame genera confusión al trabajar con componentes y al exportar.

Solución: agrega un descriptor único: Texto_Precio, Texto_Nombre, Botón_Primario, Botón_Secundario.

Atajos esenciales para organizar capas

Puntos clave para recordar

• Usa Frames para representar pantallas completas y secciones principales; son la base de cualquier diseño escalable.
• Usa Grupos para unir elementos que se mueven juntos pero no necesitan comportamiento de contenedor.
• Nombra todas tus capas con descriptores únicos; un archivo bien nombrado puede ser trabajado por cualquier persona del equipo sin explicaciones.
• La jerarquía correcta es: Frame principal → Frames de sección → Grupos de elementos → Capas individuales.
• El atajo Ctrl + Alt + G (Mac: Cmd + Option + G) envuelve cualquier elemento suelto en un Frame en un solo paso.