Part 1 of 6 · Design system in Figma
Overview — Design system in Figma
What a design system is for a store, why it comes first, and what changes once it's in place.
Free
The design system is checkpoint 1. It’s your style guide, your component library and every page template your store uses, all in Figma, all built from the same rules.
If you’re an ecommerce person who isn’t a designer, this is the track I’d start you on. The way you set up your design foundation decides whether AI becomes your design team or just another toy.
What it is
Three layers, each built on the one before it:
- Style guide. Colour, type, spacing, radius and the rest of your brand’s visual rules. In Figma these live as variables and styles, not as a PDF.
- Component library. Every button, card, section and block, defined once and reused everywhere.
- Page templates. Home, collection, product, landing, cart, and whatever else your store runs on, assembled from those components.
You don’t start from a blank canvas. You start from a base theme on your platform. Not one that represents your brand perfectly today, but one flexible enough to do everything you have in mind for the store, especially the conversion work. Then you build the system out around it.
Why it comes first
Everything visual downstream depends on it. Without a system, AI produces one-off designs that drift off-brand, and every new page reopens the same questions about colour and spacing. With one, AI produces pages and assets that already fit, because the system is the source of truth, not the AI’s taste.
This is the part people skip, because it doesn’t feel like progress. I can’t hammer this in enough: it’s the part that makes everything after it possible.
What changes once it’s in place
- A new section starts from components you already have, not from a brief to an agency.
- Everyone, and every tool, works from the same rules, so pages stop drifting.
- Clickable prototypes and the hand-off to development get much easier, because the design and the theme describe the same pieces.
- Checkpoint 2 becomes possible. Connecting Claude to Figma only pays off when there’s a system for it to follow.
How it connects to the other checkpoints
- AI ↔ design (2) depends on it directly. No system, nothing for AI to stay on.
- Platform (3) and marketing (4) lean on it for anything visual: collection pages, campaign emails, ad creative.
- Processes (5) point back to it as the fixed reference for any workflow that produces something people see.
Who it’s for
- Solo operators. You’re the designer whether you like it or not. The system is what lets you hand most of that work to AI and keep it on-brand. Keep it lean: the components your most-used templates need, not every idea you’ve ever had.
- Small teams. The system is the shared language between whoever designs, whoever builds and whoever writes the campaign. The work is agreeing on it once, and having one person own it.
Next: Requirements, what you need before you start.