Chapter 6 › Lesson 36

36. Developer Handoff Basics

Skills: Open Inspect panel (right sidebar); Read spacing, sizing, colour, typography values; Copy CSS, iOS, or Android code snippets; Add comments for developers in prototype; Share prototype link with view-only access

The Inspect panel is a developer's best friend in Figma. It shows exact spacing, sizing, colours, typography, and exports CSS/ iOS/ Android code automatically. You'll learn how to prepare designs for smooth handoff.

36. Developer Handoff Basics
Figure: The Inspect panel showing element properties (width, fill, border radius, font, padding) and auto-generated CSS code.

Step-by-step

  1. Select a frame or component in your design that you'd like to hand off
  2. Open the Inspect panel on the right side of the screen (the icon in the upper-right toolbar)
  3. Inspect shows all properties: dimensions, colour fills, strokes, shadows, border radius, padding, gap, and typography
  4. Click the CSS tab at the bottom of Inspect — Figma generates CSS code automatically
  5. Copy the CSS and paste it into your code editor — colours become hex, spacing becomes px, typography becomes font declarations
  6. Switch to iOS or Android tabs to see platform-specific code (SwiftUI, UIKit, XML, Jetpack Compose)
  7. In Prototype mode, you can add comments to specific elements for developers — right-click an element and choose "Add comment"
  8. Share a prototype link with view-only access — click the Share button in the top-right, set to "Anyone with the link can view", copy the link
  9. Clean up your layers before handoff: rename layers meaningfully, remove unused elements, group logically
  10. Best practice: create a dedicated "Handoff" page in your Figma file with all ready-for-dev screens arranged clearly

Pro tip

The Inspect panel only shows detailed information for components and frames. Basic shapes show fewer details. For best results, build your UI with components, auto layout, and text styles — Inspect reads all of these automatically.