Trabajo con frames y retículas

En Figma, cada proyecto comienza con frames, y entender cómo configurarlos correctamente marcará la diferencia entre un diseño amateur y uno profesional. Los frames pueden representar pantallas completas de una aplicación, componentes individuales, iconos, o cualquier área de trabajo que necesites definir. La flexibilidad que ofrece Figma en este aspecto es tremendous, ya que puedes crear frames de cualquier tamaño y anidarlos según la complejidad de tu diseño.

Las retículas, por otro lado, son el secreto de los diseñadores que crean interfaces armónicas y consistentes. Imagina construir una casa sin cimientos nivelados: eventualmente todo se desmoronaría. De la misma manera, un diseño sin retículas coherentes se sentirá desorganizado, inconsistente y difícil de escalar. Las retículas te permiten establecer una estructura visual subyacente que guía la placement de cada elemento, creando ritmo visual y mejorando la experiencia del usuario final.

¿Qué es un Frame en Figma?

Un frame en Figma es básicamente un contenedor rectangular que define un área de trabajo específica. Anteriormente conocido como "artboards" en otras herramientas como Adobe Illustrator, los frames en Figma son mucho más versátiles. Pueden representar:

• Pantallas completas de una aplicación móvil o web
• Componentes de interfaz reutilizables
• Grupos de elementos relacionados
• Áreas de exportación específicas
• Prototipos de diferentes estados de un diseño

Para crear un frame en Figma, tienes varias opciones: puedes usar el atajo de teclado F para crear un frame con las dimensiones predefinidas más comunes, o puedes hacer clic en la herramienta Frame en el panel izquierdo y seleccionar manualmente el tamaño que necesites. Figma ofrece una extensa biblioteca de preset frames que cubren prácticamente todos los dispositivos y formatos standard: iPhone, Android, tablets, pantallas de escritorio, redes sociales, y más.

Un buen diseño comienza con un buen frame. La calidad de tu estructura base determinará la facilidad con la que podrás construir, iterar y escalar tu diseño.

Creando tu primer Frame profesional

Vamos a crear un frame paso a paso para que puedas practicar inmediatamente:

1. Abre Figma y crea un nuevo archivo. Verás un lienzo en blanco con una cuadrícula de puntos sutil.
2. Selecciona la herramienta Frame presionando la tecla F en tu teclado, o haciendo clic en el ícono de Frame en la barra de herramientas izquierda.
3. Elige un preset en el panel derecho. Para empezar, selecciona "Desktop" o "iPhone 14 Pro" si quieres diseñar para móvil.
4. Personaliza las dimensiones si los presets no se ajustan a tus necesidades. Puedes ingresar valores específicos en pixels en el panel derecho.
5. Nombra tu frame descriptivamente haciendo doble clic en el nombre en el panel de capas. Usa un naming convention como "01_Home_Dark" o "Screen_Login".

Configurando propiedades del Frame

Cada frame tiene propiedades configurables que afectan su comportamiento y apariencia:

• Dimensiones (width/height): El tamaño exacto del frame en pixels.
• Posición (X/Y): La ubicación del frame en el lienzo.
• Rotación: El ángulo de rotación del frame completo.
• Corner radius: Redondeo de las esquinas del frame.
• Fill: Color o imagen de fondo del frame.
• Stroke: Borde alrededor del frame.
• Effects: Sombras, blur u otros efectos visuales.

Para acceder a estas propiedades, selecciona el frame y observa el panel derecho. Aquí encontrarás todas las opciones organizadas en secciones. La sección Layout es particularmente importante ya que te permite configurar sistemas de auto-layout y retículas.

Introducción a las Retículas en Figma

Las retículas o grids son sistemas de líneas que se superponen a tus frames para ayudarte a organizar elementos visualmente. Figma ofrece tres tipos principales de retículas:

1. Retícula regular (Regular Grid)

Es una cuadrícula de celdas cuadradas uniformes. Es útil para diseños que no siguen una estructura de columnas, como interfaces con muchos elementos flotantes o diseños creativos no convencionales.

2. Retícula de columnas (Columns Grid)

Es el sistema más utilizado en diseño web y de aplicaciones. Divide el frame en columnas verticales con márgenes laterales. Por ejemplo, un layout de 12 columnas es estándar para diseño web responsive, mientras que 4 columnas funciona bien para diseños móviles simples.

3. Retícula de filas (Rows Grid)

Divide el frame en filas horizontales. Es menos común pero útil para diseños con estructura tabular o cuando trabajas con listas de altura consistente.

Configurando retículas paso a paso

1. Selecciona tu frame haciendo clic en él o en el nombre en el panel de capas.
2. Abre el panel de Layout en el lado derecho de la pantalla.
3. Busca la sección "Grid" o "Margins" dependiendo de tu versión de Figma.
4. Elige el tipo de retícula: Columns, Rows o Grid.
5. Configura los parámetros: número de columnas, gutter (espacio entre columnas), y márgenes laterales.
6. Ajusta el color y opacidad de las líneas de la retícula si necesitas hacerlas más visibles.

