Loading...
Loading...
Use Dev Mode to hand off designs with code snippets, measurements, and assets for developers.
Toggle Dev Mode: Click the '</>' icon in the top toolbar (or press Shift+D). The interface changes to show code-focused tools. Developers can also access this without a Figma account via share link.
Share the file with developers: Click the 'Share' button (top-right), set permission to 'Can view', and copy the link. Developers can inspect without editing permissions.
Inspect elements: Click any element in Dev Mode. The right panel shows CSS, iOS (SwiftUI), or Android (Compose) code snippets. Developers can copy-paste directly into their codebase.
Check measurements: Hover over elements to see spacing, padding, and dimensions. Click between two elements to see the exact distance. This eliminates guesswork for developers.
Download assets: Developers can select images, icons, or vectors and click 'Export' to download them in SVG, PNG, JPG, or PDF formats. They can choose 1x, 2x, or 3x resolutions.
View variables and styles: In Dev Mode, developers can see all design tokens (colors, typography, spacing variables) with their values. This helps them set up the design system in code.
Add comments for developers: Use the Comment tool (C) to leave notes on specific elements. Tag developers with @name to notify them. Explain interactions, edge cases, or animation details that code can't show.