Cómo hacer responsive una página importada con variables de Figma

Respuesta corta

Para hacer responsive una página importada en Figma, creas una colección de variables numéricas con un modo por tamaño de dispositivo, vinculas esas variables al gap, al padding, al ancho y al alto de tus frames con auto layout, y después fijas el modo en cada frame. Las variables guardan los números. El modo decide qué conjunto usa un frame. Una importación te da números fijos, así que este trabajo lo haces después.

Este tutorial recorre esa configuración en orden. Se basa en las propias páginas del centro de ayuda de Figma, consultadas el 21 de octubre de 2026, y los pasos usan los nombres que Figma muestra en su interfaz en esa fecha.

Qué necesitas antes de empezar

Necesitas una página que ya esté en Figma como capas, idealmente con auto layout en los frames que quieres que se adapten. Las páginas públicas de UnHTML describen el auto layout como derivado del CSS real de la página, y dicen que los frames que no pueden reproducir la geometría capturada recurren al posicionamiento absoluto. El posicionamiento absoluto no tiene gap ni padding que vincular, así que empieza por los frames que sí llegaron como auto layout. El artículo sobre cómo se corresponde flexbox de CSS con el auto layout de Figma te muestra cuáles esperar.

También necesitas un plan que admita modos. Figma indica que crear y usar modos está disponible en los planes Education, Professional, Organization y Enterprise, y que el número de modos por colección depende del plan. Compruébalo antes de planificar tres breakpoints.

Una cosa más. Las páginas públicas de UnHTML no dicen si se crean o se vinculan variables de Figma durante una importación, así que este tutorial da por hecho que no hay ninguna y las construye a mano. Si tu importación ya trae algunas, adapta el paso 1 en lugar de duplicarlas.

Paso 1: crea una colección con un modo por tamaño de dispositivo

Figma define un modo como "a list of values for a variable in a collection, storing one value per variable" y cita los tamaños de dispositivo entre los contextos que un modo puede representar (Overview of variables, collections, and modes). Es justo la forma que necesita una configuración de breakpoints.

1. Abre la vista Variables desde la barra de navegación izquierda y crea una colección. Ponle un nombre sencillo, como Layout.
2. Cambia el nombre del primer modo a Desktop. Es el modo en el que cada variable nueva recibe su primer valor.
3. Haz clic en New variable mode, a la derecha de los encabezados de columna, y llámalo Tablet. Figma copia los valores de la primera columna en el modo nuevo, así que ambos empiezan idénticos.
4. Añade un tercer modo llamado Mobile de la misma manera. También puedes hacer clic derecho en el encabezado de un modo y elegir Duplicate mode.

La fuente de estos pasos es la página de Figma sobre modos para variables. Una sola colección admite hasta 5.000 variables, mucho más de lo que necesita el diseño de una página.

Paso 2: crea las variables numéricas

Figma dice que las variables numéricas "are great at handling responsive designs" y enumera el ancho, el alto (incluidos mínimo y máximo), el padding y el gap entre las propiedades que pueden controlar. Crea una variable por cada valor que quieras cambiar entre tamaños. Basta una lista corta:

Los números son ejemplos, no recomendaciones. Lee los valores reales de tu propia página: selecciona una sección, anota su padding y el gap entre sus hijos, y usa esos valores como columna Desktop. Rellena Tablet y Mobile con lo que quieras en esos tamaños.

Nombra las variables por lo que hacen, no por su valor. Un nombre como card-gap sobrevive a un rediseño. Uno como gap-32 no.

Paso 3: vincula las variables a tus frames

Ahora conecta las variables con las propiedades. Figma documenta un gesto distinto para cada tipo de campo (Apply variables to designs):

1. Para gap, ancho y alto, haz clic en el campo de la propiedad y pulsa = para abrir el selector; luego elige la variable.
2. Para el padding, abre el menú desplegable del campo y selecciona Apply variable.
3. Para otras propiedades, mantén pulsada Shift y haz clic en el campo, o haz clic derecho y elige Apply variable.

Las variables numéricas se marcan con un icono de número en el selector. Si no ves ninguna, puede que aún no haya una variable compatible en el archivo.

Para el ancho máximo, usa los campos de mínimo y máximo que ofrecen los frames con auto layout. La página de auto layout de Figma dice que puedes introducir un valor en esos campos o "use the dropdown to apply a number variable" (Explore auto layout properties). Combina una variable de ancho máximo con Fill container en el hijo, que estira la capa para ocupar el espacio disponible en su padre, y el contenido se mantiene centrado y acotado.

Trabaja de fuera hacia dentro. Vincula primero el padding de la sección, luego el gap dentro de cada sección y, por último, los anchos de las tarjetas. Cuantas menos propiedades vinculadas, menos sitios donde equivocarse.

Paso 4: fija el modo en un frame

Con las variables vinculadas, cambiar de modo cambia los números. Selecciona un frame, busca la sección Appearance en la barra lateral derecha, haz clic en Apply variable mode y sitúa el cursor sobre la colección Layout para elegir Tablet o Mobile.

Dos reglas de la documentación de Figma deciden si esto funciona:

• La opción aparece solo cuando las capas anidadas del frame usan al menos una variable con más de un modo. Si falta el menú, vincula primero una variable.
• Las capas usan Auto por defecto, lo que significa que toman el modo de su contenedor padre. Si el padre también está en Auto, la capa mira más arriba en la jerarquía hasta llegar a un contenedor con un modo fijado. Si ninguno lo tiene, usa el modo predeterminado de la colección.

El patrón práctico es construir tres frames de nivel superior, uno por tamaño de dispositivo, y fijar Desktop, Tablet y Mobile en cada uno. Todo lo que contienen hereda. Cambias un ajuste por frame, no uno por capa, y puedes comparar los tres tamaños lado a lado.

Errores frecuentes que conviene revisar

• Las ediciones en el lienzo desvinculan las variables. Figma señala que cambiar el padding o el gap de un frame con auto layout con los controles del lienzo desvincula cualquier variable numérica aplicada. Edita el valor en la vista Variables.
• El posicionamiento absoluto no responde. Un frame que recurrió al posicionamiento absoluto no tiene gap ni padding que controlar. Conviértelo primero a auto layout o déjalo fijo.
• Hug y Fill son cosas distintas. Hug contents solo se aplica a frames con auto layout, y Fill container solo a los hijos de frames con auto layout. Una variable no arregla un frame cuyo redimensionado es incorrecto.
• Las variables no son estilos. El color y el texto son otra cuestión. Para eso, consulta cómo extraer estilos de color de una página importada.

Adónde lleva esto

Cuando los números viven en variables, la página deja de ser una instantánea. Puedes ajustar un breakpoint editando una sola celda, y todos los frames vinculados a ella lo siguen. Es también la base de la tarea mayor de construir un sistema de diseño a partir de un sitio importado, donde la misma colección puede guardar espaciados, radios y anchos de cada página que traigas.

Conclusión

El método es corto. Una colección, un modo por tamaño de dispositivo, variables numéricas para los valores que cambian, vínculos en gap, padding y ancho, y un modo fijado en cada frame de nivel superior. La importación aporta las capas y sus números medidos. Las variables de Figma aportan la lógica que permite que esos números cambien según el tamaño. Empieza por una sola sección, haz que cambie bien entre los tres modos y luego repite el patrón en el resto de la página.