< Back

Responsive design

With figma.to.website, you can create responsive websites that will adapt to multiple device sizes from mobile to desktop.

The first step: it must be responsive in Figma

Your top frame must be responsive in Figma.
Make sure your top frame is using Auto layout and that it hugs content vertically.

Look for articles and videos online about building responsive designs in Figma.

TIP:

The top frame can have a max-width (auto layout required) and figma.to.design will respect it and center it if the viewport is wider.

Breakpoints with variables

Requires a Figma professional licence to access multiple “variable modes”.

figma.to.website interprets specific variables modes and switches the variables based on the viewport size.

Create a collection of variables with the following modes:

“Desktop” => viewport >= 1440 pixels
“Laptop” => viewport >= 1024 pixels
“Tablet” => viewport >= 768 pixels
“Phone” => viewport < 768 pixels

You don’t need to use all 4 modes. You can choose to only use 2 or 3 of these modes. figma.to.website will adapt accordingly.

Adjust the breakpoint values by adding a “min-width” variable to the modes as seen in the screenshot below.

You can now use the variables in your designs and figma.to.website will switch modes automatically based on the width of the browser.

This is only available for figma.to.website previews and published websites. Figma prototypes don’t support this.

See Figma’s Guide to variables to learn more about how to use variables in your design.

See the different modes in your canvas

With variables, frames will not switch mode automatically when resized in the Figma canvas. You can manually switch mode of a frame but this means you can only see one mode at a time for a given frame while designing.

If you wish so see the different viewport sizes in your Figma canvas while designing, we recommend to turn the whole page into a component and create an instance for each mode.

This gives you the ability to design in a single frame and see the results immediately in the different viewport sizes.

Make sure to keep the instances of your different viewports outside of the page section. figma.to.website doesn’t require them because the breakpoints are managed by the modes and the variables.

Breakpoints with frames

When auto layout is not enough to achieve your goals and you need more radical changes to the layout depending on the viewport size, you can build pages with multiple frames in the same section of a page.

figma.to.website will use the size of the frames as breakpoints and automatically select the best frame for the viewport size.

TIPS:

Frames can have a min width and a max width (auto layout required) and figma.to.design will use these values to select the best frame possible.

For the narrowest frame, min width will be ignored because it’s always better for the user experience to avoid horizontal scrolling.

Avoid duplicated content

When you are using multiple frames for a single page, you want to avoid duplicating the content as much as possible.

This can be done by creating components, even for your page content, and using instances of this component in the different frames.

Updating the main component will update all the frames of the page and you can override properties for the instances when you want to apply changes to a specific breakpoint.

(If you made a mistake with an override, you can “reset all changes” on the instance at any time.)

Combine breakpoints with variables and frames

You can combine frame and variable breakpoints for a single page if you want specific designs for the different viewport size which can’t be achieved with variables alone.