Chapter 6 › Lesson 36

36. Design-Dev Collaboration

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. Rather than a one-time "handoff" at the end, the goal is to make design specs available to developers continuously — so they can reference your work at any point, ask questions as they go, and give feedback that improves the design before it's final.

36. Design-Dev Collaboration
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 share with developers for implementation
  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 — right-click an element and choose "Add comment". This is great for asking questions, flagging uncertainties, or noting implementation details as you go
  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. Share this early so developers can follow along as the design evolves
  9. Keep your layers organized as you work: rename layers meaningfully, remove unused elements, group logically. This way developers can check in at any time without confusion
  10. Best practice: create a dedicated page in your Figma file where developers can reference both in-progress and ready-to-build 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.

Collaboration, not handoff

The idea of a one-time "handoff" can create distance between design and development. A better approach is continuous collaboration: share your work early, invite feedback, and keep specs available throughout the process. Developers can spot feasibility issues early, designers can adjust based on real implementation constraints, and the final product is stronger as a result. Figma's Inspect panel, comments, and shared prototypes all support this ongoing conversation.