How to Capture a Specific Viewport Width with HTML.to.design

To capture a specific mobile width with html.to.design, use the Figma plugin for a public page and select its 390px preset or, on PRO, edit the width to your exact value. For a private, local, or logged-in page, open it in your browser, edit the mobile dimensions in the html.to.design extension, capture it, then send it to Figma or import the saved .h2d file. The documentation reviewed does not confirm arbitrary custom desktop widths in either route.

Choose the right capture route

Situation	Use	Width guidance
Public page, mobile design	Figma plugin URL import	Use the 390px preset, or enter a custom mobile width; custom entry is documented as a PRO feature.
Private, local, or logged-in page	Browser extension	Select mobile and edit the dimensions before capture.
Exact desktop width required	Check the current interface or ask html.to.design support	The reviewed docs describe viewport choices and desktop/tablet/mobile imports, but do not establish arbitrary desktop-width entry.

html.to.design converts webpages into editable Figma designs using a plugin and browser extension. Use URL import for public pages. Prefer the extension when the page needs a login, uses local development, depends on session state, or must be captured after you solve a CAPTCHA. The extension is also useful when the desired language or state is already visible in your browser. Product overview · Browser extension overview

Capture a public page at a mobile width with the Figma plugin

Open the html.to.design plugin in Figma.
Enter the public page URL and open the plugin settings for viewport size and theme.
Choose the 390px mobile preset, or double-click the width value and enter the exact mobile width you need. Custom mobile width in the plugin is currently documented for PRO subscribers.
Choose the theme if needed, then import the page.
Inspect the resulting frame in Figma. The capture height follows the page content; the width is the mobile viewport you selected.

The vendor documents the 390px preset and editable custom mobile width in its mobile capture guide. Its feature list mentions desktop, tablet, and mobile imports, but does not specify arbitrary custom desktop dimensions. See the feature list.

Capture a private or local page with the browser extension

Open the target page in your browser. Sign in, select the language, and establish any state you need to appear in the capture.
Open the html.to.design browser extension.
Select the mobile viewport. Click the mobile dimensions field and enter the desired width and dimensions.
Capture the whole page or a selection.
Send the capture directly to the Figma plugin, or save it locally as an .h2d file and drop that file into the plugin.

Direct sending requires you to be logged in to Figma. Saving an .h2d file is an alternative handoff when direct sending is unavailable or you want to import later. The extension documentation covers both handoff paths and page or selection capture: Extension tab guide.

What “specific width” means in the result

The width is the browser viewport used to render the webpage before it becomes Figma layers. It can affect responsive breakpoints, navigation, columns, text wrapping, and image sizes. For a useful reproduction, set the viewport to the width you want to inspect and keep the page state consistent.

Width: set the target viewport width using the documented mobile controls.
Height: for the public-page mobile workflow, the captured height is determined by page content; do not assume the width field also fixes height.
Page state: use the extension for authenticated pages, local pages, and states already present in the browser.
Desktop: do not infer custom desktop-width support from the existence of desktop presets or multi-viewport imports. Verify the current UI if an exact desktop width is required.

Or skip the browser setup

If you need a rendered screenshot at a viewport width rather than editable Figma layers, ScreenshotNeo can return an image from one API request. See the ScreenshotNeo API docs. This is a screenshot API, so it does not replace html.to.design’s conversion into editable Figma layers.

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

import requests

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

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.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}`);
await Bun.write('shot.webp', res);

These examples set the viewport width to 390px; change the value and target URL as needed. ScreenshotNeo accepts the parameter names other screenshot APIs use, which can make switching easier. Its shots remove cookie banners, popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month, no card required.

Troubleshooting

Problem	Likely cause	What to do
The public-page plugin will not accept a custom mobile width	Custom mobile-width entry in the plugin is documented as PRO.	Use the 390px preset, check your plan, or use the extension workflow when the page is open in your browser.
The page looks like desktop despite choosing mobile	The mobile viewport may not have been selected, or the page may not have re-rendered after editing dimensions.	Reopen the extension’s mobile control, verify the width, and capture again. Check the responsive page in the browser at the same width.
The capture is missing logged-in content	A public URL import does not share your browser session.	Use the extension on the page after logging in, then send the capture to Figma or save and import the `.h2d` file.
Direct send does not work	The extension’s direct-send flow requires a Figma login.	Log in to Figma, or save the local `.h2d` capture and import it through the plugin.
The imported page has the wrong language or state	The URL import may not reproduce the desired browser state.	Set the language and page state in the browser, then capture with the extension.
You cannot find a custom desktop width field	The reviewed documentation does not confirm arbitrary desktop-width editing.	Check the current interface or contact the vendor before relying on exact desktop dimensions.

Performance and reliability tips

Choose the narrowest workflow that matches page access: plugin URL import for public pages, extension capture for private or session-dependent pages.
For repeatable comparisons, use the same width, page state, language, and theme each time.
Wait for the page to reach the visual state you intend to capture, especially if content appears after sign-in or interaction.
For long pages, allow the capture to cover the full content and review the result for sections that load only after scrolling.
Keep a local .h2d capture when you want a handoff that can be imported later without recapturing the page.

The cited html.to.design material does not provide capture-time benchmarks or a quantified reliability guarantee, so plan around the page’s own loading behavior and verify important imports visually.

FAQ

Can I capture at exactly 390 pixels?

Yes. The plugin guide documents a 390px mobile preset. The extension also lets you edit mobile dimensions.

Does custom mobile width in the plugin require PRO?

Yes. The vendor’s mobile guide says custom width entry in the plugin route is currently for PRO subscribers.

Can I use the extension without sending directly to Figma?

Yes. Save a local .h2d capture, then drop it into the plugin.

Is arbitrary custom desktop width supported?

The reviewed official documentation does not establish that. Verify in the current interface or with vendor support.

Will ScreenshotNeo create editable Figma layers?

No. ScreenshotNeo returns screenshot images or PDFs through an API; html.to.design is the workflow here for turning a webpage into editable Figma designs.