How do you build and maintain design systems in Figma?
On our own site the design system lives in code rather than in Figma: a tokens file holds the values, and every block on the site has a permanent reference. A design system is the shared set of colours, type styles, spacing and components that every page is built from. In Figma, we draw a project's layouts and agree them with you before anything is built.
What a design system is
A design system is the shared set of parts a brand's pages are built from: colours, type styles, spacing, and components such as buttons, forms, cards and navigation.
How one can be organised in a Figma file
- Set the colours, type and spacing first.
- Build components once and reuse them across pages, so a change to a button is made in one place.
- Figma's variables hold the values, which Figma's MCP server can pass to an AI coding tool.
How ours is kept
Our own site's design system is in code, not in Figma. The values sit in a tokens file, the styles are built from it, and every block has a permanent reference. The site itself is the source of truth. Figma is where we draw layouts and agree them with you. See how we use Figma.
Keeping it tidy
On our own site, a new block is registered in the block registry rather than made as a one-off.
Also worth asking
Other answers about the same tools.
How do you integrate Adobe Photoshop into modern marketing workflows?
Photoshop is where an image gets prepared. We design the page or ad layout in Figma, then export the image at the size the layout needs and compress it before it goes on a page or into an ad.
For one shop we built a Photoshop template for its product photos, with fixed export names and a three-stage compression pipeline.
How does Adobe Photoshop compare to Figma for design work?
They do different jobs. Figma is for layouts: pages, ads, components and feedback from your team. Photoshop is for the image itself: retouching, cut-outs and compositing.
Our design work happens in Figma, and we've used Photoshop for the picture itself, in the product image template we built for a shop.
How do you integrate Figma with other marketing and development tools?
Figma sits at the start of a build. We agree the layout in the file with you, then it's built on the platform that suits the site: Webflow, or code when a site needs it.
Figma also has an MCP server that lets an AI coding tool read a file's layout, components and variables. We can connect it to our coding tools.
How do you use FigJam for marketing strategy and brainstorming sessions?
FigJam is Figma's online whiteboard. It's handy for mapping a customer journey or sketching a campaign with a group, because everyone can add notes to the same board at once.
Our own design work happens in Figma files rather than FigJam boards, so we don't run FigJam as a service. Tell us if your team already uses it and we'll work with your boards.
What does Figma cost and which plan should you choose?
Figma has a free Starter plan, then paid Professional, Organization and Enterprise plans billed per seat. Seats come in three kinds: Full (design), Dev and Collab. At the time of writing (21 October 2026), a Full seat is $16 a month on Professional and $55 on Organization. Figma's page didn't state Professional's billing period, so check figma.com/pricing.
When we design for you, we work in our own workspace and add you to the file to comment on it. If your team keeps editing afterwards, the seat you need depends on what each person does.
Still have questions?Talk to us
Bring your numbers.
We'll tell you if the spend makes sense.
- A 15-minute callYour goals, your challenges, and whether we're the right fit.
- A 1-hour discovery callWe dig into your numbers. Worth a hundred emails.
- A concrete planAds, a custom build or both, as a one-off project or ongoing.