How to import a Wix site into Figma

Wix is built to make one thing effortless: getting a site up without touching code. What it doesn't make easy is getting that site back out. There's no Figma file sitting behind a Wix site — it was assembled on a drag-and-drop canvas, and that canvas produces some of the most tangled HTML on the web. The reassuring part is that none of that tangle reaches you. An importer reads the rendered result, not the source, so even a Wix page arrives in Figma as editable layers.

Why import a Wix site into Figma

Wix is a closed loop — you design and host in the same place, and it never asks you to think about a design file. So why pull one back into Figma at all? A few reasons keep coming up:

• Redesigning it properly. Wix's editor is fine for assembling a site, but it isn't where you want to rethink one. Importing the live page gives you an editable starting point in a real design tool, where you can explore freely without wrestling the drag-and-drop canvas.
• Creating a design file that never existed. Plenty of Wix sites were built fast and never drawn anywhere. Pulling the live page into Figma gives you a genuine, editable record of what shipped — to brand against, extend, or hand to someone else.
• Auditing a client's build. If you've inherited a Wix site, importing it lets you take the layout apart in Figma — spacing, type, hierarchy — and mark up what you'd change, instead of squinting at it in the browser.

Import a Wix site, step by step

The mechanics are simple; the only Wix-specific trick is making sure the page has fully arrived before you capture it.

1. Get the live URL. Use the public address of the page — either the free username.wixsite.com/site staging URL or the custom domain if the site has one. Each page imports on its own, so grab the exact one you want.
2. Let the page fully load. Open it and wait for Wix's loading screen to clear and the real page to settle. While you're there, dismiss any cookie banner or age gate so it isn't sitting over the hero when you import.
3. Run the importer and pick a width. In Figma, open Vellum, choose URL as the source, paste the link, and set the viewport width you're designing for. The page is measured from the real browser render and comes back as a frame full of editable layers — not a flat image.

For the wider picture of every way into Figma — paste, file, or live URL — see how to import a website into Figma. And if you want the desktop, tablet, and mobile layouts side by side, importing a responsive site covers capturing each breakpoint as its own frame.

What Wix's structure means for the import

It helps to know what you're getting before you get it. Wix leans hard on absolute positioning — elements are pinned to coordinates rather than flowing in a normal document — and it wraps almost everything in layers of container divs. The upshot is a layer tree that comes in deep and verbose, with more nesting and more wrappers than a hand-built page would ever have.

That sounds worse than it is. Because the importer measures the browser's computed layout rather than parsing Wix's markup, the positions and sizes are still accurate — every element lands where the page actually drew it, at the size it actually rendered. What you trade is tidiness, not fidelity. A Wix import is faithful and busy; you'll likely want to group a few things and tidy the tree once it's in, but you won't be fixing where anything sits.

What to watch for on Wix

Wix puts a few things between you and a clean capture, and an importer can only record what the browser actually painted. Worth knowing before you start:

• The Wix loading overlay. Wix shows a branded loading screen while the page boots. Import too early and you'll capture that, not the site — wait for the real page to appear first.
• Lazy-loaded images and galleries. Wix defers a lot of imagery until you scroll near it, and Pro Gallery grids stream in as you go. If a section looks empty, let it settle — or scroll it into view — so the assets are loaded before you import.
• Cookie and age gates. A consent banner or age check often sits over the hero on first visit. Dismiss it in the browser before importing, or it lands in your Figma file on top of everything.
• Animations resolve to their resting state. Wix's scroll and entrance effects are JavaScript. You get the state the page settles into, not the movement — if something fades or slides in, the import captures where it lands.
• Some fonts are Wix-hosted. Wix serves a number of its own fonts, and if one isn't installed on your machine Figma will fall back to something close. The text stays editable and the name comes across, so you can see what it should be and install it if you need the exact letterforms.

The rule of thumb is the same one that applies to any site: whatever Wix rendered as real layout converts cleanly; whatever it loads late, animates, or overlays is the part to settle — or finish — by hand.

After import: restyle in place

Once the page is layers, the tangle stops mattering — it's all editable. You can restyle it in place: retype the copy, recolour fills, rework the spacing, swap the type. That's exactly the starting point for a refresh, and redesigning a website in Figma walks through it. Or leave it as it landed and treat it as living documentation — a faithful, editable record of what the Wix site looks like today, ready to annotate, hand off, or measure new work against.

The bottom line

Wix is easy to build in and hard to leave, and its drag-and-drop output is the messiest part of that. But the mess is the importer's problem, not yours — it reads the render, not the source, so a Wix page comes into Figma as accurate, editable layers regardless of how it was assembled. Wait out the loading screen, settle the lazy images, clear any gate, and you'll have a real Figma file to redesign or document from — built from the live page, not redrawn from a screenshot.