Figma design system annotations

Inspect will tell a developer that the gap is 24px. It will not tell them that 24px is the section rhythm and 16px was a mistake nobody caught. That gap between measurement and intent is what annotation is for, and it is why design files still need a layer of human commentary sitting on top of the geometry. These components are that layer, and they are the same ones the rest of the Untitled UI foundations are documented with.

Measure guides that put the number on the canvas

The measure and spacing guide is the workhorse: a red dimension bar with the value printed on it and dotted extension lines running to the edges of whatever you are measuring. The number sits in four positions, left, right, top or bottom, so the label never lands on top of the thing being measured. The underlying measure line comes in a solid type for a fixed dimension and a spacer type for a gap.

Figma now ships its own measurements and annotations, which attach to layers and update as the design moves, and those are the better choice for a live spec. Canvas guides earn their place when the spec has to leave Figma, in a slide, a PDF, or a screenshot in a ticket.

Two habits make either kind worth having. Measure the things that are decisions, not the things that are consequences, and measure the same relationship once rather than annotating every instance of a card. If you find yourself drawing forty guides on one screen, the screen is probably telling you the spacing system is not being followed.

Notes, headers, and documentation tables

The design note is a heading with an optional New badge and a paragraph of body text, in a medium and a small size, and it is what turns a wall of frames into something readable in a review. The design system header sits above a section with a breadcrumb, a title, a description, and an optional column of resource links, which is why every foundation page in the kit opens the same way.

Then there is the documentation table cell, the piece doing the quiet work behind every token table: a header cell, lead cells in three levels of emphasis, a divider, a plain value cell, and swatch cells for light and dark values. That single component is what builds the variable tables in the color styles, typography styles and shadows and blurs files, which is a decent argument for keeping documentation componentised rather than drawing tables by hand.

Keyboard keys, for prototypes and shortcut docs

The numeric key component renders Mac keycaps: command, shift, option, control, return, esc, tab, space, delete, the four arrow keys, and a template key you can put any character into. A separate combo component chains one to four of them for things like Shift plus G.

Small component, disproportionately useful, because shortcuts turn up in more surfaces than people expect: command menus, empty states, onboarding tours, and tooltips. Drawing a keycap by hand every time is how you end up with five keycaps at four different corner radii.

Marking what is bound to a variable

The variables icon is the smallest thing in the file and possibly the most useful in handoff. It marks a value as coming from a variable rather than being typed in, with a version for a single bound property and one for several. A developer needs to know whether 16px is a token or a one-off, because one becomes a named constant in code and the other becomes a magic number.

The whole set exists in light and dark versions, so annotations stay readable when you switch a documentation page to a dark background rather than turning into invisible red lines on black.

One structural note worth acting on: keep annotations on their own page or in a clearly marked zone rather than scattered over the working canvas. Figma's own tools put them in a panel for exactly that reason, and canvas annotations that mix with the design get copied, moved, and eventually contradicted.

Figma's notes on developer handoff make the same point about signalling which work is ready to build, and the Dev Mode annotations write-up is worth reading before you decide how much to draw by hand. A file where the notes are separated from the artwork survives being handed to someone else, which is the only real test of a design file.