Stop 08 · Design SystemsTopics · 9/9

Maintaining Design-Dev Consistency

In short

The Figma file says 16px padding. The live app has 14px. Multiply that by a hundred tiny gaps and the product slowly stops looking like its design. Keeping both in sync is ongoing work.

Ensuring the built product actually matches the design system — requires ongoing design QA (Phase 11) and close collaboration, since drift between Figma and shipped code happens constantly without active effort.

The jaadu, as a tailor, measures a customer's sleeve with a measuring tape during a kurta trial.

Think of it like this

The tailor and the measurement slip

You give the darzi exact measurements. If he rounds off each one 'a little', the kurta still fits badly. That's why you go for a trial before the final stitch. Design and code need regular trials too.

Watch it happen

Keeping Figma and code in step

Figma

Tokens

Code

Export variables

1/4Designers update variables in Figma, then export them to a shared token file.

The big ideas

What you need to know

Automate tokens

Generating code values from the token file removes a whole category of copy-paste mistakes.

Mirror names

If Figma calls it 'Card / Elevated' and code calls it 'BoxShadowContainer', mistakes follow. Agree on names.

Review the build

Design QA on real devices catches drift early, before it spreads to other screens.

Talk often

A shared channel and regular sync with developers stops small differences from piling up.

Save yourself the pain

Common mistakes

Oops

Only checking design-code drift once a year.

Do this instead

Review built features before every release. Small fixes are cheap, big audits are painful.

Oops

Blaming developers for every difference.

Do this instead

Check if the design was unclear or missing states first. Drift is usually a process problem.

Your mission

Spot the drift

~25 min

Quick check

What best prevents colour mismatches between Figma and code?

Go deeper

1Compare a shipped screen against its original Figma design and note any drift.
2Learn why regular design QA sessions catch drift before it compounds across many features.
3Preview Phase 11 for the collaboration practices that help maintain this consistency.