It's a reasonable thing to want. You have a screenshot of a page — a competitor's landing page, a UI you admire, a layout someone sent you — and you'd like it sitting in Figma as an editable design. The honest truth is that a screenshot is the worst possible place to start, because the structure that makes a design editable was thrown away the moment the picture was taken.
A flat screenshot has no text, no layers, no structure — so nothing can truly "convert" it into an editable design; tools that claim to are guessing. If your screenshot is of a website, the faster, more accurate route is to skip the picture and import the live page or its HTML, which still has all of that structure.
Why a screenshot is a dead end
A PNG or JPEG is a grid of coloured pixels and nothing more. Open one and there is no "headline" in there, no "button", no spacing value to read back — just rows of colour that happen to look like a page to your eye. The file doesn't know that one cluster of dark pixels is a word and the cluster beside it is an icon. To the computer it's all the same flat surface.
That's why "convert this screenshot to Figma layers" is a harder ask than it sounds. Any tool that tries has to guess where the text ends and the shapes begin, infer where one block stops and the next starts, and re-read the type by sight. Every one of those guesses can drift — a heading split into two, a button merged with its background, a font read as the wrong weight. You get something that looks roughly right until you click into it and start fixing.
It also can't recover what was never in the picture. Hover states, the second half of a dropdown, anything below the fold the screenshot didn't reach — none of it exists in the file. A screenshot is a single frozen moment of one page at one width, flattened. There is simply less information in it than a real design needs, and no amount of cleverness puts back what the picture left out.
A screenshot records what the page looked like. It throws away everything about how the page was built — and that's exactly the part you need.
If a flat image is all you have
Sometimes the picture really is all you've got — a screenshot from a slide, an old design with no source, an image a client pasted into a chat. In that case there's no magic, but there are two honest options:
- Drop it in as a locked reference and rebuild on top. Place the image on the canvas, lock the layer, and recreate the design by hand over it — frames, text, fills, the lot. It's reliable and entirely accurate, because you are deciding what each element is. The catch is plain: it's manual work, and a busy page takes real time.
- Try an AI "image to design" tool. Some tools infer structure from an image and hand back editable layers. They're genuinely useful for a rough starting point — a quick scaffold to push around — but they're unreliable for fidelity. Expect to spend time correcting misread text, off spacing, and shapes that didn't survive the guess. Treat the output as a draft, never as finished.
Both are valid. Neither turns a flat image into a faithful, editable design for free — and it's worth setting that expectation before you start, so the result doesn't disappoint.
The better route: go back to the source
Here's the part most people skip past. If your screenshot is of a website, you almost certainly don't need the screenshot at all — you can reach the real page it came from. And the real page still has everything the picture threw away.
Import the live URL (or its HTML) instead, and you get genuine editable layers: live text in its true font and weight, photos as image fills, icons as vectors, spacing measured from the actual render rather than guessed from pixels. Nothing is inferred by sight, because the browser already resolved every value when it drew the page — a good importer simply reads what's there. This is the move whenever the source is reachable.
For the full set of routes onto the canvas, see how to import a website into Figma; for the markup-to-layers path specifically, HTML to Figma, explained covers what gets captured and what doesn't.
When you want the look but the copy editable
There's a fair middle ground, too. Maybe you don't need a full layer tree — you just want the exact pixels of a page, with the words editable so you can swap copy or annotate. Vellum's pixel mode does that: point it at a URL and it places a full-page screenshot of the page with the page's own text laid over it as editable layers. The visual stays pixel-exact, and the copy is yours to change.
It's the right tool when faithful pixels matter more than a complete, restyleable layer tree — a quick, honest capture of how a page looks, with live text on top. Think competitor teardowns, copy reviews, or annotating a flow where you need the exact visual but want to mark up the words. One thing to be clear about: this works from a URL, not from an image file you upload. Vellum reads the live page; it doesn't take an arbitrary PNG and rebuild it.
So, can you turn a screenshot into a design?
The honest answer is that a screenshot is a reference, not a source. You can trace over it, or hand it to a tool that guesses — but neither gives you back the structure the picture discarded. If the layout you want lives on a real page, don't work from the image of it. Go to the page, import that, and get layers that were measured rather than imagined. The screenshot was never the thing you wanted; the page behind it was.