Part 6 of 6 · Design system in Figma
Checklist — Design system in Figma
What a 2, a 3 and a 4 look like for the design system, and how you know you've earned a 4.
Free
The Score rates this checkpoint from three questions: where your colour, type and spacing rules live, what happens when you need a new section, and how many of your page templates are designed in Figma. This is what each rating looks like in practice.
0 or 1: not started, or ad hoc
- Brand rules live in people’s heads, a PDF or a few loose Figma files.
- A new section means briefing an agency or developer, or copying an old one and tweaking it by hand.
- The live theme is the only complete version of your templates, apart from one or two left over from the last redesign.
A 2: in place, not connected to AI
- Colours, type and spacing are variables and styles in one Figma file the team works from.
- A component library covers the sections your store uses, and new sections are put together from it.
- Every page template (home, collection, product, landing, cart) is designed in Figma and kept in step with the live site.
- Variables and components follow one naming convention.
- One person owns the system and approves changes to it.
A 3: connected, used sometimes
Everything in a 2, plus:
- An AI tool has pulled in your variables and built a page or two from them.
- New sections start from your Figma components, and sometimes AI drafts them from those components.
- AI can read your page templates when you ask it to.
A 4: connected, and part of how work gets done
Everything in a 3, plus:
- Every new page or asset is built from your variables, whether a person or AI makes it.
- AI puts new sections together from your component library by default. You review and ship.
- AI works from your page templates every time a page changes.
- Changes to the system happen in Figma first, and the live theme follows.
You’ve earned a 4 when…
- Nobody, person or AI, picks a colour, font size or spacing value by eye.
- A new section goes from idea to review without a brief to an outside designer.
- Figma and the live site describe the same store.
- Off-brand output is rare enough to be a surprise, and when it happens you fix the system, not just the page.
Next track: Connect Claude to Figma.