Skip to content
Documentation

Figma

Figma holds the source of the visual contract. It is where the decisions are made and drawn. It is not where they are enforced, and conflating those two is the most common design-system failure.

What earns its place

Section titled “What earns its place”

Variables as the token source. Figma variables are structured, exportable data, which is what makes the token pipeline possible. Colours, spacing, radii and type steps live here as named values, and the export is what code consumes.

The discipline that makes this work: name for the role, not the value. A variable called Purple/600 teaches every consumer to depend on it being purple. One called Color/Brand survives a rebrand.

Components and variants as the design-side catalogue. The counterpart to the component library. The interesting question is never whether it exists but whether the two catalogues still agree — see keeping them aligned.

Modes for theming. Light and dark, density, brand — expressed as modes over the same variable names rather than as duplicated files. If a theme requires a second copy of the library, the roles were not roles.

What it cannot do

Section titled “What it cannot do”

Figma cannot fail a build. Everything it holds is advisory until something downstream checks it.

That has three practical consequences:

  • A design that violates the system is drawable, and will be drawn.
  • A component that exists only in Figma has no implementation and no status; it accumulates stakeholder expectations that nobody has committed to.
  • A value changed in Figma reaches production only if the pipeline runs, and only if a lint rule downstream stops anyone routing around it.

None of these is a criticism of the tool. They are the reason the tool is one of four rather than one of one.

Working practices that keep it usable

Section titled “Working practices that keep it usable”

One library, versioned. A published library with a release note per change. Consumers — including engineering — should be able to see what changed and when.

States drawn, not implied. If the contract says nine interaction states, the frames exist for all nine. A component delivered with only its rest state is a component whose other states will be invented by someone else.

Annotate what a picture cannot carry. Keyboard model, announcement text, focus order, reduced-motion behaviour. These are contract clauses, they are invisible in a frame, and if they are not written next to it they are decided by the developer.

Prune. A library with four abandoned variants of a card teaches everyone that the library is a suggestion. Deletion is a design-system activity.

Where it connects

Section titled “Where it connects”