What Dev Mode is for
Applies to All viewports
Dev Mode is the view developers use to read a design: sizes, properties, generated code, assets and what changed. It only helps them if the file was prepared for it.
Why?
A developer in Dev Mode sees exactly what you built, including the detached instances and hard-coded values. The file is the spec.
When to use it
- The design is decided and someone is about to build it.
- Developers need to compare a frame with its previous version.
- You want design linked to tickets, documentation or code components.
Common mistakes (3)
- Handing over a link to a whole file with nothing marked ready.
- Explorations and final screens on the same page.
- Values that are not variables, so the developer sees a hex code with no name.
Senior designer note“Open your own file in Dev Mode before you send it. What a developer will see is rarely what you think you made.”
Official guidanceFigma
- Figma
Dev Mode is a developer-focused workspace for inspecting designs, viewing properties and generated code, downloading assets, comparing changes and managing design handoff.
Figma Help, Guide to Dev Mode(opens in a new tab)Tool documentation
- Figma
Available on all paid plans, and requires a Full or a Dev seat.
Figma Help, Guide to Dev Mode(opens in a new tab)Tool documentation
- Figma
Developers can compare frame versions, explore all variants in a component set without editing the file, and link designs to tickets, documentation and code components.
Figma Help, Guide to Dev Mode(opens in a new tab)Tool documentation