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+/

2. Open the settings menu

Click on the box below the URL field to open the settings menu. Here you can select all the options you want for your import, such as viewport size, theme and more.

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.

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.

5. Import

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

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.

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.

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.

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.