Glossary
Glossary Dev Mode

Dev Mode

Also known as: figma dev mode, dev mode, inspect panel, ready for dev
FigmaDesign SystemAgentic

Definition

Figma’s mode for the people who build what was designed — a file view that trades editing tools for inspection: measurements and spacing between any two nodes, the variables and styles a node actually resolves to, generated code for CSS, iOS and Android, a diff of what changed since the last look, and a section marked Ready for dev so a developer knows which frames are claims and which are sketches

It changes a working relationship more than a toolchain. Before it, the hand-off was a spec document a designer wrote and a developer read; with it, the file is the spec and the questions move into the file as comments and statuses. Two things matter for a design system: Dev Mode shows the variable behind a value, so a developer copying #0066f5 can see it was meant to be color.action — which is where a token contract either holds or is revealed as decoration — and the Ready for dev marker is the closest thing Figma has to a promise. It is a paid seat; the MCP server and Code Connect are the two things built on top of it.

Figma

The file stops being a picture of the work and becomes the specification for it. What a design system adds on top is the reason a value in that specification has a name.

Related Terms

  • a: Appearance
  • ?: Keyboard shortcuts