Developer Handoff

Handoff is the process of translating a finished design into working code. It is where design and development meet, and it is historically one of the most friction-filled stages of product development. Figma has invested heavily in making this smoother with Dev Mode, the Inspect panel, and asset export tools. Mastering these features lets you build pixel-accurate implementations efficiently.

The Inspect Panel

The Inspect panel is your primary tool during handoff. Select any element in Figma and the right sidebar shows:

Layout Properties

• Position — X and Y coordinates relative to the parent frame.
• Size — Width and height in pixels.
• Rotation — Angle in degrees.
• Constraints — How the element is pinned within its parent.

Typography

For text elements, you see the complete type specification:

Font: Inter
Weight: Semibold (600)
Size: 18px
Line height: 28px
Letter spacing: -0.01em
Color: #1E293B

Copy these directly into your CSS:

.card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.01em;
  color: #1e293b;
}

Fill and Stroke

Colors are shown with their hex values, opacity, and — crucially — the style name if one is applied. Always prefer the token name over the hex value in your code.

Effects

Shadows and blurs are displayed with their exact values, ready to copy as box-shadow or filter CSS properties.

Measuring Spacing

Hover over any element while holding Alt (Option on Mac) to see its distance from nearby elements. This reveals:

• Margin — Distance from the selected element's edge to the nearest sibling or parent edge.
• Padding — Distance from a parent frame's edge to its children (visible when you select the parent).
• Gap — In Auto Layout frames, the gap between children.

These measurements tell you exactly what values to use for margin, padding, and gap in CSS.

Dev Mode

Dev Mode is a dedicated view in Figma designed specifically for developers. To enable it, click the "Dev Mode" toggle in the toolbar (or press Shift+D).

In Dev Mode:

• Code panel — Shows generated CSS, iOS (SwiftUI), or Android (Compose) code for the selected element.
• Compare changes — See what changed between design versions, highlighted with visual diffs.
• Annotations — Designers can add implementation notes visible only in Dev Mode.
• Ready for dev — Designers mark sections as "Ready for dev" so you know which parts are finalized.

A typical Dev Mode CSS output for a button:

/* Figma Dev Mode output */
display: flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 8px;
background: #2563EB;
color: #FFF;
font-family: Inter;
font-size: 14px;
font-weight: 600;
line-height: 20px;

This is a starting point — you would then replace hardcoded values with your design tokens and clean up the output.

Exporting Assets

Figma handles asset export for icons, illustrations, and images:

Icons

Export icons as SVG for the sharpest rendering at any size. Select the icon, go to the Export section in the right panel, choose SVG, and download. For React projects, you can paste the SVG directly into a component:

function ChevronIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path
        ="M7.5 4.5L13 10L7.5 15.5"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

Using currentColor for stroke or fill lets the icon inherit the text color from its parent, making it easy to theme.

Images

Export photographs and complex graphics as PNG (for transparency) or JPG (for photos without transparency). Use 2x export for retina displays. Figma lets you set up multiple export presets (1x, 2x, 3x) simultaneously.

Batch Export

To export all icons at once, set up export settings on each icon's main component, then select all and use "Export Selected." This is far more efficient than exporting one at a time.

Plugins for Better Handoff

These plugins supplement — not replace — manual inspection. Generated code is a starting point that always needs human refinement for production quality.

Handoff Best Practices

1. Attend design walkthroughs — Do not just receive a Figma link. Have the designer walk you through the intended interactions, edge cases, and responsive behavior.
2. Ask about states — What happens on hover? What does the loading state look like? What about empty states and error states? If these are not designed, raise it before coding.
3. Use tokens, not values — When you see #2563EB, use var(--color-primary-600) in your CSS. This keeps code maintainable and in sync with design updates.
4. Build components, not pages — Start with the smallest components (buttons, inputs) and compose them into larger ones (forms, cards) and then into pages. This mirrors how the design was built.
5. Communicate implementation constraints — If a design choice is technically expensive (e.g., a complex animation, a layout that requires JavaScript), discuss alternatives early. Good designers appreciate this feedback.
6. Verify in browser — After implementation, compare your browser output against the Figma design. Zoom to 100% in both tools and check spacing, colors, and typography.