Construir una interfaz completa en Figma a partir de componentes reutilizables es más sencillo de lo que parece cuando se dominan conceptos como auto layout, fill container y hit content. Con todas las piezas del design system listas, el proceso se reduce a arrastrar, configurar y dejar que Figma haga el trabajo pesado de acomodar cada elemento de forma fluida.
¿Cómo se prepara el frame inicial para una interfaz mobile?
El punto de partida es crear un frame con la tecla F y seleccionar un dispositivo, en este caso un iPhone 8 [0:37]. A continuación se aplica la grid de cuatro columnas que ya estaba preparada en el sistema de diseño.
Al insertar la barra de navegación dentro de este frame, pueden aparecer comportamientos inesperados. La solución es convertir el frame del iPhone 8 en un contenedor con auto layout [1:02]. Esto reorganiza los elementos de forma vertical y permite que crezcan junto con el contenido.
- Seleccionar el frame y activar auto layout.
- Cambiar el comportamiento del alto de fijo a hit content, para que el frame se adapte al contenido real [1:18].
- Ajustar el ancho de la barra de navegación para que también se expanda con el contenedor.
¿Por qué es importante pasar de ancho fijo a fill container?
Cada componente que se inserta llega con un ancho fijo por defecto. Para que se adapte al contenedor, hay que cambiar esa propiedad a fill container en la barra lateral derecha [2:22]. Gracias a que los componentes ya están construidos con auto layout internamente, el contenido se redistribuye de forma fluida al cambiar el ancho del dispositivo, ya sea 375, 360 o 414 píxeles.
Este paso se repite con cada componente que se incorpore a la interfaz: el hero, las cards, el footer y cualquier otro bloque.
¿Cómo se insertan y configuran los componentes del design system?
El flujo es siempre el mismo: localizar el componente en el sistema de diseño, arrastrarlo al frame y ajustar sus propiedades.
- Hero: se hace drag and drop dentro del frame. Si el componente se ve demasiado grande, hay que verificar en las opciones de la barra lateral que esté configurado como mobile en lugar de desktop [1:52]. También conviene activar clip content en el frame para ocultar las partes que sobresalen.
- Cards: al insertarlas, se cambia la propiedad mobile false (versión desktop) a mobile true y se aplica fill container [2:42].
- Footer: mismo procedimiento, cambiar a mobile, aplicar fill container y asegurar que el alto del frame general esté en hit content [3:37].
¿Qué ventaja ofrece un layout responsive cuando cambian los textos?
Una de las grandes ventajas es que si los textos crecen o se reducen, el resto de elementos se acomodan automáticamente [3:01]. No hay que mover píxeles manualmente. Esto resulta especialmente útil cuando se trabaja con contenido dinámico, por ejemplo a través del plugin de Google Sheets que permite conectar datos reales a los componentes.
Si se añade más texto a una sección, Figma interpreta ese crecimiento y desplaza los bloques inferiores sin intervención manual. Esto ahorra tiempo y reduce errores en el proceso de diseño.
¿Qué significa aprender por ingeniería inversa en Figma?
Revisar cómo están construidos los componentes existentes es una forma muy efectiva de aprender [0:25]. Observar la estructura interna de un componente, entender qué tipo de auto layout usa, cómo están anidados los elementos y por qué se eligió determinada configuración ayuda a comprender las decisiones de diseño. Esta práctica de ingeniería inversa acelera el aprendizaje y permite replicar patrones de calidad en proyectos propios.
Con la interfaz mobile organizada y montada, el siguiente paso natural es adaptar todo para desktop. ¿Has probado a cambiar las propiedades de tus componentes para ver cómo se comportan en diferentes tamaños? Comparte tu experiencia y tus dudas.