/* Ejemplo de configuración de retícula para web responsive */
Frame: Desktop Layout
- Width: 1440px
- Columns: 12
- Gutter: 24px
- Margins: 80px (izquierda y derecha)

Frame: Tablet Layout  
- Width: 1024px
- Columns: 8
- Gutter: 24px
- Margins: 48px

Frame: Mobile Layout
- Width: 375px
- Columns: 4
- Gutter: 16px
- Margins: 16px

Trabajando con múltiples Frames y retículas

En proyectos reales, trabajarás con docenas o cientos de frames. Es crucial organizar tu espacio de trabajo de manera lógica:

Estrategias de organización

• Usa páginas para separar grandes secciones: "00_Documentation", "01_Screens", "02_Components", "03_Icons".
• Nombra tus frames de manera descriptiva y consistente. Un buen sistema es: "[Número]_[Pantalla]_[Estado]".
• Agrupa frames relacionados en componentes o secciones usando frames padres.
• Usa variantes para diferentes estados de un mismo diseño (light/dark, loading/success/error).

Para crear una estructura de frames anidados, simplemente:

1. Crea un frame padre que contenga todo tu diseño.
2. Selecciona múltiples frames manteniendo Shift y haciendo clic.
3. Usa el shortcut Cmd/Ctrl + Alt + G para envolverlos en un frame contenedor.
4. Aplica retículas al frame padre para mantener consistencia en todo el layout.

Auto Layout y Retículas: Combinación poderosa

El Auto Layout es una功能 de Figma que permite crear frames que se ajustan automáticamente según su contenido. Combinado con retículas, puedes crear diseños verdaderamente responsivos dentro del mismo archivo.

Alineación y snapping en Figma

Figma incluye herramientas de alineación automática que trabajan en conjunto con tus retículas:

• Smart guides: Líneas temporales que aparecen cuando alineas elementos con otros elementos o con el borde del frame.
• Snap to grid: Cuando está activado, los elementos "encajan" en las líneas de la retícula al moverlos.
• Pixel grid: Opciones para snapear a pixels exactos o a fractions de pixels para más precisión.

Para activar el snap a retícula:

1. Ve al menú View en la barra superior.
2. Busca "Snap to grid" y actívalo.
3. También activa "Show grid" para visualizar permanentemente las líneas de la retícula.
4. Para más opciones, ve a View > UI Preferences > Show component specific properties.

Buenas prácticas para Frames y Retículas

Errores frecuentes que debes evitar

Ejercicio práctico: Diseña un header responsive

Vamos a aplicar todo lo aprendido diseñando un header de navegación que funcione en desktop y móvil:

1. Crea un frame de Desktop (1440x80px para el header).
2. Configura una retícula de 12 columnas con gutter de 24px y márgenes de 80px.
3. Dibuja el logo alineado a la columna 1, y el menú de navegación alineado a las columnas 8-12.
4. Duplica el frame y renómbralo para Tablet (1024x80px). Ajusta la retícula a 8 columnas con márgenes de 48px.
5. Duplica nuevamente para Mobile (375x64px). Cambia la retícula a 4 columnas con márgenes de 16px.
6. Adapta los elementos: en móvil, el menú se convierte en un icono hamburguesa.

/* Sistema de espaciado basado en retícula de 8px */
.margen-xs: 8px   /* Muy pequeño, entre elementos relacionados */
.margen-sm: 16px  /* Pequeño, dentro de componentes */
.margen-md: 24px  /* Medio, entre secciones relacionadas */
.margen-lg: 32px  /* Grande, entre secciones principales */
.margen-xl: 48px  /* Extra grande, separaciones mayores */
.margen-xxl: 64px /* Máximo, márgenes de page */

La consistencia es el puente entre el diseño y el desarrollo. Un sistema de retícula bien implementado reduce la fricción entre diseñadores y desarrolladores, ya que ambos pueden referirse a las mismas reglas de espaciado.

Herramientas complementarias

Además de los frames y retículas nativas de Figma, existen plugins que pueden mejorar tu flujo de trabajo:

Resumen y próximos pasos

Has aprendido los fundamentos del trabajo con frames y retículas en Figma. Ahora puedes crear frames de cualquier dimensión, configurar retículas adaptadas a tus necesidades, organizar múltiples pantallas de manera lógica, y aplicar buenas prácticas que te distinguen como diseñador profesional.

En la próxima lección exploraremos los componentes y estilos, donde aprenderás a crear elementos reutilizables que mantendrán la consistencia en todo tu proyecto. Dominar los frames y retículas es solo el primer paso; los componentes son lo que verdaderamente hacen escalable un sistema de diseño.