Does HTML.to.design Support Websites Built with React or Webflow?
html.to.design captures rendered webpages for Figma, but its docs do not promise React or Webflow compatibility. Here’s how to choose an import route and check the result.
Short answer: html.to.design documents importing rendered webpages into Figma, but its reviewed documentation does not name React or Webflow as supported integrations or guarantee framework-specific compatibility. You can try importing a public page by URL, or capture a private or state-specific page with its browser extension. That imports what the browser renders; it does not reconstruct the underlying React or Webflow project.
If your goal is editable Figma layers based on a page’s appearance, try the page itself and inspect the result. If you need source components, CMS collections, interactions, or a reusable project structure, the documented workflow does not promise to provide those.
What “support” means here
The distinction is between capturing a rendered page and importing a framework project. html.to.design describes webpage capture and conversion to editable Figma layers. Its documented supported online-tool import list names Notion, but does not name React or Webflow. That is not evidence of a React or Webflow integration.
A React app or Webflow site may still be a candidate if it renders in a browser and you can provide access to the page. The documentation does not provide a compatibility matrix or quality guarantee for either framework, so the practical answer is to try the actual page and examine the imported layers.
Choose the right import route
| Your page | Route to try | What it provides |
|---|---|---|
| Public page available at a URL | Enter the URL in the html.to.design Figma plugin | A capture of the rendered page, with viewport and theme options to select |
| Private, logged-in, or state-specific page | Open the page in a supported browser and capture it with the extension | A capture of the browser-visible state, sent to the plugin or saved as an .h2d file |
| Local HTML markup | Use the HTML/CSS editor or upload a supported .html, .htm, or .zip file | An import from markup files, not a documented native React or Webflow project import |
See the html.to.design product overview, its feature documentation, and the browser-extension workflow for the current instructions and supported inputs.
Import a public React or Webflow page
- Open the html.to.design plugin in Figma.
- Enter the public URL of the page you want to bring into Figma.
- Choose a viewport and theme that match the page state you want to inspect.
- Run the import and inspect the resulting editable layers in Figma.
- Check the details that matter to your work: layout, images and other assets, fonts, and the intended responsive viewports.
The workflow acts on the rendered page. It does not imply that a React component tree, Webflow project settings, CMS data, or source code will be reproduced. The documentation also does not establish that interactive behavior or every responsive state will import perfectly.
Capture a private or stateful page
Use the browser extension when the page requires a login, lives on a private network, or must be captured in a particular browser state. Open the desired page in a compatible browser, set up the state you need, and capture the visible page with the extension. Send the capture to the plugin or save it as an .h2d file and import it.
The installation documentation lists Chrome, Edge, Brave, Opera, Arc, and other Chromium-based browsers. Store support can change, so check the current browser listing before installing. If a CAPTCHA blocks URL import, the extension documentation says the URL importer cannot solve it automatically; complete the challenge in the browser and capture the page there. Check the current browser installation details.
Use local HTML when you have markup
If you have local markup rather than a live page, html.to.design documents entering HTML/CSS or uploading .html, .htm, or .zip files. This can be useful when you control the rendered markup, but the documented file route should not be treated as support for uploading a React repository, a built app project, or a Webflow project file.
How to assess the result
- Match the access route to the page. Use URL import for a public page and browser capture for private or session-dependent content.
- Capture the right state. Set the intended viewport, theme, login state, and page content before capture.
- Inspect important visuals. Review spacing, typography, assets, overlays, and any elements that are central to the design.
- Check responsive views separately. The feature documentation lists multiple viewport options, but that does not guarantee every breakpoint will be reproduced as intended.
- Decide based on the layers you need. If the result is only a visual reference, that may be enough. If you need the original framework structure or editable behavior, verify that requirement separately; a rendered-page capture does not promise it.
Or skip the browser setup
If you need a screenshot of the rendered React or Webflow page for documentation or a visual reference, ScreenshotNeo can return an image or PDF from one API request. It is a screenshot service, not a Figma importer, so it does not produce editable Figma layers.
Install Python’s requests package, set your API key, then run:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)For the full request options, see the ScreenshotNeo API docs. Cookie banners, popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use screenshot and page information tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Troubleshooting
| Symptom | Likely cause | What to try |
|---|---|---|
| The public URL will not import | The page may not be publicly reachable, or access may depend on a login or browser state. | Open it in a browser and use the extension capture route for the state you need. |
| A CAPTCHA blocks URL import | The extension documentation says URL import cannot solve a CAPTCHA automatically. | Complete the challenge in the browser, then capture the visible page with the extension. |
| The result does not match the target layout | The selected viewport, theme, or page state may differ from the one you intended; the docs make no framework-specific fidelity guarantee. | Set the desired state before capture, choose the relevant viewport and theme, and inspect the resulting layers. |
| Private content is missing | A URL-based capture may not have the authenticated session or private-network access. | Use the browser extension while signed in and on the page that should be captured. |
| You cannot import a React or Webflow project file | The documented local inputs are HTML/CSS and .html, .htm, or .zip files, not native framework project formats. | Capture the rendered page or provide supported local markup instead. |
Performance, reliability, and plan notes
For a public page, URL import is the direct route. Browser capture adds the step of opening the target page in a compatible browser, but gives you a way to capture private or state-dependent content. The sources do not publish comparative timing, success rates, or React-versus-Webflow results, so allow time to inspect the output rather than assuming a particular fidelity.
Before doing substantial work, try the exact page and viewport that matter. This is the most reliable way to determine whether its visual elements survive the capture well enough for your purpose. The official plan page currently states that Free allows up to 10 imports every 30 days. It lists Pro at $12 per user/month billed annually or $18 per user/month billed monthly, with a fair-use policy and a 1,000-import monthly limit for typical individual use. Plan terms can change; check the current plan page before relying on these limits.
FAQ
Can I import a React website into Figma with html.to.design?
You can try importing its rendered public page by URL, or capture it in the browser. The docs do not promise a React integration or reconstruct React source.
Can html.to.design convert a Webflow site to editable Figma layers?
Its general workflow converts rendered webpages into editable layers, but the documentation reviewed does not make a Webflow-specific compatibility promise. Try the actual page and inspect the result.
Does the import preserve interactions?
The reviewed documentation describes webpage capture and editable layers; it does not guarantee that interactive behavior is recreated.
Can I import a private page?
Use the browser extension to capture the page visible in your browser, including a logged-in or state-specific page, then send the capture to the plugin or import the .h2d file.
