Master new skills with our 21-day learning paths, broken into easy 5-minute daily lessons.

Start your journey for free.

design Intermediate 21 lessons

Design Handoff (Zeplin)

Bridge the gap between design and code. Master specs, asset export, and communication using Zeplin and Figma Dev Mode.

The hardest part of design is getting it built correctly. This course teaches the technical side of Design Handoff. You will learn to prepare files in Figma, annotate behavior and spacing, and use Zeplin or Figma Dev Mode to generate CSS/Swift/XML snippets. Master asset export workflow (SVG, PNG, PDF) for different platforms. We cover version control for design and how to communicate effectively with engineers to reduce 'pixel pushback'.

✅ 100% Free & Lifetime Access
⏱️ 5-Minute Lessons (Bite-sized learning)
🚀 21-Lesson Path (Independent modules)
📱 Mobile Friendly (Learn anywhere)
Prod Design
Start Learning
Secure Enrollment via SSL

Complete Course Syllabus

  • 1
    File Hygiene
    Naming layers and cleaning up for developers.
  • 2
    Zeplin Workflow
    Pushing frames and organizing screens by flow.
  • 3
    Asset Export
    Slicing, varying scales (@2x, @3x), and formats.
  • 4
    Specs & Tokens
    Connecting design tokens to code variables.
  • 5
    Communication
    Handling QA feedback and design QA reviews.

Estimated completion time: 21 lessons • Self-paced learning • Lifetime access

Career Outlook

Estimated Salary
N/A

Career Paths

Product Designer $95k-$145k
UI Engineer $100k-$150k

What You Will Learn

Prepare clean design files ready for engineering handoff
Generate accurate code snippets using Zeplin/Dev Mode
Export assets correctly for Web, iOS, and Android
Annotate interaction behaviors and responsive rules
Communicate effectively with developers to solve feasibility issues

Skills You Will Gain

Developer Handoff Redlining Asset Export Zeplin Figma Dev Mode

Who Is This For

UI Designers
Product Designers
Frontend Devs

Prerequisites

UI Design
Figma

Design Handoff (Zeplin) FAQs

Figma Dev Mode?

We cover both Zeplin and Figma native features.

Coding?

No, but understanding CSS box model helps.

Why Zeplin?

Many legacy and enterprise teams still rely on it.

Soft skills?

Yes, empathy for developers is key.

Need more info?
All Reork courses are 100% free, self-paced, and fully accessible on mobile devices. No prior experience is required. Read our full Platform FAQ.

Tech Stack & Tools

Zeplin
Figma
Jira
Slack

Recommended Next Steps

UI Motion Design

design Intermediate

Bring interfaces to life. Master Smart Animate in Figma, easing curves, and micro-interactions to improve usability and delight.

Protopie Interaction

design Intermediate

Create advanced interactions without code. Master cross-device triggers, voice commands, and variables in Protopie.

Iconography & Symbols

design Beginner

Create custom icon sets. Master grids, metaphors, vector pathfinder operations, and SVG export for pixel-perfect systems.

Start Learning