Making an Imported Page Responsive With Figma Variables

Short answer

To make an imported page responsive in Figma, you create a collection of number variables with one mode per device size, bind those variables to the gap, padding, width and height of your auto layout frames, and then set the mode on each frame. The variables hold the numbers. The mode decides which set a frame uses. An import gives you fixed numbers, so this is work you do after it.

This tutorial walks through that setup in order. It is based on Figma's own help center pages, checked on October 21, 2026, and the steps use the names Figma shows in its interface at that date.

What you need first

You need a page that is already in Figma as layers, ideally with auto layout on the frames you want to adapt. UnHTML's public pages describe auto layout as mapped from the page's actual CSS, and say that frames which cannot reproduce the captured geometry fall back to absolute positioning. Absolute positioning has no gap or padding to bind, so start with the frames that did come through as auto layout. The article on how CSS flexbox maps to Figma auto layout shows which ones to expect.

You also need a plan that supports modes. Figma says creating and using modes is available on Education, Professional, Organization and Enterprise plans, and that the number of modes per collection depends on your plan. Check yours before you plan three breakpoints.

One more thing. UnHTML's public pages do not say whether Figma variables are created or bound during an import, so this tutorial assumes none exist and builds them by hand. If your import already has some, adapt step 1 instead of duplicating them.

Step 1: Create a collection with one mode per device size

Figma defines a mode as "a list of values for a variable in a collection, storing one value per variable," and lists device sizes among the contexts modes can represent (Overview of variables, collections, and modes). That is exactly the shape a breakpoint setup needs.

1. Open the Variables view from the left navigation bar and create a collection. Call it something plain, such as Layout.
2. Rename the first mode Desktop. This is the mode every new variable gets its first value in.
3. Click New variable mode to the right of the column headers and name it Tablet. Figma copies the values from the first column into the new mode, so the two start identical.
4. Add a third mode called Mobile the same way. You can also right-click a mode header and choose Duplicate mode.

The source for these steps is Figma's page on modes for variables. A single collection can hold up to 5,000 variables, which is far more than a page layout needs.

Step 2: Create the number variables

Figma says number variables "are great at handling responsive designs," and lists width, height including minimum and maximum, padding and gap among the properties they can control. Create one variable per value you want to change across sizes. A short list is enough:

The numbers are examples, not recommendations. Read the real values off your own page: select a section, note its padding and the gap between its children, and use those as the Desktop column. Fill Tablet and Mobile with what you want at those sizes.

Name variables for what they do, not for the value. A name like card-gap survives a redesign. A name like gap-32 does not.

Step 3: Bind the variables to your frames

Now connect the variables to properties. Figma documents a different gesture for each kind of field (Apply variables to designs):

1. For gap, width and height, click into the property field and press = to open the picker, then choose the variable.
2. For padding, open the field's dropdown and select Apply variable.
3. For other properties, hold Shift and click into the field, or right-click and choose Apply variable.

Number variables are marked with a number icon in the picker. If you do not see any, you may not have a compatible variable in the file yet.

For maximum width, use the min and max fields that auto layout frames provide. Figma's auto layout page says you can enter a value in those fields or "use the dropdown to apply a number variable" (Explore auto layout properties). Pair a max width variable with Fill container on the child, which stretches the layer to occupy the available space in its parent, and the content stays centered and capped.

Work from the outside in. Bind the section padding first, then the gap inside each section, then the card widths. Fewer bound properties means fewer places to slip.

Step 4: Set the mode on a frame

With variables bound, switching a mode changes the numbers. Select a frame, find the Appearance section in the right sidebar, click Apply variable mode, and hover over the Layout collection to pick Tablet or Mobile.

Two rules from Figma's documentation decide whether this works:

• The option appears only when the frame's nested layers use at least one variable that has more than one mode. If the menu is missing, bind a variable first.
• Layers default to Auto, which means they take the mode of their parent container. If the parent is also on Auto, the layer looks higher in the hierarchy until it reaches a container with a mode set. If none has one, it uses the collection's default mode.

The practical pattern is to build three top-level frames, one per device size, and set Desktop, Tablet and Mobile on each. Everything inside inherits. You change one setting per frame, not one per layer, and you can compare all three sizes side by side.

Pitfalls to check

• On-canvas edits detach variables. Figma notes that changing an auto layout frame's padding or gap with the on-canvas controls detaches any number variables applied to it. Edit the value in the Variables view instead.
• Absolute positioning does not respond. A frame that fell back to absolute positioning has no gap or padding to drive. Convert it to auto layout first, or leave it fixed.
• Hug and Fill are separate. Hug contents applies only to auto layout frames, and Fill container applies only to children of auto layout frames. A variable cannot fix a frame whose resizing is wrong.
• Variables are not styles. Colors and text are a separate question. For those, see how to extract color styles from an imported page.

Where this leads

Once the numbers live in variables, the page stops being a snapshot. You can adjust a breakpoint by editing one cell, and every frame bound to it follows. That is also the foundation for the larger job of building a design system from an imported site, where the same collection can hold spacing, radii and widths for every page you bring in.

Conclusion

The method is short. One collection, one mode per device size, number variables for the values that change, bindings on gap, padding and width, and a mode set on each top-level frame. The import supplies the layers and their measured numbers. Figma's variables supply the logic that lets those numbers change by size. Start with one section, get it switching cleanly across the three modes, and then repeat the pattern for the rest of the page.