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
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.
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.
.h2d file has downloaded, drag-and-drop this file into the plugin to import fully editable mobile designs of your private webpage.