Figma Developer Handoff
Developer handoff is the process of giving developers everything they need to build what you designed — exact measurements, colors, fonts, spacing values, and exportable assets. Figma eliminates the need for separate documentation tools by embedding all of this information directly in the design file.
What Developers Need from a Design File
Before looking at Figma's tools, understand what a developer actually needs:
Developer Requirements Diagram
FROM THE DESIGN DEVELOPER USES IT FOR +--------------------+ +---------------------------+ | Element dimensions | | Set width/height in CSS | | Colors (hex/rgba) | | background-color, color | | Font specs | | font-family, size, weight | | Spacing values | | padding, margin, gap | | Corner radius | | border-radius | | Shadow details | | box-shadow | | Image/icon files | | img src, icon assets | +--------------------+ +---------------------------+
Dev Mode
Dev Mode is Figma's dedicated developer view. Activate it by clicking the </> icon in the top toolbar. The canvas switches to a developer-focused interface with inspectable properties on every element.
What Developers See in Dev Mode
When a developer clicks any element on the canvas in Dev Mode:
- The element highlights with dimension labels
- The right panel shows all design properties (color, font, size, spacing)
- Code snippets appear in CSS, iOS Swift, or Android XML format
- A copy button appears next to each value for instant copying
Dev Mode Panel Example — Button
Developer clicks "Subscribe" button. Panel shows: INSPECT Width: 200px Height: 48px Border Radius: 24px Background: #3A86FF (Primary/Blue) Typography (Label): Font: Inter Size: 16px Weight: 600 Color: #FFFFFF Letter Spacing: 0.5px CSS OUTPUT ┌──────────────────────────────────────┐ │ background: #3A86FF; │ │ border-radius: 24px; │ │ padding: 12px 32px; │ │ font-family: 'Inter', sans-serif; │ │ font-size: 16px; │ │ font-weight: 600; │ │ color: #FFFFFF; │ └──────────────────────────────────────┘
Measuring Spacing Between Elements
Developers need to know the distance between elements for margin and padding values. In Dev Mode, hover over any element and hold Alt (Option on Mac) to see the distance from that element to the currently selected one, displayed as pink dimension lines.
Spacing Measurement Diagram
[Search Bar]
|------16px------|
[Filter Button]
Hover over Search Bar → Alt + hover over Filter Button → shows "16px"
Marking Designs as Ready for Development
In Dev Mode, you can mark individual frames with a Ready for Development status. This signals to developers which screens are finalized and approved for coding — and which are still a work in progress.
- In Dev Mode, select a frame.
- Click the Mark as Ready for Development button in the right panel.
- The frame gets a green badge, and developers see it highlighted in their Dev Mode view.
Exporting Assets for Developers
Icons, images, and illustrations need to be exported as files that developers add to their codebase.
Exporting Steps
- Select the layer or frame to export.
- In the Design Panel (or Dev Mode panel), scroll to the Export section.
- Click + to add an export setting.
- Choose the file format: SVG for icons and illustrations, PNG for photos and raster images, PDF for print assets.
- Set the scale: 1x, 2x, 3x (for different screen densities).
- Click Export [Layer Name] to download.
Asset Format Decision Guide
ASSET TYPE FORMAT REASON App icons SVG Scales to any size, editable in code Product photos PNG/JPG Raster images, fixed resolution Illustrations SVG Stays sharp on all screen sizes App store icon PNG 1x Specific requirements from stores Loading animations GIF/LOTTIE Animated format
Slices for Custom Export Areas
A slice defines a custom rectangular region of the canvas to export as an image — not tied to any specific layer.
- Press S to activate the Slice tool.
- Drag to draw a slice rectangle over the area you want to export.
- The slice appears as a dashed rectangle. Set export settings on it in the Design Panel.
Use slices to export a combination of overlapping elements (like a card with a shadow that extends beyond the card's frame) as one flat image.
Sharing the File with Developers
Click Share in the top-right corner. Set the link permission to Can View. Copy the link and send it to developers. They open the file in Dev Mode using their free Figma viewer account — no paid seat required.
Handoff Link Settings
Share settings: +--------------------------------+ | Anyone with link: Can View v | | [Copy Link] | +--------------------------------+ Developers get read + Dev Mode access They cannot edit the file
Preparing a File for Clean Handoff
A messy file forces developers to ask questions and slows down development. Follow this checklist before handing off:
Handoff-Ready Checklist
✓ All layers are named clearly (no "Rectangle 12") ✓ All colors use named Color Styles or Variables ✓ All text uses named Text Styles ✓ All effects use named Effect Styles ✓ Icons are SVG format and grouped logically ✓ Images have correct export settings added ✓ Frames marked as Ready for Development ✓ Prototype shows all interactive states ✓ Components cover all states (default, hover, disabled, error) ✓ Spacing uses consistent values (8px grid)
The 8-Point Grid System
Most design systems use an 8-point grid — all spacing values are multiples of 8 (8, 16, 24, 32, 40, 48, 64). Developers use multiples of 4 or 8 in their CSS because it creates consistent, proportional layouts across all screen sizes.
8-Point Grid Reference
VALUE USE CASE 4px Micro spacing (icon to label gap) 8px Tight padding (small buttons, chips) 16px Default padding (cards, inputs) 24px Section spacing 32px Large section gap 48px Major section break 64px Page-level vertical spacing
Annotations in Figma
Figma includes a native Annotation tool (in newer versions) that lets designers add labeled callouts directly on the canvas. Annotations explain things the design properties alone cannot convey — interactions, accessibility notes, or conditional display logic.
Access annotations from the toolbar: click the annotation icon and click any element to add a note. Developers see the annotations in Dev Mode alongside the design properties.