How to copy one section of a website into Figma

Sometimes you don't want the whole page — you want that one pricing table, that nav bar, that hero. Importing the entire site and deleting everything else works, but there's a cleaner way to grab just the piece you're after.

Two ways to grab just one section

There are two honest routes to a single component, and they trade off the same way every time.

The first is whole-page-then-trim: import the entire URL as layers, then delete every frame except the one you wanted. It always works, because the section arrives in the same context the browser gave it. The cost is weight — you pull in the whole page to keep a sliver of it.

The second is paste-the-element: open the page's markup, copy just the block you care about, and paste that into the importer. You get the component on its own, with nothing around it to clean up. Most of the time this is the faster, cleaner option — so it's the one to reach for first.

Pull the whole page when the section leans on the page. Pull the element when it can stand alone.

The clean way: copy the element's HTML

Every browser ships the tool you need for this — the DevTools inspector. The idea is to find the element that wraps your whole section, copy its markup, and hand that to the importer. Here's the full path:

1. On the page, right-click the section you want and choose Inspect. Your browser's DevTools open with that spot highlighted in the Elements panel.
2. In the Elements panel, walk up from the highlighted node until you find the single element that wraps the whole section — the nav, the pricing table, the hero. Hovering a node lights up exactly what it covers on the page, so you can confirm you've got the right one.
3. Right-click that element and choose Copy → Copy element. This puts the element's outerHTML — the tag and everything inside it — on your clipboard.
4. In Figma, run the importer, choose Paste, and paste the markup. The section rebuilds on the canvas as editable layers.

One honest caveat: a pasted fragment may rely on styles defined elsewhere on the page — a colour set on the body, a font declared at the top, a layout rule on a distant parent. Usually the computed values come across fine, but if something looks off, grab a parent element instead so more of the context comes with it, or import the full page and trim. The fragment carries what it carries; when it leans on the rest of the page, give it more of the page.

The simple way: import the page, keep the section

When the section is tangled up in the page's global styles — or you just want to be sure nothing goes missing — skip the surgery and bring the whole thing in. Import the full URL as layers, let it land, then delete every frame except the one you came for.

It's heavier, and you spend a minute tidying afterwards, but it's foolproof. The section arrives with all the context the browser had, so nothing depends on a style that got left behind. When you're not sure the element can stand on its own, this is the safe bet.

Which to use

The choice comes down to how self-contained your section is.

• Paste the element when the section is a single, self-contained component — a card, a button group, a contained pricing table that carries its own styling.
• Whole-page-then-trim when the section leans on global styles, when a pasted fragment came in looking wrong, or when you want a couple of pieces from the same page and the cleanup is worth doing once.

What you get either way

Whichever route you take, the result is the same kind of thing: the section as real, editable Figma layers. Frames for each block, live text in its true font and weight, photos as image fills, icons as vectors — every node selectable, every value editable.

And it lands at the exact size the browser rendered it, because that's where the measurements come from — the real render, not a guess at your CSS. So the component drops onto your canvas ready to restyle, recolour, or fold straight into your own design, at the proportions it actually had on the page.

The bottom line

You don't have to import a whole site to borrow one piece of it. Paste the element when it can stand alone; pull the whole page and trim when it can't. Either way you end up with the section as editable layers — measured from the real render, ready to design with.