If an html.to.design import looks different from the live website, first compare the same viewport width and light or dark theme. Then check whether you used the right capture route, whether the page’s fonts are available in Figma, and whether a local import can reach its external assets. These checks address the main documented causes, but html.to.design does not promise an identical reproduction of every site.
1. Match the viewport and theme
A site can render a different layout at a different width: navigation may collapse, columns may stack, and text may wrap differently. The same page can also change when its theme differs. In html.to.design, set the import viewport and theme to match the live page you are using as a reference. The plugin supports importing a page with different viewport and theme combinations; see the official documentation and feature overview.
For a public mobile page, the documentation lists a 390 px preset. Custom viewport width is a PRO feature. If you need to capture a private page at a selected mobile viewport, use the browser extension. Compare the site and import at the same width rather than assuming a page labeled “mobile” uses the same breakpoint in both views.
2. Choose the capture route that matches the page
| Page or state you need | Use | Why |
|---|---|---|
| Open, public URL | Web tab / public URL importer | Designed for importing publicly accessible pages. |
| Private or local page, logged-in session, or page after dismissing a banner | Browser extension | Captures the page as rendered in your browser, including the relevant browser state. |
The extension can send a capture directly to the plugin or save it as an .h2d file. If the live reference depends on a login, browser session, or an interaction such as dismissing a consent banner, importing only the public URL may not reproduce the state you are comparing. See the extension guidance.
Recommended Free Tools
3. Diagnose typography differences
Missing fonts often show up as altered letter shapes, line breaks, or text wrapping. If html.to.design displays a missing-font alert, check whether the font is available to Figma and whether its internal font name in the rendered code is recognized. A font’s displayed family name and the internal name used by the page may not match.
#1 Best Overall
- Check the plugin’s missing-font alert and identify the font it reports.
- Download the missing font through the plugin and install it locally, or ask an organization administrator to upload it.
- Check the internal font name in the rendered code if the expected font is installed but still is not recognized.
- Re-import and compare text wrapping after the font is available.
Follow the vendor’s font guidance for availability and font mapping.
4. Check external assets in local HTML
A local HTML file can reference images, stylesheets, or scripts hosted elsewhere. html.to.design attempts to load these resources, but an import may differ if an asset is missing or not publicly accessible. When local HTML depends on external resources that do not load, the vendor recommends capturing the rendered page with the browser extension instead. The local HTML documentation describes this constraint.
5. Review other import settings and set expectations
The feature overview lists auto layout, multi-viewport imports, light and dark themes, font mapping, and high-resolution images when available. Review these options if the difference is structural, typographic, or image-related. They can help produce a more useful editable design, but the official material does not guarantee that every page state or visual effect will be reproduced identically.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick troubleshooting checklist
- Layout or line breaks differ: match the live page’s viewport width and theme first.
- The page is private, local, logged in, or interaction-dependent: capture it with the browser extension in the desired state.
- Text looks wrong or wraps differently: inspect the missing-font alert, font availability, and internal font name.
- Images or styling disappear in a local import: check whether referenced external resources are accessible; try extension capture.
- Differences remain: verify that you are comparing the same rendered page state. Without the URL, capture route, viewport, theme, and a description of the discrepancy, there is no way to identify one specific cause.
Or skip the browser setup
If you need a screenshot of the live page rather than an editable Figma import, ScreenshotNeo is a website screenshot API and MCP server. Its API takes a URL in one GET request:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for options. Before capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; you can turn each step off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
