How to Convert Figma to Squarespace in 5 Steps (2024 Guide)
Did you know you can embed a Figma prototype in Squarespace?
This is a great way to showcase your work, share ideas with clients, and get feedback from your site visitors.
Here’s how to add Figma to Squarespace in five simple steps.
How to embed a Figma prototype in Squarespace
Step 1: Create a Figma account
The first step is to create a Figma account – if you already have one, you can skip to the next step.
Go to Figma, click the Get started for free button, and follow the prompts.
Step 2: Open the file you want to embed
When you’re in Figma, open the file you want to embed in Squarespace and click the blue Share button in the banner at the top of the page.
Step 3: Grab your code
Select Get embed code and copy the custom code that appears.
I recommend pasting your code into a notepad file on your desktop. That way, you won’t lose it if you accidentally copy something else.
Step 4: Access your Squarespace site
Open your Squarespace site and go to the page you want to add your Figma prototype to.
Click Edit, scroll to the section you want to embed your prototype in and click the blue plus {+) button.
Choose Code from the block menu.
Step 5: Add your code
Grab the code you got from Figma, delete the code that’s already in the code block, and paste your code in. Make sure the block is in HTML mode and Display Source Code is toggled off.
Your Figma prototype will automatically appear. Bear in mind that depending on the size and complexity of your Figma file, it might take a few seconds to load.
When it’s on your page you can click the plus and minus buttons to zoom in and out and the arrows in the top right-hand corner to expand your prototype to full screen.
Well done – you’ve successfully added Figma to Squarespace!
Will my Figma code automatically update?
When you embed a Figma prototype in Squarespace, it won’t automatically update if you make any changes.
If you update your design, you’ll need to re-embed it.
Follow steps two and three and go to the Squarespace page your prototype is on. Click on your embedded prototype, click the pencil button to edit, and replace the existing code with the new code.
Want to know more about all the cool things you can embed into your Squarespace site? Check out the Spark’s Palette blog for more inspiration!
