Ensamblando una interfaz mobile en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:25

Ensamblando una interfaz mobile en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 9 de 29

Clase 9 / 29

Recursos

Montar una interfaz responsive en Figma se vuelve sencillo cuando ya tienes tu design system listo y dominas el auto layout. Aquí aprendes a ensamblar pantallas mobile que se adaptan al contenedor, ajustan su contenido de forma fluida y aprovechan los componentes que ya construiste, sin tener que mover píxeles uno por uno.

¿Cómo preparar el frame inicial para una interfaz mobile?

Todo arranca con un frame que actúe como lienzo. Pulsas la tecla F, eliges un frame de iPhone 8 y traes la grid de cuatro columnas que ya tienes definida en tu sistema [00:36].

Al insertar la barra de navegación, notas que el diseño se rompe y aparecen comportamientos extraños. La solución es convertir el frame en auto layout: así el contenedor empieza a respetar la jerarquía de los hijos y crece según el contenido [01:05].

¿Qué es auto layout en Figma? Es una propiedad que permite que un frame y sus elementos se acomoden de forma automática según el contenido, sin necesidad de ajustar manualmente posiciones o tamaños.

¿Por qué la barra de navegación no se ajusta al ancho?

Cuando aplicas auto layout, la barra puede quedarse con su tamaño fijo original. Para que crezca con el contenedor, cambias su comportamiento de fijo a hug contents en el alto y le indicas el ancho objetivo, en este caso 414 px, que corresponde al iPhone 8 Plus [01:35].

Este pequeño ajuste hace que la navbar respire dentro del lienzo y se comporte como una pieza viva del diseño.

¿Cómo trasladar componentes del design system al diseño?

Con el frame listo, el flujo se vuelve casi un juego de armar. Identificas las piezas del diseño original (hero, trust, cards, footer) y haces drag and drop desde tu librería de componentes hacia el frame [02:05].

Una ventaja clave de los frames es que puedes activar clip content para que nada se desborde visualmente, manteniendo el lienzo limpio.

¿Cómo cambio un componente de desktop a mobile?

Muchos componentes de un design system incluyen variantes. En la sidebar derecha encuentras propiedades como mobile: true/false. Al activarla en true, el componente cambia a su versión móvil [02:35].

También conviene quitar el columnado interno del componente original cuando ya estás trabajando sobre una grid de fondo, para evitar conflictos visuales entre ambas retículas.

¿Cómo hago que el componente se adapte al contenedor?

Este es el paso que se repite en cada pieza que insertas: cambiar el ancho de fixed width a fill container [03:05]. Con esto, el componente deja de tener un ancho rígido y se estira o contrae según el frame padre.

La lógica es simple:

Fixed: el componente mantiene su tamaño aunque cambies el contenedor.
Hug contents: el contenedor se ajusta al tamaño del contenido interno.
Fill container: el componente ocupa todo el espacio disponible del padre.

Gracias a esto, el diseño funciona en un iPhone de 414 px, pero también en pantallas de 375 o 360 px sin retocar nada [05:00].

¿Por qué un layout responsive en Figma ahorra tanto trabajo?

La magia aparece cuando editas contenido. Si agregas más texto en una card, el resto de elementos se acomodan solos hacia abajo y los componentes vecinos respetan los espacios [03:45]. No tienes que mover píxeles ni reorganizar a mano.

¿Qué pasa si conecto Google Sheets con un plugin de Figma? Cuando los textos cambian en la hoja, Figma interpreta el nuevo contenido y reacomoda los elementos automáticamente, sin que tengas que ajustar la interfaz manualmente.

Este flujo combina tres ingredientes: componentes con auto layout, propiedades fill container y datos dinámicos vía plugin. El resultado es una interfaz que se actualiza sola.

¿Cómo evito que la interfaz se corte al final?

Si ves que parte del diseño queda recortada, casi siempre es porque el frame tiene un alto fijo. Cambias esa propiedad a hug contents y el lienzo crece para abarcar todo lo que metas dentro [04:25].

Este mismo principio aplica al insertar el footer: lo traes desde el sistema, activas la variante mobile, ajustas el ancho a fill container y el alto del frame a hug contents. La interfaz se completa sin esfuerzo [04:40].

¿Qué buenas prácticas conviene repetir en cada componente?

Para que una pantalla mobile responda bien a distintos tamaños, hay tres acciones que repites como un mantra:

Activar la variante mobile true en componentes con propiedades booleanas.
Cambiar el ancho de cada componente insertado a fill container.
Definir el alto del frame contenedor como hug contents para que crezca con el contenido.

Estas tres reglas convierten tu archivo en un sistema flexible, listo para escalar a otros breakpoints como el desktop.

La práctica de ingeniería inversa sobre componentes ya construidos también suma muchísimo: abrir cada pieza, ver cómo se armó y entender por qué se tomó esa decisión te enseña más que cualquier tutorial [00:25].

¿Te animas a montar tu propia pantalla mobile usando estas tres reglas? Cuéntame en los comentarios qué componente te dio más guerra al ajustarlo.