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