Import a mobile version

Last updated

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

html.to.design's Multi import options with only the 390 px phone viewport ticked and its width field selected for editing.
Tick 390 px, or type the width you need.

  1. Launch the Figma plugin

  2. Open the settings menu where you can select the viewport sizes and theme(s) for your import.

  3. You can either go with the preset mobile device size at 390px or double-click to edit and enter the exact mobile width you want. (The length will be automatically determined by the amount of content on the webpage.)

For private webpages

The html.to.design extension popup with its viewport widths: 1920, 1440, 1024, 768 and 390 px, each editable.
Tick the 390 px viewport, or type the width of the phone you need.

  1. Install our browser extension

  2. Open the extension

  3. Tick the 390 px viewport, or type another width in its field, then click Capture Full Page. The extension resizes the page to that width for the capture.

  4. Copy the capture to Figma, or send it to the Figma plugin to import it.

ℹ️ Some sites detect phones by their user agent rather than by width. If the capture doesn’t look like it does on a real phone, see The captured webpage is different from a real phone.