Estructura pantallas complejas con frames y grids

Concepto clave

En Figma, un frame es el contenedor principal donde diseñas tus pantallas. Piensa en él como el lienzo de un pintor o la hoja de papel donde dibujas. Los frames te permiten definir el tamaño exacto de tu pantalla (como 375x812px para un iPhone) y organizar todos los elementos dentro de ella.

Los grids son sistemas de guías invisibles que ayudan a alinear y distribuir elementos de manera consistente. Imagina que estás organizando libros en una estantería: sin divisiones, los libros quedarían desordenados, pero con estantes equidistantes, todo se ve organizado y profesional. En diseño de interfaces, los grids cumplen esa misma función de crear orden visual.

"Un buen grid es como la estructura de un edificio: no se ve, pero sostiene todo el diseño." - Principio de diseño de producto

Cómo funciona en la práctica

Vamos a crear una pantalla de inicio para una app móvil paso a paso:

1. Abre Figma y crea un nuevo archivo
2. Selecciona la herramienta Frame (tecla F) y elige "iPhone 13" (375x812px)
3. Activa el grid: ve al panel derecho, sección "Design", haz clic en "+" junto a Layout grid
4. Configura un grid de 8 columnas con 16px de gutter (espacio entre columnas)
5. Añade un header: crea un rectángulo de 375x64px en la parte superior
6. Usa el grid para colocar un logo a 24px del borde izquierdo y un icono de menú a 24px del derecho
7. Crea una sección de contenido principal dividida en 2 columnas usando el grid como referencia

La tabla muestra configuraciones comunes de grids:

Caso de estudio

Diseñemos la pantalla de perfil de usuario para una app de fitness. Esta pantalla contiene:

• Foto de perfil circular
• Nombre y título
• Estadísticas (3 métricas)
• Historial de actividades
• Botones de acción

Creamos un frame de 375x812px con grid de 6 columnas. La foto de perfil ocupa 2 columnas, centrada. El nombre usa 4 columnas. Las estadísticas se distribuyen en 3 grupos de 2 columnas cada una. El historial usa las 6 columnas completas. Los botones se alinean usando los márgenes del grid.

El resultado es una pantalla donde todos los elementos respetan la misma estructura invisible, creando consistencia visual y facilitando la implementación por parte de los desarrolladores.

Errores comunes

1. No usar grids consistentes: Cambiar la configuración del grid entre pantallas relacionadas. Solución: Define un sistema de grid al inicio del proyecto y mantenlo.
2. Ignorar los márgenes del grid: Colocar elementos pegados a los bordes. Solución: Respeta siempre los márgenes definidos en tu grid.
3. Crear frames del tamaño incorrecto: Usar dimensiones arbitrarias. Solución: Investiga los breakpoints estándar de tu plataforma objetivo.
4. No anidar frames correctamente: Poner todos los elementos en el mismo nivel. Solución: Usa frames dentro de frames para agrupar elementos relacionados.
5. Olvidar el espaciado vertical: Enfocarse solo en la alineación horizontal. Solución: Define también un grid de filas o usa Auto Layout para espaciado vertical.

Checklist de dominio

• Puedo crear un frame con las dimensiones correctas para mi dispositivo objetivo
• Sé configurar un grid con columnas, gutter y márgenes apropiados
• Puedo alinear elementos visualmente usando las guías del grid
• Reconozco cuando un diseño rompe la estructura del grid
• Sé organizar elementos complejos dentro de un frame usando anidamiento
• Puedo explicar por qué elegí cierta configuración de grid
• Mantengo consistencia de grids entre pantallas relacionadas

Diseña una pantalla de lista de productos usando frames y grids

En este ejercicio crearás una pantalla de catálogo para una app de e-commerce.

1. Crea un nuevo frame de 375x812px (iPhone 13)
2. Configura un grid de 6 columnas con 16px de gutter y 16px de margen
3. Diseña un header con: logo (2 columnas), barra de búsqueda (3 columnas), icono de carrito (1 columna)
4. Crea una sección de filtros con 3 botones distribuidos equitativamente en 6 columnas
5. Diseña al menos 3 cards de producto que muestren: imagen, nombre, precio y rating
6. Cada card debe ocupar exactamente 3 columnas del grid
7. Organiza las cards en 2 filas usando el espaciado vertical consistente
8. Añade un footer con navegación (4 iconos distribuidos en 6 columnas)

Guarda tu diseño como "Ejercicio_Grids" y exporta una imagen PNG.

• Recuerda que 6 columnas divididas entre 3 elementos = 2 columnas por elemento
• Usa el atajo Ctrl+G para agrupar elementos relacionados en frames
• Puedes duplicar elementos con Alt+arrastrar para mantener consistencia

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.