Squarespace sites tend to be clean, image-forward, and template-driven — which makes them some of the nicer pages to bring back into Figma. Whether you're redesigning a tired portfolio or auditing a client's shop before you quote, importing the live page beats rebuilding it from a screenshot. You get the structure the template already worked out, with the type and spacing intact, as a starting point you can actually edit.
Import a live Squarespace site by its URL and it rebuilds as editable Figma layers. Squarespace's template markup imports cleanly; the things to mind are heavy hero and gallery images that lazy-load, parallax banners that settle to a resting state, and template fonts that may fall back if you don't have them installed.
Why bring Squarespace into Figma
If a site already lives in Squarespace, drawing it again in Figma can feel like a step backwards. It usually isn't. A handful of reasons come up over and over:
- Redesigning a template-locked site. Squarespace is comfortable until you want something its editor won't quite do. Pulling the live page into Figma lets you rethink the layout freely — move things, regroup sections, try a different rhythm — without fighting the template or touching the live site.
- Creating a source of truth. Plenty of Squarespace sites were built straight in the editor and never drawn in a design tool. Importing the live page gives you a real, editable record of what shipped — something to brand against, extend, or hand to whoever works on it next.
- Auditing before a quote. Before you price a redesign, you want to see the type scale, the spacing, and the palette the current site actually uses. An import puts all of it on the canvas where you can measure it, rather than guessing from a flat capture.
Import a Squarespace site, step by step
Because every Squarespace page is a public URL, this is short work. The flow is straightforward:
- Copy the live URL. Use the page's real address — your custom domain if you have one, or the built-in
.squarespace.compreview URL. Either resolves to the same rendered page. - Let the page settle. Open it in a browser first. Scroll image-heavy sections into view so the hero and galleries finish loading, and dismiss the cookie banner if one appears, so it doesn't sit over the top of the page.
- Run the importer and choose URL. In Figma, open Vellum, pick URL as the source, and paste the link.
- Pick a width. Choose the viewport you're designing for — a desktop width to start, or a narrower one to capture the mobile layout.
- 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 onto the canvas — paste, file, or live URL — see how to import a website into Figma.
What imports cleanly
Squarespace is kind to an importer. Its template HTML and CSS are tidy, so by the time the page is on screen the browser has resolved concrete values a faithful importer can read straight off the render:
- Structure as frames. Sections, blocks, and grids become frames positioned where the template drew them, nested the way the page is built.
- Text with the right type. Headings and body copy stay live and editable, carrying their actual family, weight, and size rather than collapsing to a default.
- Image fills. Photos and
background-imageassets download and embed as proper Figma image fills. - Full-bleed banners and grids. The big edge-to-edge hero and the gallery grid rebuild as real frames, sized exactly as they render — not baked into a single picture.
The reason it holds together is that template styling resolves to real computed pixels by the time the page paints, and that's what the importer measures — not the class names, but the numbers they produce. If the template drew a card at 320 pixels wide, the import is 320 pixels wide.
What to watch for on Squarespace
Squarespace is clean, but a few of its habits live outside the static render, and an importer can only capture what the browser actually painted. Worth knowing before you start:
- Large hero and gallery images lazy-load. Squarespace defers heavy images until you scroll near them. If a hero or a gallery comes in empty, it's because the assets hadn't loaded yet — let the page settle, or scroll it through, before importing.
- Parallax and scroll effects resolve to a resting position. Banner parallax, fade-ins, and scroll-triggered motion are JavaScript. You get the state the page settles into once it's still, not the movement — which is usually exactly what you want to redesign from.
- The cookie banner can overlay the top. If a consent notice is showing when you import, it sits over the page as its own layers. Dismiss it first so your hero isn't half-covered.
- Template fonts may fall back. Squarespace often serves type through Adobe Fonts or Google Fonts. If a family isn't installed where you're designing, Figma substitutes an installed one — but the real font name still comes across, so you always know what to license to make it match.
The rule of thumb is the familiar one: whatever the template rendered from real markup converts cleanly; whatever it animates, or hasn't finished loading, is the part to settle or finish by hand.
After import: restyle or read the design
Once the page is layers, it's yours. You can restyle it in place — retype the copy, recolour fills, rework the spacing, swap the type — which is the natural starting point for a refresh; redesigning a website in Figma walks through that. Or, before you change anything, you can read the design straight off the canvas: pulling a site's colours, fonts and spacing into Figma covers lifting the real hex values and type scale so a redesign or a quote starts from facts.
The bottom line
Squarespace's template output is exactly the kind of tidy, image-forward markup a measuring importer wants to read, which is why these pages tend to come in well. Settle the lazy images, clear the cookie banner, note any fonts you'll need to license, and you'll have an editable Figma file to redesign or audit from — built from the live page, not redrawn from a screenshot.