AI for Coding
AI for Image and Video
Research Using AI
MS Office Suite
Operating Systems & Tools
Management Tools
Courses
  • Data Science 360 CourseExplore

    • DevMode in Figma

    Last Updated : 7 Oct, 2026

    Dev Mode in Figma is a developer-focused interface for inspecting and navigating designs. It helps developers understand design properties, measurements, assets, code snippets, annotations, and other information needed to implement a design. It also supports developer handoff by allowing teams to mark designs as ready for development and compare design changes.

    Steps to Enter Dev Mode

    Step 1: Open a Figma Design file and click the Dev Mode toggle in the toolbar. You can also press Shift + D to switch between Design Mode and Dev Mode

    Screenshot-(429)
    DevMode

    After entering Dev Mode, the Figma interface changes to the developer-focused view.

    Screenshot-(430)
    DevMode Enabled

    Step 2: Select an object on the canvas in Dev Mode. The Inspect panel displays information about the selected object, including its design properties. The Code section can also provide code snippets for the selected object.

    Screenshot-(433)
    Code of the box

    Properties of DevMode in Figma

    • Inspect design properties: Dev Mode allows developers to inspect the properties of selected layers, including layout, colors, typography, component properties, styles, and variables.
    • Box model: When an object is selected, the Code section can display its box model, including margin, border, and padding details, along with layout and style information.
    • Code snippets: The Code section can generate code snippets for selected objects based on the available language and unit settings.
    • Plugins: Dev Mode provides a Plugins tab where developers can access recently used and recommended plugins for development workflows.

    Uses of Dev Mode in Figma

    • Inspect design details: Dev Mode lets developers inspect layout, spacing, colors, typography, component properties, styles, and other information for selected objects.
    • View code snippets: Developers can view and copy autogenerated code snippets for selected objects from the Code section in the Inspect panel.
    • Measure spacing: Developers can measure distances between objects and view spacing or padding values directly in Dev Mode.
    • Compare design changes: Developers can compare different versions of a frame or component to see changes in design properties and code.
    • Annotations: Designers can add notes, properties, and measurements to designs to provide additional context for developers during handoff.
    Comment