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. 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.

3. Or, choose a custom width

Click the settings button and select Custom width. A new field will appear where 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.

4. Click 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 devtools

To open devtools, use F12 or cmd+shift+I depending on your OS and browser. In Chrome, you can also access devtools in the settings menu, under More tools.

3. Activate device mode

In devtools, click Toggle Device Toolbar - an icon which looks like a mobile device in front of a tablet. This will simulate a mobile viewport and display a top bar where you can select the device dimensions you want. For help using device mode, you can refer to Chrome’s documentation.

4. Click Capture full page

Once you’ve selected the mobile viewport you want, click on the html.to.design extension icon. In the drop-down, click on Capture full page to import the entire webpage, or click Capture selection to only import a specific block or area of the page.

5. An .h2d file will download

Before the download starts, you’ll see the following message in your browser: “html.to.design started debugging this browser.” Don’t worry, this means everything is working as expected.

6. Drop the file in the Figma plugin

Drag-and-drop the generated .h2d file into the plugin to import fully editable mobile designs of your private webpage.