A guide to Design System
maintenance over time

Design software has evolved exponentially over time but it’s not until you stop and look around that you notice the effect of that change.
‍
A few years ago, designers would manually configure each variant in the right-hand panel (preferred design software at that time: Sketch), then take all specifications across to another document (preferably: Confluence; probably: Microsoft Word) to prepare for development handover.
‍
For example, a single line of text "Component title", would need the following seven text styles prepared;
- Typeface
- Type weight
- Type size
- Type style
- Type colour
- Type alignment
- Type anchoring

This process was tedious and came with great time cost. Everyone knew about the duplication of effort when speccing designs for development, but no one knew what to do about it.

If someone could come up with a way to systematise UI specifications so they’re all documented in one place, we’d find harmony between design and technology.

Cue, tokens.
‍
Tokens are visual design attributes that act as a single source of truth for consistent design across platforms and technologies, bridging the gap between design and code.
‍
Now, all that’s needed is a keyboard shortcut that copies and applies token values from one thing to another. Reflecting all specifications closely below in the RHS panel. The gravity of this can be recognised in time saved from preparing redundant development handover documents, now all built into the software (preferred: Figma).

Could it get better? Yes, if design tokens are 1:1 mapped with development, then there is no longer  a need for developers to write front-end code.
‍
Cue, Generative UI.