Yes — you can import a website into Figma. Figma has no built-in importer, but a plugin rebuilds the page as editable layers: paste its HTML and CSS, drop an .html file, or enter a live URL, and you get frames, live text and image fills you can edit.
There's no native "import website" button in Figma — but a plugin closes the gap. The good ones don't flatten the page to a picture; they rebuild it as a real layer tree, measured pixel-for-pixel from the browser render, and tell you honestly what they can't reproduce.
The three ways to do it
Figma can't reach out to the web by itself, so every route runs through a plugin. There are three, and which you pick depends only on what you're starting from:
- Paste HTML & CSS. Best for a single component or a snippet you already have in hand — drop the markup in and it comes back as layers.
- Drop an
.htmlfile. For a page you've saved to disk, or one exported from another tool. The file is rendered and rebuilt the same way. - Enter a live URL. For a whole page on the open web — the plugin loads it, lets it settle, and measures the finished render.
All three land in the same place: a frame full of editable nodes on your canvas. For the full walkthrough of each, see how to import a website into Figma, three ways; if your source is a live page specifically, importing a URL into Figma covers the wrinkles that come with it.
Editable layers, or a screenshot?
This is the distinction that actually matters, and it's easy to miss until you've imported something. Two tools can claim to "import a website" and hand you completely different things.
One pastes a flat image. The page looks right on the canvas, but click into it and there's nothing there — no text to retype, no fill to recolour, no spacing to nudge. You've imported a picture with a frame around it.
The other rebuilds a real layer tree: a frame for each block, live text in its true font, photos as image fills, icons as vectors — every node selectable, every value editable. The quickest way to tell which you've got is to click into the result and try to retype the headline. If the cursor lands in real text, it's a conversion. If it selects a rectangle, it's a screenshot.
A screenshot tells you what the page looked like. A layer tree lets you change what it looks like next.
Vellum sits firmly on the layer-tree side, and its angle is worth stating plainly: it reads the values the browser actually computed rather than re-interpreting your CSS, and when something genuinely can't be rebuilt — a font you don't own, a canvas scene — it names that instead of faking it. Honesty about the edges is part of the craft.
What to expect
When a page is rebuilt properly, more comes across than people assume — and a few things, predictably, don't:
- Colours and layout, exact. Positions, sizes and colours are measured from the real render, so nothing drifts. If the browser drew a card at 312 pixels wide, the import is 312 pixels wide.
- Fonts, if you have them. Installed typefaces match. A font you don't own falls back to one you do — but the real font name is kept, so you know exactly which typeface to install for the genuine letterforms.
- CORS, handled. Many pages block cross-origin requests, which would otherwise stop a URL import cold. A built-in proxy routes around that, so most public pages import with no extra steps.
- Canvas and WebGL, the hard case. Content painted with low-level graphics — 3D scenes, shader backgrounds, some charts — has no markup to read, so it can only be captured as an image, if at all.
The rule of thumb is simple: anything the browser rendered from real markup converts cleanly; anything it painted with raw graphics, or hid behind a click, is where the limits live. For a deeper look at what gets captured and what doesn't, see HTML to Figma, explained.
Frequently asked questions
Can you import a website into Figma?
Yes. Figma has no built-in website importer, but a plugin can rebuild a page as editable layers. Paste its HTML and CSS, drop an .html file, or enter a live URL, and the page comes in as frames, live text, image fills and vectors you can edit.
Is the import editable, or just a screenshot?
With the right plugin it is a real layer tree — selectable frames and live text, not a flat image. Some importers only paste a screenshot; the quickest test is to click into the result and try to retype the headline.
Can Figma import a URL directly?
Not on its own — Figma has no native URL importer. A plugin renders the page and rebuilds it as layers. Some handle CORS-blocked pages through a built-in proxy, so most public URLs import with no extra steps.
Will the fonts and colours match?
Colours and layout come through exactly, measured from the real render. Fonts match when they are installed; otherwise the text falls back but keeps the real font name, so you know which typeface to use.