27

    Preparing Designs for Developer Handoff

    By Nitin Khatri (Senior UI/UX Designer & Educator)
    Reviewed by Sarah Miller (Principal Product Designer (Reviewer))
    Updated
    Video Lesson: 12:00
    Level: Advanced
    Official References:
    Figma Help CenterFigma YouTube Channel

    The design is only as good as the final product. This lesson teaches you how to prepare your Figma files so developers can build them with precision and ease.

    Complete tasks and quiz to finish this lesson.
    Tasks
    Quiz

    Lesson Video

    Lesson Content

    Learning Objectives

    • •Navigate Figma Dev Mode to inspect properties and dimensions
    • •Prepare assets for export in multiple formats (PNG, SVG, PDF)
    • •Document design tokens, transitions, and component behaviors
    • •Organize 'Ready for Dev' pages and sections for clear communication

    What You'll Learn

    1. Introduction to Dev Mode and its inspection tools
    2. Setting up export presets for icons and images
    3. Using the 'Link to Dev' plugin and documentation best practices
    4. Closing the gap between design and production code

    Key Concepts

    Dev Mode
    Handoff Workflow
    Asset Exporting
    Technical Documentation

    Key Takeaways

    • ✓A clean handoff prevents misunderstandings and design debt.
    • ✓Dev Mode allows engineers to see CSS, SwiftUI, or Compose properties directly.
    • ✓Explicitly marking designs as 'Ready for Dev' helps manage project status.
    • ✓Good communication with your developers is as important as the design itself.

    Practice Tasks

    Handoff Documentation

    Document your designs for seamless implementation by development teams.

    • Create a 'Handoff' page with clear flow annotations
    • Add spacing markers to show gaps between major sections
    • Document transition durations and easing for prototypes
    • Mark specific frames/sections as 'Ready for Dev' using the Status feature

    Asset Export Workflow

    Set up export presets for all visual assets required by dev teams.

    • Select a folder of icons and add an 'Export' preset for SVG
    • Select a hero image and add export presets for 1x and 2x PNG
    • Preview the export to ensure transparent backgrounds are preserved
    • Verify that all export layers are named correctly for code usage

    Knowledge Check

    Pass with 75% or higher

    1. What is the primary purpose of Figma's 'Dev Mode'?

    2. Which export format is typically preferred for icons due to its scalability and small file size?

    3. When preparing for handoff, what does marking a section as 'Ready for Dev' achieve?

    4. What are 'Export Presets' in Figma?

    Lesson FAQ

    Q: How can I practice what I learned in this lesson?

    We highly recommend opening your own Figma workspace in a side window and repeating the steps shown in the video. Utilize the tasks checklist above for specific practice targets.

    Q: What should I do if my layout behaves differently from the walkthrough?

    Double-check parent-child constraints and resizing values (e.g. Hug vs Fill). Ensure Auto Layout direction is correct and check the related guidebooks below for step-by-step visual references.

    Lesson Resources & Connections

    Prerequisites

    No prerequisites required. This is a foundational starter lesson.

    Related Guidebook

    How to align and distribute elements accurately in Figma

    Read Guidebook →

    How to export assets from Figma for developers

    Read Guidebook →

    Relevant Design Tool

    Image Compressor

    Reduce asset size before export.

    Open Companion Tool →

    Next Lesson

    Using Plugins and Extensions to Customize Your Workflow