Lately I’ve been exploring new ways to make my Squarespace design process more focused and organized. Using Figma and FigJam with Squarespace has quickly become one of my favorite approaches.
Rethinking the Squarespace Design Process
Most people jump straight into Squarespace templates when they start designing a website. But I wanted to slow down and see if I could use Squarespace, Figma, and FigJam together to build a smoother and more intentional design workflow.
I’ve used Figma before for larger design projects and love how easy it is to organize everything and collaborate with other teams. Squarespace’s Fluid Engine offers tons of flexibility too, so I wanted to see what would happen if I combined the two worlds.
In the video below, I walk through how I brought everything together, from early brainstorming in FigJam to designing in Figma and finally building in Squarespace.
Why Bring Figma and FigJam Into a Squarespace Project
When you’re working on a website (especially your own), it’s easy to get caught up tweaking things directly inside Squarespace. But by starting in Figma and FigJam, I found I could focus more on the why behind my design decisions instead of just the how.
FigJam became my planning space. It’s great for dropping in ideas, organizing goals, and building a rough sitemap with sticky notes. I also added a moodboard with inspiration from other websites, colors, and typefaces I wanted to try.
Having that space to step back and look at the big picture helped me think through the site’s goals, audience, and tone before I even touched a template.
The Workflow: From FigJam to Squarespace
Here’s how the workflow came together:
1. FigJam – Planning and Brainstorming
I started in FigJam, laying out a sitemap and notes for each page—what it needed to do, who it was for, and what kind of content would live there. I also added a features list for any functionality I might need later, like a free offer or blog integration.
The moodboard section helped me keep my color palette, fonts, and overall vibe in one place.
2. Figma – Setting Up the Design
From there, I opened Figma and created a lightweight starter file. Nothing fancy, just a simple wireframe and some pre-defined Squarespace variables.
I used variables in Figma for fonts and colors so I could experiment quickly. It’s one of my favorite parts of the process since I can test different looks without breaking the whole design.
3. Squarespace – Bringing It to Life
Once I liked how the layout felt in Figma, I started rebuilding it inside Squarespace using the Fluid Engine.
I was surprised by how much I could match from my Figma design without a lot of custom code. I only added a few small CSS tweaks, like fixing button alignment and refining font styles.
For mobile layouts, I stayed inside Squarespace since Fluid Engine makes it fast to adjust spacing and stacking.
What’s Working So Far
It’s still early in this project, but I’m really liking how this workflow feels. Having FigJam open while I design in Figma gives me a quick way to reference ideas, goals, or color palettes. It’s like having a creative dashboard right next to my workspace.
Using Figma variables has also been a big help when trying out different fonts or color themes. It keeps things flexible without needing to rebuild entire sections.
My plan now is to keep building out more pages and refining the design as I go. This approach definitely isn’t using the full power of Figma, but it’s a nice balance between structure and simplicity, perfect for smaller projects or solo creators.
Watch the Full Workflow
If you want to see how all these pieces connect visually, check out the video below. I walk through the full process step by step—from brainstorming in FigJam to building out the site in Squarespace’s Fluid Engine.
Final Thoughts
This workflow is still evolving, but so far, combining Squarespace, Figma, and FigJam has helped me design with more intention and less guesswork. It’s been a great way to organize ideas, experiment visually, and then bring everything together inside Squarespace.
If you design your own sites or work with clients, I definitely recommend giving this approach a try. And if you’ve found other ways to mix design tools into your Squarespace process, I’d love to hear about them.