How to Open Figma in Dev Mode

To measure, select a layer, hold the key and hover over another layer. A red line shows the distance. Distances measure to bounding boxes, so strokes and text can make the numbers look off by a pixel or two.

Dev Mode is available on paid plans to people with a Full seat or a Dev seat. Collab and View seats don't include it, and the Starter plan doesn't have it at all.

This message means your plan or your seat doesn't include Dev Mode. Work through it in order:

1. Check which team owns the file. Dev Mode needs a paid plan, so a file in a Starter team won't offer it. If you have a paid team, work from a file in its projects.
2. Check your seat. In a paid team with a Collab or View seat, request an upgrade to a Full or Dev seat from your admin.
3. Use the inspect tools you already have. While you wait, the Properties tab gives you measurements, code and export, covered below.

If the toggle isn't in the toolbar, you're usually in a file or seat without access, which is the same fix as above. If Shift+D does nothing, check that you're in a Figma Design file and not in FigJam or Slides, and that focus is on the canvas rather than a text field. For shortcuts that stop working after a keyboard layout change, see Figma shortcuts not working.

View-only users, and editors in Design Mode, can still do most basic inspection. Select a layer and open the Properties tab in the right sidebar. From there you can:

• Measure distances between layers with ⌥ / Alt.
• Copy CSS, iOS or Android code for the selected layer.
• Export assets from the Export section.
• Leave comments for the designer.

Dev Mode adds the Code panel, variable details, icon detection, annotations, component comparison and a Playground to try component properties. It also brings Ready for dev statuses, Compare changes, Code Connect, the VS Code extension, and plugins for Jira, Storybook and GitHub.

Start with the frames and sections marked Ready for dev. Designers set that status on the work they consider finished, so it tells you where to begin and what is still in progress. When a design changes after handoff, Compare changes shows what moved, so you don't have to diff two screenshots by eye.

Then select a layer and read the right panel from top to bottom. Colors and spacing bound to variables show the variable name, not only the raw value, and the variable details show what it resolves to. If your designers set code syntax on their variables, the snippets use the same token names your codebase does. Without code syntax, you'll see Figma's variable names and may need to map them to your own by hand. Designers setting up tokens can start with how to create variables in Figma.

Native annotations need a Full or Dev seat to view, so developers on a View seat won't see them. If part of your team works without Dev Mode, put the handoff notes on the canvas. Figma annotations explains the native tool and its seat rules, and Figma design specs covers spec sheets that document a component's anatomy, spacing and properties.