Skip to content

The design system and when it enters

A design system — the shared library of components, tokens, and patterns — is infrastructure that makes shaping faster and more consistent. If the team has one, wireframes use its components from the start: buttons, inputs, cards, tables are already decided. If the team does not yet have one, the first feature is usually when the need becomes visible — when the designer draws the same button three times and realises it should be a component.

The chain does not prescribe when to build a design system. It prescribes that once one exists, every wireframe uses it. Diverging from the system is a design decision that gets recorded as a PDR, not an accident that drifts. A design system that is used inconsistently is worse than none — it creates two sources of truth where only one should exist.

Stories and wireframes grow together

The designer discovers a state that needs a backbone — Product Owner adds it to the map. The Product Owner expands a backbone and realises a state is missing — the designer adds it. This is not a handoff between two roles. It is a single conversation that runs for the duration of release-1 shaping.

Backbones get expanded into full stories only when their wireframes exist. The backbone "Gal marks an open-answer response" becomes a story with: a named moment, a description from Gal's perspective, links to the wireframe states, an out-of-scope statement. The card on the map remains a single tile — its underlying ticket in JIRA grows from sentence to specification.

When fidelity reaches full resolution

After amigos, for release-1 stories only, the designer moves to full fidelity. This means: real copy in every label and message, final spacing and alignment, all in-between states drawn (loading, empty, error, partial), interaction specifications (hover, focus, transitions), and responsive behaviour if the product requires it. The prototype is updated to reflect these states. This is the version the developer implements against — and the version visual regression tests will compare to.

Full fidelity is not polish. It is the level of resolution where a developer can build without inventing a UI decision. If the developer has to guess what the empty state looks like, fidelity is not done.

Next — How the design file is organised →

200apps · How We Work · NWIRE