How to Import a Mobile Website Layout into Figma with HTML.to.design

To import a mobile website into Figma with html.to.design, use its Figma plugin for a public page: choose the 390px mobile preset, paste the page URL, and import. For a private or login-protected page, open it in your browser, capture it with the html.to.design extension, then send the capture to the plugin or save it as a local .h2d file. Inspect and refine the imported layers in Figma; the result may need corrections.

Choose the right import path

Page or goal	Recommended path	Trade-off
Public page accessible by URL	Paste the URL into the Figma plugin’s Web tab	Quickest route; it does not reproduce a signed-in browser session.
Private, login-protected, or VPN-only page	Capture the page in your browser with the extension	Requires access to the page in that browser.
Keep captured site data local	Save the extension capture as a `.h2d` file and import it locally	You handle the file and its storage.

The documented mobile preset is 390px wide. You can enter a custom width by double-clicking the width setting, but custom mobile widths are a PRO feature. The imported page height is determined by the webpage content. [html.to.design mobile viewport guide]

Import a public mobile webpage from its URL

Open Figma and launch the html.to.design plugin.
Open the plugin settings and choose the viewport and theme for the capture.
Select the 390px mobile preset. If you need a specific responsive breakpoint and have PRO, double-click the width value and enter the desired width.
Open the plugin’s Web tab, paste the public page URL, and start the import.
When the import finishes, inspect the page and its layers in Figma. Correct layout, text, colors, or assets that do not match the source.

The plugin supports importing one page or multiple pages, and its overview describes the output as editable Figma designs with local text and color styles. Treat that as a starting point: inspect the imported result rather than assuming every site structure will translate perfectly. [html.to.design product overview]

Sign in to the site in your browser and navigate to the exact page and state you want to capture.
Open the html.to.design browser extension and choose the mobile viewport.
Capture the page. Send the capture directly to the Figma plugin, or save it as a local .h2d file.
In Figma, open the plugin and import from its Extension tab, or drop the saved .h2d file into the plugin.
Review the import settings, map any missing fonts if needed, and import into the Figma document.
Inspect and refine the resulting layers and styles.

The local .h2d option is the documented privacy-conscious handoff: html.to.design says the file stays on your computer and does not reach its servers. Use this option when that handling matters for the page you are capturing. [extension capture guide] [capture file import guide]

Pick a mobile width that answers your design question

Use 390px when you want the documented preset and a straightforward mobile reference. Use a custom width when you need to inspect a particular responsive breakpoint; custom mobile widths require PRO according to the guide. Keep in mind that changing the viewport can change responsive navigation, column stacking, line wraps, image crops, and page height. Record the width you used so reviewers can reproduce the same view.

Choose the theme setting to match the state you want to reference where the plugin offers it. If a site’s appearance depends on browser state, authentication, or other user-specific conditions, use the extension path so you capture the page as displayed in your signed-in browser.

Review and refine the imported Figma design

Check the frame width: confirm the imported frame corresponds to the mobile width you selected.
Compare the page structure: verify header, navigation, content order, and footer against the source.
Inspect text and fonts: check wrapping, font mapping, line height, and missing glyphs.
Inspect imagery: look for absent assets, changed crops, or spacing where an image did not transfer as expected.
Check interactive states: a screenshot-like import represents a captured page state; review menus, dialogs, or other states separately if your design task needs them.
Organize layers: rename, group, and simplify imported layers before handing the file to another designer or developer.

Imported text and color styles are described as local Figma styles by the product overview. Review them in the destination file and adjust them to match your project conventions.

Common problems and fixes

Problem	Likely cause	What to do
The URL import does not show the signed-in page	A URL import does not have the browser’s authenticated session.	Open the page while signed in and capture it with the browser extension.
The layout does not match the device you intended	The selected viewport width differs from the target breakpoint.	Use the 390px preset or, if you have PRO, enter the required custom width.
Text wraps differently	Viewport width or font availability/mapping changes the rendered layout.	Check the selected width and map missing fonts during import; review line breaks in Figma.
The imported page seems incomplete	The content visible to the capture path may differ from the full page or desired browser state.	Confirm the source page is fully accessible, recapture the relevant state, and inspect the imported page length and sections.
You need to keep capture data on your machine	A direct handoff is not the local-file workflow.	Save a local `.h2d` capture and import that file in the plugin.
A layer or visual detail needs manual cleanup	Webpage-to-design conversion can require refinement.	Correct the affected layer, style, or layout in Figma; treat the import as an editable starting point.

Cost and workflow notes

The html.to.design product overview states that its free plan includes 12 imports per month. The mobile guide lists custom mobile width as a PRO feature; the reviewed documentation does not establish current paid-plan prices. Check the product’s own plan details for current limits before planning a repeated capture workflow. [html.to.design product overview]

For reliability, use the same viewport and page state when recapturing, especially when comparing design changes. For private content, the local .h2d route gives you a file-based handoff described by the vendor as remaining on your computer.

Or skip the browser setup

If your goal is to capture a rendered mobile page as an image rather than bring editable webpage layers into Figma, ScreenshotNeo is a website screenshot API and MCP server. It does not replace the Figma import workflow: it returns a screenshot or PDF, while html.to.design is the path here for an editable Figma starting point.

Here is a one-call capture using a 390px viewport. See the ScreenshotNeo API documentation for the API options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com --data-urlencode width=390 -o mobile-shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com", "width": 390},
    timeout=90,
)
open("mobile-shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: '390',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('mobile-shot.webp', Buffer.from(await res.arrayBuffer()));

Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, and failed loads are never billed; response headers identify the page verdict and billing status.
An MCP server lets AI agents, including Claude and Cursor, take screenshots.
1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.

FAQ

Can I import more than one webpage?

The product overview says the plugin can import a single page or multiple pages. Choose the workflow that fits your source pages and review each result.

Does the import produce a finished production design?

It produces an editable Figma starting point. Plan to inspect and refine the layers, typography, and layout.

Is a custom mobile width included in the documented preset?

No. The documented preset is 390px; entering a custom width is listed as a PRO feature.

How many imports does the free plan include?

The product overview states 12 imports per month. Confirm current plan details with html.to.design.