I have Dev Mode

To inspect designs, enter Dev Mode by selecting the Dev Mode toggle by using the keyboard shortcut Shift D. From there, you can use the following inspection tools:

Measure distances

You can measure distances between objects, even if they are nested within frames, groups, or components. In Dev Mode, select any parent or child layer on the canvas. When you hover over surrounding layers, Figma displays padding values or distances between the two objects. You can also measure the distance between specific objects:

1. Select the first object in the canvas.
2. Hold down the modifier key:
   • Mac: ⌥ Option
   • Windows: Alt
3. Hover over the second object.

Figma will display a red line between the two objects, as well as horizontal and vertical measurements.

Generate code

Click any object on the canvas while in Dev Mode to populate the Code section in the inspect panel. Depending on what’s selected, a typographic preview or box model is displayed, followed by autogenerated code snippets for the object.

To change your language and unit selection, or use a codegen plugin:

1. In the top-right of the Code section, select a language or plugin from the dropdown.
2. If required, click Inspect settings and select a unit from the dropdown.

Learn how to use code snippets in Dev Mode.

View properties

In Dev Mode, the Inspect tab gives you a list of properties for objects on the canvas. This includes properties like: layout, color, typography, text strings, component properties, styles, and variables. To view the properties of an object:

1. In Dev Mode, select an object on the canvas.
2. In the Inspect tab in the right sidebar, scroll to the section with the properties you’d like to inspect.

Explore variables

Dev Mode includes a few ways of working with variables when you're inspecting a design:

• View details about a variable, including the value and mode. You can swap modes, and, if the value uses any aliases, the entire alias chain down to the variable's raw value.
• Get suggested variables for raw values in a design, if the values match one or more of your existing variables.
• Access the variable collections created in the current file and view all the variables and modes in a table.

For more details, see Variables in Dev Mode.

Export assets

Dev Mode can automatically detect icons and present them as downloadable assets for developers. You’ll see these assets in the Inspect tab above the export settings. Hover over any item, select a file type, and click the download icon.

To set up a custom export:

1. In Dev Mode, select the layers you want to export.
2. In the Inspect tab, click the plus icon in the Export section to add an export configuration. You can add as many export configurations to a selection as needed.
3. Configure the export settings. Learn more about Figma's export formats and settings.
4. If needed, click Preview to see how your asset will look. If you have multiple objects selected, the Preview setting does not display.
5. Click Export.

Specify size of image export

Download any selected image on the canvas, and choose between downloading the image at its current size on the canvas or the original image at full resolution.

1. In Dev Mode, select the image you want to download.
2. From the Assets section in the right sidebar, hover over the image you want to download and click the Export icon that appears.
3. From the dropdown, choose from one of the options:
   • Source image file: Download the original image that was used when the image was first imported into Figma.
   • Layer export: Download the image at its current layer size.

View or add annotations

With annotations, designers can communicate key details about a design directly to developers. This includes highlighting important properties, visualizing spacing and sizing with measurements, or sharing context with text notes.

In Dev Mode, annotations appear on the canvas as a green dot. Click an annotation to reveal its contents.

To add annotations to a design:

1. Click the Dev Mode toggle in the top-right of the toolbar or use the keyboard shortcut Shift D.
2. Click Annotate in the toolbar or use the keyboard shortcut Shift T.
3. Select the layer you’d like to annotate.
4. Write a note in the text field, or click + Property to select a property from the list. You can include both plain text and properties in an annotation.

To add a measurement to a design:

1. Click Measure in the toolbar or use the keyboard shortcut Shift M.
2. Hover over a layer to see options for where to start your measurement.
3. Click and drag from your starting point to the layer where you want the measurement to end.
4. Click and drag the measurement so it doesn’t cover the design.

Use plugins

The Plugins tab in Dev Mode shows your recently used plugins, as well as recommended plugins from the Figma Community.

Learn how to use plugins in files.

Compare changes

If a frame or component has been updated since you last viewed it, you can compare its version history. This helps you track the latest updates and keep production code accurate.

You can also compare detached components—or instances with design overrides—against the base component.

1. Select a top-level frame or component.
2. In the Inspect tab of the right sidebar, click Compare changes.

Learn more about comparing changes in Dev Mode.