Everything you need to know about importing webpage URLs, raw HTML, and design-ready browser output into Figma as editable layers.
Prerequisites
Need 01
A Figma account. The free plan is enough to start the workflow.
Need 02
The HTMLtoFigma plugin installed inside your Figma workspace.
Need 03
A public webpage URL or a block of HTML code you want to import.
Website accepts public URLs, including a batch. Code keeps separate HTML and CSS drafts. Files accepts local captures and supported archives. The settings icon stays available for widths, themes, language and output options.
How It Works
The key is understanding that HTMLtoFigma can start from either a live URL or raw code. The plugin simply turns the chosen source into editable design structure.
Open Figma Community, search for HTMLtoFigma, and install the plugin into your workspace. This keeps the entire import process inside Figma instead of forcing teams through a separate conversion dashboard before they can test the workflow.
Create a new file or open an existing working canvas, then run HTMLtoFigma from the plugin menu. The panel exposes two inputs: URL mode for live webpages and HTML Code mode for direct markup imports.
Use URL mode when you want the current live page state. Use code mode when you already have the markup available from your editor or internal project files. The best source depends on whether you care more about rendered output or component-level control.
The plugin processes structure, styling, and page assets, then rebuilds that information as editable layers inside Figma. Simple imports complete quickly, while large marketing pages or dense product surfaces naturally take longer to parse.
After import, treat the output like a working design file rather than a screenshot. Adjust typography, swap copy, reorganize layout blocks, compare against production, or break sections apart for redesign and teardown work.
Tips
When working from a live page, include the full public URL and dismiss popups or cookie banners first so you do not import overlays you do not actually want in the design file.
For React, Next.js, or other JavaScript-heavy interfaces, URL mode is usually the cleaner option because the plugin sees the rendered browser state instead of requiring you to manually reconstruct the markup that produced it.
If you only need a navbar, hero, or pricing block, code import can produce a cleaner layer tree than converting a full live webpage and trimming the extra parts afterward.
If the source page uses fonts or images that are unavailable in your current design environment, verify them immediately so spacing, hierarchy, and visual weight do not drift silently after the first pass.
FAQ
These questions focus on actual workflow decisions users make when choosing between URL import, code import, and browser-state capture.
Not in a useful editable form. Figma does not natively parse HTML and CSS into a structured design file, so a plugin is required if the goal is real layers rather than screenshots.
That is one of the main reasons to prefer URL mode. The plugin can operate on the rendered page state that a browser sees, which is often more practical than handling framework source files directly.
A public URL workflow assumes the page is accessible. For restricted surfaces, the safer fallback is to copy rendered HTML or use an environment where the page state can be exposed to the import process intentionally.
Very large pages can still be imported, but the output may become heavier to manage. For review and redesign work, importing only the sections you need usually produces cleaner layers and a more usable file.
Run a fresh import from the latest URL or markup. The plugin is best treated as a fast conversion pass, not as a continuously synced source of truth between browser code and design files.
Start with URL mode if your goal is to capture what users currently see in the browser. Start with code mode when your focus is a specific component or when you already control the exact markup you want to bring into Figma.
Explore More
How to Convert a Website to Figma
Focus on the live URL workflow for marketing pages, app screens, and browser-first teardown work.
How to Import HTML Code & CSS to Figma
Use the code-first path when you want tighter control over snippets, sections, and component imports.
Back to HTMLtoFigma
Return to the homepage to review the full product positioning, pricing preview, and browser-to-design workflow overview.
Call To Action
If your goal is getting live HTML or rendered webpages into editable design files, start with a simple import and refine the output from there.
100% free during early access · No credit card required
