How to import a WordPress site into Figma

WordPress runs a huge share of the web, and almost none of it has a Figma file behind it. So when you need to redesign, audit, or document a WordPress site, the quickest start usually isn't a blank canvas — it's pulling the live page into Figma as editable layers and working from what's already there.

Why designers import WordPress into Figma

WordPress sites tend to outlive the design work that made them. The theme ships, the agency moves on, and a year later someone wants to refresh the look — but there's no source file to start from, just the live site. Pulling that site into Figma turns the page itself back into a working document.

A few situations come up again and again:

• Redesigning a dated theme. An off-the-shelf theme has aged, and you want to rework the hero, the type, and the spacing without rebuilding the whole page from scratch first. Importing gives you the current state as layers to edit against.
• Reclaiming a client site with no design file. You inherit a WordPress build with nothing in Figma behind it. Rather than recreate it by eye, you import the live pages and have an accurate starting point in minutes.
• Auditing before you quote. Before pricing a redesign, you want to see the real type scale, colours, and spacing the existing build uses. Bringing it onto the canvas lets you measure it properly instead of guessing from a screenshot.

Import a WordPress page, step by step

The flow is the same as importing any live page, with one or two WordPress habits worth knowing in advance.

1. Find the live URL of the page you want — the homepage, a landing page, a blog post, whichever you're working on. Any public WordPress page will do.
2. If a cookie or consent banner overlays the page, accept or dismiss it first so it isn't captured sitting over the hero — or be ready to crop it out afterwards. WordPress sites lean on these plugins heavily, so it's worth a glance.
3. Run the importer in Figma, choose URL as the source, paste the address, and pick a width to render at.
4. Let it render. The page comes back as a frame full of editable layers — live text, image fills, vectors — measured from the real browser render, not flattened to a picture.

For the full walkthrough of every route onto the canvas, see how to import a website into Figma. And because URL import has its own quirks — CORS, redirects, pages that block fetching — importing a URL into Figma covers those specifically.

Themes and page builders

WordPress pages don't all share the same shape under the hood, and the difference matters once you're looking at the layer tree. The good news is that it changes how tidy the result is, not whether it works.

Classic themes and the newer block themes tend to import cleanly. Their markup is reasonably flat, so the frames come back close to how you'd have structured them by hand. Page builders are the other end of the scale. Elementor, Divi, and WPBakery wrap every section in layers of nested containers, rows, columns, and wrappers — a single button can sit five or six divs deep.

That sounds like trouble, but it isn't, because a good importer doesn't read your source markup at all. It reads the layout the browser computed — the real positions and sizes after every container resolved — so a Divi page rebuilds just as faithfully as a hand-coded one. The only practical cost is a deeper layer tree to work through and tidy. Expect more nesting from a builder-made page, and budget a few minutes to flatten the groups you don't need.

What to watch for on WordPress

A handful of WordPress patterns trip up imports more than the theme ever does. None are dealbreakers — they just reward a little preparation:

• Cookie and GDPR popups. The single most common snag. A consent banner sitting over the hero gets captured along with everything else, so dismiss it before importing, or crop it out after.
• Sliders and carousels. A rotating hero slider imports at whatever slide happens to be showing at the moment of capture. If you need a specific slide, pause it on that one first.
• Lazy-loaded images. Plugins that defer images until they scroll into view can leave placeholders behind. Give the page a moment to settle, and let it scroll, so the real images have loaded before the trace.
• Sticky headers. A header fixed to the top of the viewport can occasionally appear twice — once where it sits and once where it sticks. Easy to spot and delete one.
• Late-injected content. Some plugins add sections after the page first paints — popups, embedded feeds, A/B variants. What's on screen when the trace runs is what comes across.

From import to redesign or token audit

Once the page is layers rather than a picture, the WordPress build becomes raw material for whatever you came to do.

If the goal is a refresh, you can restyle in place — retype the headlines, recolour the fills, rework the spacing on the same frames you imported. Redesigning a website in Figma walks through that workflow. If instead you're auditing — pinning down exactly what the existing theme uses — every layer carries its real values, so you can read the true hex codes, font stacks, and spacing straight off the canvas. Pulling a site's colours, fonts and spacing into Figma covers that side.

The bottom line

WordPress hides its design behind a database, but the rendered page tells the whole truth. Import it by URL and you get that page back as editable layers — theme, builder, and all — ready to redesign or measure. Mind the cookie banner and the lazy images, and the rest comes across faithfully.