Import a mobile version

html.to.design can also capture and import the mobile version of your website or web app. Depending on whether the webpage is public or private (behind a log-in), there are two ways to capture the mobile version and import it into Figma.

For public webpages

1. Launch the plugin

In a blank Figma file, search for “html.to.design” under Plugins, or use cmd+/

Screenshot of Figma when launching the html.to.design plugin.

2. Open the settings menu

Click on the box below the URL field to open the settings menu. Here you can select the viewport options and theme(s) for your import.

Screenshot of the plugin when opening the settings menu.

3. Select a preset viewport

The plugin offers a few standard device sizes in the settings menu. For now, there is one preset mobile device at 390px.

Screenshot of the plugin when selecting the preset viewport.

4. Or, choose a custom mobile width

In the settings menu, double click on the mobile viewport. The field is editable, which means you can enter the exact width of the mobile device you want. The length will be automatically determined by the amount of content on the webpage.

This option is currently only available for PRO subscribers.

Screenshot of the plugin when selecting a custom width.

5. Import

The plugin will automatically bring in fully editable mobile designs with the dimensions you set.

Screenshot of fully editable mobile version of apple.com.

For private webpages

1. Install our Chrome extension

If you haven’t already, head over to the extension’s page and click on Add to Chrome. You’ll need it for any private webpages you want to import.

Screenshot of the html.to.design Chrome extension page.

2. Open the extension

Click on the extension icon in your browser toolbar and look for the html.to.design logo to open the extension.

Screenshot of the extensions menu.

3. Select your mobile viewport and capture

You can either use the default mobile viewport provided, or click on the mobile field to edit the dimensions for the custom viewport of your choice. Then click Full page to start downloading your mobile capture.

Screenshot of the extension when selecting a custom width.

4. Drop the .h2d file into the plugin.

Once the .h2d file has downloaded, drag-and-drop this file into the plugin to import fully editable mobile designs of your private webpage.

Screenshot of dropping the h2d file in the plugin.