How to Turn a Website Screenshot into Editable Figma Design with HTML.to.design
Import a public webpage or logged-in page into editable Figma layers with html.to.design. Choose the right capture path, file format, and settings.
To turn a website into an editable Figma design, use the html.to.design Figma plugin for a public page, or its browser extension for a logged-in page. The result is an import of webpage structure and content into Figma layers, rather than a flat bitmap screenshot. html.to.design describes those layers as editable; some cleanup may still be needed, and the vendor does not publish an independent accuracy benchmark. [What is html.to.design?]
Choose the right capture path
| Page or goal | Recommended path |
|---|---|
| Public URL that loads without an account | Paste the URL into the plugin’s Web tab. |
| Logged-in, private, VPN-only, or session-specific page | Use the browser extension while logged in; send the capture to the plugin or save a local .h2d file. |
| You already have a local capture or webpage files | Use the plugin’s File tab. Prefer .h2d for a captured page; HTML and ZIP imports may lack external assets. |
Use the extension when you need a particular authenticated state, want to capture only part of a page, or need a local handoff. The documentation says a downloaded .h2d file stays on your computer and does not reach html.to.design’s servers; that statement applies to the local-file route specifically. [Browser extension] [Import a website]
Import a public website URL
- Open a Figma file where you want the design to appear.
- Open Actions with ⌘K on Mac or Ctrl+K on Windows, search for html.to.design under Plugins & widgets, and run it.
- Choose the Web tab and paste the page’s public URL.
- Choose the viewport and theme you want to import. Check the available import options for the page.
- Start the import, then inspect the resulting frames and layers in the Figma file.
The vendor documents importing one page or bulk-importing a site, and offers desktop, tablet, and mobile viewports and light and dark themes. Those options request a particular version of the page; they do not guarantee that every responsive behavior, animation, or interactive state will be recreated exactly. [Import a website] [Features]
Capture a logged-in or private page
- Sign in to the website in your browser and navigate to the exact page and state you need.
- Open the html.to.design browser extension.
- Choose a full-page capture or select the portion of the page you need.
- Send the capture directly to the Figma plugin, or download it as a .h2d file.
- For a downloaded file, open the plugin’s Extension tab or drop the .h2d file into the plugin to import it.
This route can capture content that a public-URL import cannot access, including content behind a login or available only in your current browser session. Use the direct handoff for convenience, or the downloaded .h2d route when you want the documented local-file handling. [Browser extension] [Import a website]
Import local files
The plugin’s File tab supports .h2d, HTML/HTM, ZIP bundles of webpage assets, email formats, and MHTML/MHT. The vendor recommends .h2d for local captures because it contains the information needed to recreate the webpage. HTML files may refer to images, stylesheets, scripts, or fonts hosted elsewhere; those resources may be unavailable during import. ZIP imports have a stated maximum size of 32 MB. [Import local files]
- .h2d: Use for a capture made with the extension and the most complete local handoff.
- HTML/HTM: Use when you have the source file, and check whether linked assets can be reached.
- ZIP: Bundle the HTML and its supporting files; keep the archive below 32 MB.
- MHTML/MHT or email: Use when your source is already saved in one of these supported formats; review the imported result for missing content.
Work with the imported design
Inspect the imported frame at the intended viewport before editing. Expand the layer tree, identify the page regions you need, and check text, images, colors, and spacing against the source page. html.to.design lists editable layers, local text and color styles, auto layout, font replacement, multiple viewport and theme options, and other design features. These are vendor-documented capabilities, not a guarantee that every site maps perfectly to a clean design system. [What is html.to.design?] [Features]
If a font is unavailable in Figma, use the font replacement option listed by the vendor and review line breaks and component sizes afterward. If you need a reusable design, check whether local styles were created and whether repeated elements imported consistently. Keep the original browser page available as a visual reference while refining the result.
Options and practical limits
- Viewport: Choose desktop, tablet, or mobile as appropriate. A different viewport can change layout, text wrapping, and images.
- Theme: Select light or dark when the source supports both and you need a specific appearance.
- Full page or selection: Use a full-page capture for an entire document and a selection for a specific region.
- Single page or site: The vendor documents both single-page and bulk site imports. Review what is included before relying on a large import.
- File size: ZIP imports must be under 32 MB.
- Plan limits: At research time, the homepage listed up to 10 imports every 30 days on the free plan. The features documentation listed 1,000 imports per month under the Pro unlimited-import fair-use policy. Plan limits and prices can change; confirm the current terms on the vendor site before choosing a plan. [html.to.design plans] [Features]
Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The public URL does not show the expected content | The page requires a login, current session, VPN, or a particular browser state. | Open it while signed in and use the browser extension capture. |
| Images, fonts, or styling are missing from an HTML import | The HTML references external assets that cannot be reached or were not included. | Use a complete asset bundle, make resources available, or recapture as .h2d. |
| The imported layout differs at another screen size | The selected viewport changes responsive layout and text flow. | Import the needed viewport separately and compare each version with its source. |
| The page is too large to import as ZIP | The archive exceeds the documented 32 MB limit. | Reduce the archive size or use .h2d or another supported input format. |
| Text wraps differently or appears in another typeface | The original font may not be available in the design environment. | Use the font replacement option and check text wrapping and component dimensions. |
| A logged-in capture has the wrong state | The browser was not on the desired route or state before capture. | Return to the page, establish the needed state, and capture again with the extension. |
Performance, reliability, and cost
Import time and completeness depend on the page, its assets, and the chosen capture path; the reviewed sources provide no independent benchmark or accuracy measurement. For repeatable work, capture the intended viewport and state explicitly, keep a source-page reference, and inspect important areas after import. If an import is incomplete, use the extension or a self-contained .h2d handoff where appropriate.
html.to.design has a free tier with a homepage-listed limit of up to 10 imports every 30 days at the time of research. The features documentation described a Pro allowance of 1,000 imports monthly under a fair-use policy. These are vendor plan figures and may change; confirm current pricing and allowances before relying on them. [Plans] [Features]
Or skip the browser setup
If you need a clean screenshot asset alongside your Figma import, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It is a screenshot API and MCP server, so it does not turn the page into editable Figma layers. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Every feature is on every plan. See the API documentation for options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Create a free ScreenshotNeo account for 1,000 screenshots a month with no card.
FAQ
Does this method put a screenshot image into Figma?
The documented workflow imports webpage structure and content into layers; it is distinct from placing a flat screenshot image. html.to.design describes the resulting layers as editable.
Can I import a page that is only available after login?
Yes. The documented route is to log in in your browser and capture the page with the html.to.design extension.
Which local format should I use?
Use .h2d for a browser-extension capture when possible. The vendor recommends it because it carries the information needed to recreate the webpage.
Will every imported page be pixel-perfect?
The vendor describes editable imports and design options, but the reviewed sources provide no independent accuracy benchmark or guarantee for every site. Inspect and refine the result.
Can ScreenshotNeo create editable Figma layers?
No. ScreenshotNeo provides clean screenshot and PDF captures. Use html.to.design for the webpage-to-layer workflow.
