Figma Dev Mode and Handoff

Dev Mode is a dedicated view in Figma built for developers. It gives them the exact measurements, colors, fonts, assets, and code snippets they need to build a design — without the ability to accidentally move or edit anything.

What Is Design Handoff?

Handoff is the process of delivering a finished design to a developer so they can build it. Before Dev Mode, designers would attach spec sheets, annotate screenshots, or use third-party tools like Zeplin. Dev Mode puts all of that information directly inside Figma.

Entering Dev Mode

Click the </> icon in the top right of the toolbar, or press Shift + D. The interface switches to Dev Mode. Layers still appear in the left panel, but the right panel now shows code-ready values instead of design editing controls.

What Developers See in Dev Mode

Developer clicks on a button in Dev Mode:
  Right Panel shows:
  -----------------------------------------
  Layer: Button/Primary
  -----------------------------------------
  Width:  120px    Height: 40px
  X: 24            Y: 200
  -----------------------------------------
  Fill:   #1A73E8
  Radius: 8px
  -----------------------------------------
  Text:   "Buy Now"
  Font:   Inter, SemiBold, 14px
  Color:  #FFFFFF
  -----------------------------------------
  CSS:
    background-color: #1A73E8;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
  -----------------------------------------

Code Snippets

Dev Mode generates code in multiple languages. Click the code panel to see options:

• CSS – Styles for web layouts.
• iOS (Swift) – SwiftUI or UIKit code for iOS development.
• Android (XML/Kotlin) – Code for Android layout and styling.

The generated code is a starting point, not always production-ready. Developers use it as a reference to match exact values.

Measuring Distances

In Dev Mode, click any element and hover near other elements. Figma draws red measurement lines showing the distance between objects in pixels. This tells developers exactly how much space to place between a button and the text above it.

Canvas with measurement lines:
  |←── 24px ──→|
  [   Header   ]
  |←── 16px ──→|
  [  Content   ]

Exporting Assets

Developers often need icons, images, and illustrations as separate files. To make an asset exportable:

1. Select the layer in the design file (not Dev Mode).
2. In the right panel, scroll to the Export section and click +.
3. Set the export format (PNG, SVG, JPG, PDF) and scale (1×, 2×, 3×).

In Dev Mode, developers see the export icon on any marked asset and download it directly with one click. They can export at any scale without needing design software.

Ready for Dev Annotations

Designers can mark specific frames as Ready for dev using the status marker in Dev Mode. Frames marked this way get a green checkmark. Developers filter the file to show only ready frames, so they know exactly what to build and what is still in progress.

Component Inspection

When a developer clicks a component instance in Dev Mode, Figma shows:

• The component name and which library it comes from.
• A link to the main component.
• All active variant properties (Size: Large, State: Default).
• Links to any related documentation if the component description includes a URL.

Variable and Token Inspection

If a color is linked to a variable, Dev Mode shows the variable name (e.g., color/brand/primary) instead of just the hex code. This tells developers to use the token from their codebase rather than hardcoding the raw hex value — keeping design and code in sync.

Figma's Design to Code Tools

Third-party plugins extend Dev Mode's capabilities:

• Figma to React – Generates React component code from Figma frames.
• Anima – Exports HTML/CSS/React from Figma designs.
• Tokens Studio – Syncs Figma variables with a design token JSON file used in the codebase.

These tools reduce the gap between what designers draw and what developers build.