···

    Guide to inspecting

    If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →

    Inspecting designs helps developers or other stakeholders understand the structure and properties of a design so they can more easily translate it to code.

    How you inspect a design file depends on your plan type, seat type, and your file permissions. Use the tool below to see how to do common inspection tasks—exporting, measuring, generating code, viewing annotations, and using plugins for development—based on your personal access to the file you’d like to inspect.

    No matter your file access, there is an inspect experience available to you.

    First, check to see if you have access to Dev Mode in the file you’re inspecting by toggling to Dev Mode at the top of the file or by using the keyboard shortcut Shift D. If you don't have access to Dev Mode, you’ll be inspecting in Design Mode. You can select if you have can edit or can view access to see how to inspect.

    I don't have Dev Mode, and I have view-only access

    Need access to Dev Mode? If you’re on the Starter plan, you’ll need to upgrade to a paid plan or move your file to a paid team. If you’re on a paid plan, you’ll need a full Design seat on the Professional, Organization, or Enterprise plans or a full Dev Mode seat on the Organization or Enterprise plans.

    With view-only access to a design, you can use inspection tools directly within Design Mode:

    Measure distances

    You can measure distances between objects, even if they are nested within frames, groups, or components.

    1. Select the first object on 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.

    Tip: Having trouble measuring? Check out the guide to measuring the distance between objects.

    Generate code

    You can copy auto-generated code snippets for CSS, iOS, or Android.

    1. Select an object on the canvas.
    2. Right-click on the object and select Copy/Paste as > Copy as code.
    3. Select the code option that suits your needs.

    View properties

    The Properties 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. Select an object on the canvas.
    2. Click the Properties tab in the right sidebar.

    Export

    1. Select the layers you want to export. If you want to export the entire canvas of the current page, deselect everything on the canvas.
    2. In the Export tab, click the plus icon 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 won’t display.
    5. Click Export.

    Tip: Want to learn more about exporting? Check out the full guide to exports in Figma.

    View or add comments

    Comments help designers and developers collaborate by drawing attention to specific parts of the design. You can leave comments to share more context about how parts of the design should work.

    1. Click in the toolbar, or press C to enter comment mode. Your cursor will turn into a .
    2. Select a location to comment on:
      • Click the location on the canvas where you'd like the comment to be pinned.
      • Or, click and drag your cursor to select a region to comment on.
    3. Type your message in the field. Type @ to mention a colleague or collaborator.
    4. Click to send your message.

    Use plugins

    You’ll need can edit access to use plugins in a file.

    I don't have Dev Mode, and I have can edit access

    Need access to Dev Mode? If you’re on the Starter plan, you’ll need to upgrade to a paid plan or move your file to a paid team. If you’re on a paid plan, you’ll need a full Design seat on the Professional, Organization, or Enterprise plans or a full Dev Mode seat on the Organization or Enterprise plans.

    With can edit access to a design, you can use inspection tools directly within Design Mode:

    Measure distances

    You can measure distances between objects, even if they are nested within frames, groups, or components.

    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.

    Tip: Having trouble measuring? Check out the guide to measuring the distance between objects.

    Generate code

    You can copy auto-generated code snippets for CSS, iOS, or Android.

    1. Select an object on the canvas.
    2. Right-click on the object and select Copy/Paste as > Copy as code.
    3. Select the code option that suits your needs.

    View properties

    The Design 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. Select an object on the canvas.
    2. In the Design tab in the right sidebar, scroll to the section with the properties you’d like to inspect.

    Export

    1. Select the layers you want to export. If you want to export the entire canvas of the current page, deselect everything on the canvas.
    2. In the Design 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 won’t display.
    5. Click Export.

    Tip: Want to learn more about exporting? Check out the full guide to exports in Figma.

    View or add comments

    Comments help designers and developers collaborate by drawing attention to specific parts of the design. You can leave comments to share more context about how parts of the design should work.

    1. Click in the toolbar, or press C to enter comment mode. Your cursor will turn into a .
    2. Select a location to comment on:
      • Click the location on the canvas where you'd like the comment to be pinned.
      • Or, click and drag your cursor to select a region to comment on.
    3. Type your message in the field. Type @ to mention a colleague or collaborator.
    4. Click to send your message.

    Use plugins

    You can run a plugin from the Community or directly from a file in Figma or FigJam.

    1. Click Resources in the toolbar.
    2. From the Plugins tab, select from your recently used or saved plugins or search for a plugin from the Community.
    3. Click on a plugin to view its details.
    4. Click Run to run the plugin in the current file.

    Learn more about using plugins in files →

    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.

    Tip: When inspecting a component or instance, you'll see a component preview, a link to the main component, as well as any links to relevant documentation and dev resources. The component playground appears in the Inspect panel when a component instance is selected. Use the playground to experiment with the components different properties without changing the actual design.

    Explore variables

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

    For more details, see Variables in Dev Mode.

    Export or download 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.

    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.

    Note: You need a full seat and can edit access to add annotations to a file.

    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.

    Tip: Hold Shift and click to select two components on the canvas to compare them with each other.

    Learn more about comparing changes in Dev Mode →

    Was this article helpful?

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    Return to top