How to import a Notion site into Figma

"Notion to Figma" can mean two very different things, and which one you want changes everything. If you're after your Notion docs and databases as content — pulling pages of writing into a design tool — that's one job, and there are plugins built for it. If you've built a website on Notion and want it in Figma as a design you can edit, that's a different job entirely, and it's the one this guide is about.

Two meanings of "Notion to Figma"

Search "Notion to Figma" and you'll land on two unrelated answers, because two different needs share the same phrase. It's worth sorting out which one is yours before you go any further.

• Notion docs and databases as content. You have a Notion page — a wiki, a spec, a roadmap, a table — and you want its text and structure inside Figma to lay out or annotate. That's a content job, and there are dedicated "Notion to Figma" plugins that connect to your workspace and pull the writing across. If you're building documentation or moving copy out of Notion, that's the path you want — and this guide isn't it.
• A Notion-built website as a design. You've turned a Notion page into a public site — a raw notion.site URL, or a polished site through Super or Potion — and you want that rendered page in Figma as editable layers, to redesign or document. That's a design job, and it works because a published Notion site is, in the end, just a web page. This is what the rest of the guide covers.

Both are legitimate, and neither is a substitute for the other. The quick test: do you want the words, or do you want the page? If it's the words, reach for a content plugin. If it's the page as it looks in a browser, read on.

Import a Notion site, step by step

Because a published Notion site lives at a public URL, getting it into Figma is short — you're importing a web page, the same as any other.

1. Get the live URL. Open your published site in a browser. For a raw Notion page that's the *.notion.site address; if you publish through Super or Potion, use the custom domain you set up. Copy the link of the exact page you want.
2. Run the importer and choose URL. In Figma, open Vellum, pick URL as the source, and paste the link.
3. Pick a width. Choose the viewport you're designing for — a desktop width to start, or a narrower one for the mobile layout.
4. Let it render. 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.

What imports cleanly

The thing to understand about a published Notion site is that, whatever it was built from, the browser receives ordinary HTML and CSS. Notion renders your blocks into real markup; Super and Potion wrap that in their own styling and serve it as a normal page. By the time it's on screen, there's nothing Notion-specific left for an importer to trip over — just a rendered web page like any other.

• Layout as frames. The page's columns, sections, and callout blocks become frames positioned where the browser drew them, nested the way they stack.
• Text that stays editable. Headings, paragraphs, and list items come across as live text carrying their actual family, weight, and size — measured from the render, not collapsed to a default.
• Images and cover art. Page covers, inline images, and background-image assets download and embed as proper Figma image fills.
• Blocks as you see them. Toggles, callouts, dividers, and embeds arrive as the layout they paint on the page — the visual result, read off the real render rather than reconstructed from Notion's data.

What makes it hold together is that the importer measures pixels, not source. It doesn't care that the page came from Notion or Super; it reads what the browser actually painted. If a Super site drew a hero at 1200 pixels wide, the import is 1200 pixels wide.

What to watch for

Notion sites import well, but a few of their habits are worth knowing before you start — an importer can only capture what the browser actually painted.

• Raw notion.site pages can be sparse, and they lazy-load. A plain Notion page is light on styling and defers content as you scroll. If a section looks empty, let the page settle — or scroll it through — before importing, so everything has actually loaded.
• Super and Potion add custom styling and fonts. They give Notion sites real design — and custom typefaces. Fonts import by name and stay editable; if a face isn't installed in your Figma, it falls back, and the text re-wraps to fit. Installing the site's font locally gives you the true letterforms.
• Toggles, embeds, and databases come in as their current state. A collapsed toggle, an embedded map, a linked database view — these render as the single visual state on the page when you import, not as interactive widgets you can open or refilter.
• Sticky nav bars may repeat. A header that's pinned to the top while you scroll can be captured more than once down the page. It's a quick cleanup — delete the duplicates.

The rule of thumb is the same one that applies to any site: whatever the page rendered from real markup converts cleanly; whatever is interactive, or pulled live from a database, is captured as the still it was at import.

After import: redesign or move off Notion

Once the page is layers, it's yours to work with. You can redesign the site in place — retype the copy, recolour the fills, rework the spacing, swap the type — without touching the live Notion build. Or treat the import as a blueprint: a faithful, editable record of what the site looks like today, the starting point for moving off Notion onto a full design-and-build. Either way, redesigning a website in Figma walks through working from the real page instead of a blank canvas.

The bottom line

If "Notion to Figma" meant the words for you, a content plugin is the answer. If it meant the page — a notion.site URL, or a site you shipped through Super or Potion — then it imports like any other published site, because that's exactly what it is by the time the browser renders it. Settle the lazy content, mind the fonts and the interactive bits, and you'll have an editable Figma file built from the live page, not redrawn from a screenshot.