Organizar tu espacio de trabajo en Figma marca la diferencia entre un diseño que escala y uno que toca rehacer cada vez. Aquí verás cómo usar frames, grupos y constraints para crear interfaces responsivas y mantener consistencia entre dispositivos.

Esta guía te sirve si diseñas interfaces, colaboras en equipo o quieres que tu archivo siga siendo entendible cuando vuelvas a él semanas después.

¿Qué diferencia hay entre un grupo y un frame en Figma?

La distinción es clave porque define cómo se comportan los elementos cuando cambias el tamaño del contenedor.

Un grupo funciona como una caja flexible: Figma ignora las fronteras internas y trata todo como un bloque. Cuando estiras un grupo desde una esquina, los elementos internos se reescalan siguiendo la dirección del arrastre, sin respetar proporciones específicas [01:38].

Si en cambio seleccionas varios elementos sueltos sin agrupar y los redimensionas, Figma le da relevancia al rectángulo de fondo, pero los objetos internos siguen cambiando de tamaño según la dirección del movimiento.

Un frame es distinto. Es un contenedor con reglas. Cuando cambias sus dimensiones, los objetos dentro no se deforman: se reposicionan según los constraints que les hayas asignado [02:45].

¿Cuándo uso un frame y cuándo un grupo? Usa frame cuando quieras que los elementos respeten alineaciones específicas al redimensionar, como en interfaces. Usa grupo cuando solo necesites mover varios objetos juntos sin reglas de comportamiento.

¿Cómo funcionan los constraints dentro de un frame?

Los constraints son las reglas de alineación que aparecen en la barra de propiedades cuando seleccionas un objeto dentro de un frame.

Cada elemento puede anclarse a una posición específica del contenedor:

• Arriba a la izquierda, para títulos o logos.
• Arriba a la derecha, para íconos de batería, wifi o señal.
• Abajo a la izquierda o derecha, para barras de navegación o botones flotantes.
• Left and right, para que el elemento se expanda horizontalmente con el frame.
• Scale, para que el objeto crezca proporcionalmente con el contenedor [06:30].

Este comportamiento es exactamente lo que necesitas para diseño de interfaces. Si piensas en una página web, la barra de navegación superior siempre debería quedarse arriba y expandirse a lo ancho, sin importar el tamaño de pantalla.

¿Qué tipos de frames puedo crear en Figma?

Figma trae presets para casi cualquier dispositivo. Puedes acceder a ellos presionando la tecla F o la A (de artboard, nombre que se usaba antes) [04:20].

Los más comunes son:

• Android compact, para diseño móvil Android.
• iPhone 13 mini, una buena base para iOS pequeño.
• iPad mini y Surface Pro, para tablets.
• MacBook Air, con resolución 1280x832, ideal para empezar diseño web desktop.

El número 832 de altura del MacBook Air tiene un significado importante: marca el fold, el punto donde termina la primera vista de una página web antes de hacer scroll. Usarlo como referencia te ayuda a decidir qué información debe ir visible desde el primer momento.

¿Cómo hago un diseño responsive con frames anidados?

La magia ocurre cuando metes frames dentro de frames. Cada frame interno puede tener sus propios constraints respecto al frame padre.

Imagina que pones un iPhone 13 mini dentro de un MacBook Air. Al iPhone le puedes asignar el constraint scale para que crezca proporcionalmente cuando agrandes el MacBook. Al texto que está dentro del iPhone le asignas alineación a la derecha si quieres que persiga ese movimiento.

¿Qué es un constraint en Figma? Es la regla de posición que le asignas a un objeto dentro de un frame. Define si el elemento se queda arriba, abajo, a los lados, se centra o escala cuando el frame cambia de tamaño.

¿Cómo aplico constraints a una barra de navegación móvil?

Este es el caso real que aplica al proyecto de Apata. La barra superior de un iPhone tiene la hora, wifi, señal, batería, notificaciones y tabs de navegación.

El proceso correcto va de adentro hacia afuera:

1. Selecciona los íconos pequeños (wifi, batería, señal) y aplícales constraint a la derecha.
2. La hora la dejas anclada a la izquierda.
3. El frame contenedor de esa fila lo configuras como left and right para que se expanda horizontalmente.
4. Los íconos secundarios de notificación los anclas arriba y a la derecha.
5. La sección de tabs la dejas arriba y a la izquierda, pero la línea divisoria la configuras left and right para que crezca con el ancho [11:40].
6. Finalmente, al frame padre Top le aplicas también left and right.

Con esa configuración, cuando arrastras el frame para hacerlo más ancho, todos los elementos se reposicionan automáticamente respetando sus distancias originales (28 píxeles laterales, 8 píxeles superiores).

Esto es especialmente útil para iOS, donde hoy se manejan cinco o seis tamaños distintos: iPhone mini, iPhone, iPhone Pro y iPhone Pro Max [10:55]. Con un solo diseño bien construido puedes generar todas las variantes sin reescalar manualmente cada ícono.

¿Tienes dudas sobre cómo aplicar constraints en tu propio proyecto? Cuéntame en los comentarios qué interfaz estás diseñando.