How to import a Ghost site into Figma

Ghost is a publishing platform built for writers, and it shows in the themes: clean, typographic, content first, with little of the decoration that clutters a general-purpose site builder. When you want to redesign a Ghost theme — or simply document a publication's look in Figma — pulling the live site in as editable layers beats squinting at the rendered page and re-tracing it by eye.

Why bring a Ghost site into Figma

If your publication lives in Ghost, a trip back into Figma is more useful than it first sounds. A few reasons come up again and again:

• Redesigning a theme. The brief is to rethink how the site looks — type scale, spacing, the feel of a post — and you want to explore in Figma rather than editing Handlebars templates blind. Importing the live theme gives you an editable canvas in minutes instead of an afternoon of re-tracing.
• Designing a new template against the real one. You're drawing a fresh post layout, a new author page, or a tag archive, and you want it to sit beside the existing design at the right proportions. The import gives you the current page to build against, not a guess at it.
• Building a Figma file for a publication that only lives in Ghost. Plenty of sites were set up fast and never drawn in a design tool. Pulling the live pages into Figma gives you a real, editable record of what readers actually see — to brand against, extend, or hand off.

Import a Ghost site, step by step

Because every Ghost page is a public URL, the flow is short:

1. Pick the page to import. Decide which template you want — the home page, a single post, an author page, or a tag archive. These are the key templates a Ghost theme is built from, and each is worth importing on its own.
2. Copy the live URL. Grab the exact address of that page — your *.ghost.io address if you're on Ghost(Pro), or your custom domain. Each page imports separately.
3. Run the importer and choose URL. In Figma, open Vellum, pick URL as the source, and paste the link. Choose a width — a desktop viewport to start, or a narrower one for the mobile layout — and it comes back as a frame full of editable layers, not a flat image.
4. Repeat per template type. Import the home, a post, and an author or tag page, and you'll have the whole theme represented as separate frames to redesign from.

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

Ghost is kind to an importer. Its themes are written in Handlebars and output standard, semantic HTML and genuine CSS — not inline-styled tangle — so the browser resolves concrete values that a faithful importer can read straight off the render:

• Typographic hierarchy. Headings, body copy, blockquotes, and captions keep their real family, weight, and size — which matters more here than almost anywhere, because a Ghost theme is its typography.
• Content layout. The article column, the feed of post cards, the header and footer become frames positioned exactly where the theme drew them, nested the way they're built.
• Images and cards. Feature images and post-card thumbnails download and embed as proper Figma image fills, and the cards arrive as real, editable groups.

The reason it holds together is that everything is measured from the real render. Ghost's theme classes resolve to actual computed pixels by the time the page is on screen, and that's what the importer reads — not the class names, but the numbers they produce. For a content-led design, that fidelity is the whole point.

What to watch for on Ghost

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

• Membership and subscribe overlays. Ghost's membership features add subscribe modals and CTA bars that sit on top of the page. Dismiss them first, so they don't bake themselves over your content.
• Post feeds and infinite scroll. An index or tag page loads more cards as you scroll. You get the cards present at the moment you import — scroll to pull in more first if you want a longer feed.
• Lazy-loaded feature images. Ghost defers images below the fold until you scroll near them. If a hero or a card looks empty, let the page settle — or scroll it — before importing, so the assets are actually loaded.
• Portal and sign-in popups. The Portal sign-in and account popups are injected over the page; close them before you import so they don't end up captured as a layer.
• Theme fonts may fall back. If a theme uses a font you don't have installed, the text renders in a fallback — but the font name is kept on the layer, so you can swap it back once it's in your file.

The rule of thumb is the same one that applies to any site: whatever Ghost rendered from real markup converts cleanly; whatever is injected over the page, or loads in only as you scroll, is the part to settle first.

After import: restyle the theme or template

Once the page is layers, it's yours to work with. You can restyle the theme in place — retype the copy, rework the type scale, recolour fills, adjust the spacing of a post — which is exactly the starting point for a refresh; redesigning a website in Figma walks through that. Or leave the import as it landed and treat it as living documentation of how the publication reads today.

The bottom line

Ghost's writer-first output — semantic Handlebars themes, real CSS, typography doing the heavy lifting — is exactly what a measuring importer wants to read. Dismiss the membership and Portal overlays, settle the lazy images, and you'll have an editable Figma file of your theme or a single post template, built from the live page rather than redrawn from a screenshot.