Figma to Squarespace
Squarespace is a closed platform. You cannot edit its templates or its markup. You arrange the sections and blocks it provides, set site-wide styles, and add your own CSS and script on top. A design made freely in Figma will not always fit inside that.
We build Squarespace sites from Figma designs and are frank about the gap. Before building we go through the file and sort every element into three groups: built as drawn, built with custom code, or adapted. You see that list first.
Can this design be copied exactly?
Usually achievable
- Brand fonts, colours, button shapes and spacing.
- Section layouts that sit on a column grid.
- Image galleries, blog lists and product grids in standard arrangements.
- Custom header and footer styling.
- Simple hover and fade effects.
Expect to adapt
- Navigation with unusual structure, such as large multi-column menus.
- Blog or product page layouts that reorder the platform's own elements.
- Checkout pages, which allow very little styling.
- Content that overlaps freely across section boundaries.
- Tablet layouts that differ from both desktop and mobile.
The three layers we work in
Each layer is less safe than the one before, so we go down the list only when needed.
Site styles and the editor
Fonts, colour themes, spacing and button styles are set in Squarespace itself. Sections are laid out on the editor grid, once for desktop and once for mobile. Anything done here survives platform updates.
Custom CSS
Added in the custom CSS panel to reach what site styles do not: exact type sizes, borders, particular spacing, hiding or restyling parts of a block.
Code injection and code blocks
Script and markup added to the page head, footer or a single block. Used for behaviour the platform lacks. Available on some plans only, so we check yours.
What custom code costs you later
Custom code on a closed platform is a trade. These are the terms.
Selectors can change
Squarespace does not promise that its class names and IDs stay the same. An update can stop a rule matching. We target the most stable hooks available and note each one.
Editors cannot see it
A block styled by CSS looks ordinary in the editor until the page is previewed. Staff need to know which blocks are special.
Support stops at your code
Squarespace support does not help with custom code. Someone has to own it.
New pages do not inherit it automatically
Rules tied to one section apply to that section only. We write styles to be reusable where possible and document how to apply them.
How we go about it
Short, and mostly about agreement before building.
Adaptation list
Every element of the design is marked as drawn, custom or adapted, with a sketch or note of the adapted version. You approve it.
Site styles
Fonts, colours and spacing are set globally.
Pages
Sections are built with native blocks, desktop and mobile.
Custom code
CSS is kept in one commented file and you get a copy. Script is added only where listed.
Comparison
Pages are compared with Figma on desktop and mobile and remaining differences are written down.
What helps from the designer
A designer who knows the platform saves you money.
- Desktop and mobile frames; tablet follows the platform
- Layouts drawn on a regular column grid
- Fonts that can be licensed for upload or are already offered
- Final images, cropped, with a focal point in mind
- Real text at real length
- Which pages are blog, shop or gallery collections
- A view on which details are essential and which can flex
Frequent concerns
Do you need our password?
No. Invite us as a contributor with the permissions needed and remove the invitation when the work is done.
Our design needs more than Squarespace offers. What then?
We will say so after reading the file and suggest a platform that fits. Forcing it with heavy script produces a site that is fragile.
Can we keep editing after you finish?
Yes. That is the point of using native blocks first. The handover note lists which parts rely on custom code.
Send the design before choosing a plan
Share the Figma file and your site address if one exists. We reply within one business day.