Dos rectángulos idénticos en color, tamaño y posición pueden comportarse de manera completamente distinta dentro de Figma. La diferencia no está en el objeto, sino en el contenedor que lo envuelve. Elegir mal ese contenedor es el error más frecuente entre quienes comienzan a diseñar, y entender las tres opciones disponibles marca la diferencia entre un archivo flexible y uno que se rompe al primer cambio.
¿Qué es un grupo y por qué funciona como una bolsa?
El grupo es la forma más básica de agrupar contenido en Figma. Al seleccionar varios elementos y agruparlos, se crea un contenedor que actúa literalmente como una bolsa: no tiene tamaño propio, sino que su área queda definida por los elementos que contiene [0:52]. Si sacas un elemento, el grupo se reduce; si lo mueves, el grupo se expande.
Existen limitaciones importantes:
- No aparecen los constraints para asignar posiciones específicas dentro del canvas.
- No se puede activar auto layout.
- No es posible agregar relleno ni stroke al contenedor.
- Al escalar, los elementos internos pierden consistencia.
En la práctica, un grupo solo resulta útil cuando necesitas mover varios elementos juntos de un lugar a otro sin preocuparte por su comportamiento responsivo [1:38].
¿Cómo funcionan los frames y por qué son el contenedor principal?
Para crear un frame a partir de una selección se utiliza clic derecho y Frame selection, o el atajo Comando + Shift + G [2:00]. Al hacerlo, el panel lateral derecho cambia por completo: aparecen los constraints, la sección de auto layout y la posibilidad de definir un color de fondo.
A diferencia del grupo, el frame tiene tamaño independiente de su contenido. Si aumentas sus dimensiones, los elementos internos respetan su posición gracias a los constraints que vienen activados por defecto —por ejemplo, fijados arriba a la izquierda [2:36].
¿Qué hace la propiedad clip content?
Una característica exclusiva del frame es el clip content [3:15]. Funciona como una ventana: todo lo que quede fuera del área visible del frame desaparece visualmente, aunque sigue existiendo dentro de la estructura. Al desactivarlo, el contenido oculto vuelve a mostrarse.
¿Qué es la anidación de frames?
El proyecto Finways ilustra perfectamente la anidación, que es la relación entre un frame padre y sus frames hijos [3:55]. La pantalla principal es un frame; dentro vive el header, que también es un frame; la tarjeta de balance es otro frame, y así sucesivamente hasta la bottom bar.
Cada hijo tiene una posición medida en píxeles respecto a su padre. Por ejemplo, una tarjeta posicionada a 24 píxeles en X y 144 píxeles en Y mantendrá esa distancia sin importar cuánto crezca el contenedor padre [4:30].
¿Cómo navegar entre frames de forma eficiente?
Existen atajos que aceleran el trabajo dentro de estructuras anidadas [5:15]:
- Enter: selecciona todos los hijos directos del frame padre.
- Tab: permite saltar entre hermanos del mismo nivel.
- Command + clic: selecciona directamente un elemento profundo, como un nodo de texto, sin recorrer cada nivel.
¿Para qué sirven las secciones en Figma?
El tercer contenedor es la sección, y su propósito es exclusivamente organizativo [5:55]. No se usa para construir prototipos ni diseños finales. Se crea desde el mismo menú de frames, seleccionando la herramienta de sección en el drop-down.
Las secciones no comparten propiedades como clip content ni auto layout. Su valor está en agrupar flujos completos dentro del canvas. Un ejemplo práctico es definir un flujo de login con sus pantallas de onboarding, formulario de inicio de sesión y estados, todo contenido bajo una sección llamada "Login" [6:15].
Una ventaja adicional: las secciones pueden marcarse como Ready for Dev, señalando al equipo de desarrollo que ese flujo está listo para implementarse [6:35]. En la estructura de capas, las secciones ocupan el primer nivel y los frames se convierten en hijos de esa sección.
La regla para decidir qué contenedor usar es directa: si la pieza necesita reaccionar a cambios de tamaño, contenido o interacción, usa un frame. Si solo quieres mover elementos juntos, un grupo basta. Y si necesitas organizar zonas del canvas, elige una sección. El error más habitual es agrupar cuando se necesita un frame —construir una barra de navegación con íconos agrupados se ve bien hasta que intentas aplicar auto layout y descubres que simplemente no funciona.
