How to import a Carrd site into Figma

Carrd is the easiest way to put a one-pager online — a bio, a launch announcement, a simple landing page, live in an afternoon. It's also, at some point, the easiest thing to outgrow. When a Carrd site needs a proper redesign, or a move to a bigger platform, the first step is the same: getting it into Figma as something you can actually shape, rather than a page you can only admire in the browser.

Why bring a Carrd site into Figma

Carrd is deliberately minimal, and that's the point — but minimal eventually meets its ceiling. A few moments tend to push a one-pager toward Figma:

• Redesigning a one-pager properly. Carrd's editor is fast for putting things up, less so for exploring. Pulling the live page into Figma gives you room to rethink the layout, type, and spacing with real design tools instead of nudging blocks inside the template.
• Planning a migration. When a site has outgrown a single screen and needs to become a real multi-page build — in Webflow, Framer, or hand-coded — having the current page as editable Figma layers gives you an honest starting point to redraw from.
• Building a real design file. Plenty of Carrd sites were never drawn anywhere; they only ever existed in the editor. Importing the live page gives you a proper, editable record of what shipped, to brand against or extend before you outgrow the template entirely.

Import a Carrd site, step by step

Because every Carrd page is a single screen at a public address, this is about as short as imports get:

1. Copy the live URL. Grab the address of the published page — the free your-site.carrd.co address, or the custom domain if you've connected one. Either works as the source.
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 if you want the mobile layout of the page.
4. Let it render. The page is measured from the real browser render and comes back as a frame of editable layers — not a flat image.

Because Carrd pages are single-screen and lightweight, this is about as clean as imports get. 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

Carrd is a friendly thing to import. It outputs compact, standard HTML and real CSS rather than the tangle some builders leave behind, so the browser resolves concrete values that a faithful importer can read straight off the render:

• Sections as frames. Carrd's stacked sections and containers become frames positioned exactly where the page drew them.
• Text, live and editable. Headings and body copy stay editable, carrying their actual family, size, and weight rather than collapsing to a default.
• Image fills. Photos and background-image assets download and embed as proper Figma image fills.
• Gradients and buttons. Carrd's gradient backgrounds and styled buttons arrive as real Figma fills and shapes, measured from the render — not baked into a picture.

What holds it together is that everything resolves to concrete pixels by the time the page is on screen, and that's what the importer measures — not the markup, but the numbers it produces. If Carrd drew a button at 220 pixels wide, the import is 220 pixels wide.

What to watch for

Carrd is clean, but parts of a page live outside the static render, and an importer can only capture what the browser actually painted. Worth knowing before you start:

• Scroll animations import at rest. Carrd sections often fade or slide in as you scroll. Those are driven by JavaScript, so you get the resting state the page settles into, not the movement — an element that animates in from transparent is captured where it lands.
• Backgrounds come through. Background images and gradients are part of what the browser paints, so they import as Figma fills along with everything else.
• Fonts import by name. If you used a Google Font, the text imports carrying that font's name — and falls back to a default if you don't have the font installed in Figma. Installing the font locally restores the exact letterforms.
• Forms import as their layout. A Carrd contact or sign-up form comes across as its visual design — the fields, labels, and button as layers — not a working form. You're importing how it looks, not what it does.

The rule of thumb is the same one that applies to any site: whatever Carrd rendered from real markup converts cleanly; whatever it animates with JavaScript, or wires up as a working form, is the part you'll finish by hand.

After import: redesign or move on

Once the page is layers, it's yours to work with. You can restyle it in place — retype the copy, recolour the fills, rework the spacing, swap the type — which is exactly the starting point for a refresh; redesigning a website in Figma walks through that. Or, if the plan is to leave Carrd behind, treat the imported layers as the blueprint for a rebuild elsewhere: a faithful, editable record of what the one-pager looks like today, ready to grow into something bigger.

The bottom line

Carrd does one job beautifully — getting a single page online fast — and outgrowing it isn't a failure, it's a milestone. Because its output is small and tidy, pulling a Carrd site into Figma is one of the cleaner imports you can do: mind the scroll animations and the forms, and you'll have an editable file to redesign from or carry to a bigger platform — built from the live page, not redrawn from a screenshot.