A design system is only useful if people trust it. Developers trust it when they can check it. I am a designer, not an engineer, so I cannot read every line of code to see if it matches Figma. I need checks that tell me, in plain words, that it does.
The four checks
- Typecheck and lint. They catch broken props and hard-coded colours or sizes that should have come from a token.
- Unit tests. They cover the tokens and the components. In my last React Native setup the suite had 111 tests, and all of them passed before I accepted the work.
- A drift check. It compares Figma, the token files and the generated code, and compares each component's metadata with its current Figma component. It starts with a pass or fail summary. In that same setup it passed 19 of 19.
- A visual preview. A gallery shows every variant of a component in every theme, at small, default and the largest text size, so I can put it next to the Figma page and compare.
Give every component a metadata file
Drift only works if the code remembers what Figma said. So each component gets a small metadata file next to it. It records the Figma component set IDs, how each variant property maps to a prop, the invalid combinations, the tokens it uses and any values that are not yet tied to a token.
When Figma changes, the check can read that file and tell me exactly what moved.
Questions the checks must answer
- If I rename a variable in Figma and pull the change, does the code show a rename, not a delete plus an add?
- If I rebuild the tokens from the JSON, do I get every token back?
- Does the text match the Figma type scale at the default size and at large accessibility sizes, without clipping?
- Can a brand new session, reading only the project rules, build a screen using nothing but design-system parts?
Where it goes wrong
Passing tests do not prove the screen looks right, so I still look at the preview next to Figma. Values that are not tied to a token hide inside components, which is why the metadata lists them. And accessibility sizes get forgotten, so I test the largest text size on purpose.
How to start
The prompt in the Figma and code article sets all of this up, one component at a time, and ends with a quality bar made of the questions above.
All writing