Paste a URL, capture the current live page state, and turn it into editable Figma structure instead of rebuilding the screen manually.
Prerequisites
Need 01
A Figma account with access to the file where you want the imported result.
Need 02
The HTMLtoFigma plugin installed and ready to run inside Figma.
Need 03
A public website URL that represents the page state you actually want to convert.
How It Works
This guide is for the browser-first path: capture the website exactly as it exists now, then refine the imported result like a design file.
Open the target page in a browser and copy the full public URL. If the page contains cookie banners, lazy content, or modal overlays, decide whether you want them visible in the import before you move to the conversion step.
Create a new design file or open an existing working board, then launch the plugin. For this workflow, stay in URL mode so the plugin can read the rendered browser state instead of expecting raw markup input.
Once the URL is submitted, the plugin fetches the page, interprets the HTML structure, styling, and visible assets, and rebuilds the result as editable layers. Larger pages naturally take longer than focused landing sections or lightweight marketing screens.
Treat the output like a working baseline. Inspect hierarchy, move sections, test revisions, compare against shipped production, or pull apart individual blocks for teardown work and redesign exploration.
Tips
Import a competitor landing page into Figma when you want to inspect hierarchy, CTA density, pricing layout, and content rhythm with editable structure instead of screenshot guessing.
When a team is redesigning an existing site, importing the live page into Figma gives everyone a concrete starting point that reflects reality rather than an outdated design file.
Store imported sections in Figma as editable reference material for headers, pricing blocks, onboarding panels, and marketing layouts that can later be studied, remixed, or compared side by side.
Bring production surfaces into Figma to compare shipped spacing, copy hierarchy, and interface structure against source mocks or internal design standards.
FAQ
These answers focus on the live-site workflow and the practical tradeoffs teams face when converting websites instead of importing raw code.
Yes. HTMLtoFigma is completely free during early access. You can convert any public website into editable Figma layers without payment or usage limits.
A URL-based workflow is particularly useful for modern JavaScript apps because it focuses on the rendered page state rather than framework source files.
The practical approach is often to import the page and keep the sections you need, or convert a more focused URL when the site structure already exposes the exact page state you want.
If the page depends on viewport or interaction state, make sure the relevant content is visible before you rely on the capture. Browser-state workflows are best when the intended content is already rendered.
This product direction is website to design, not design to code. Once the page is inside Figma, any reverse workflow should be treated as a separate tooling decision.
Explore More
How to Import HTML to Figma
Start with the broader guide if you want to understand both the URL workflow and the code import path before choosing one.
How to Import HTML Code & CSS to Figma
Switch to the code-first guide when the real source of truth is markup from your editor rather than the live browser page.
Back to HTMLtoFigma
Return to the homepage for the broader product view, pricing preview, and the full browser-to-design positioning.
Call To Action
If the live browser page is the fastest path to design insight, use the URL workflow and turn the current state into editable Figma structure.
100% free during early access · No credit card required
