Master New Skills with 5-Minute Bite-Sized Learning Modules

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

Protopie Interaction

design Intermediate

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

Design Ops Fundamentals

design Advanced

Scale design teams effectively. Manage tooling, hiring pipelines, team workflows, and cross-functional collaboration processes.

3D Web Design (Spline)

design Beginner

Create immersive 3D experiences for the web. Master Spline to model, animate, and export interactive 3D scenes without coding.

Your Next Steps

3 recommended paths based on what you're learning

Currently studying: Design Handoff (Zeplin)
Go Deeper

UX Strategist

Your Design Handoff (Zeplin) skills unlock something bigger: UX Strategy. Here's the path.

About 5 minutes
UX Strategy Course
Level up your skills — just 5 minutes
Hidden Gem

Frontend Development

Frontend Development pairs surprisingly well with Design Handoff (Zeplin). Most people overlook this combo.

About 5 minutes
Frontend Development for Design Handoff (Zeplin) Learners
Learn this bonus skill — quick 5-min intro
Speed Hack

Relume + AI

Work faster, not harder. Relume + AI was built to generate entire website wireframes.

About 5 minutes
AI Website Design
Work smarter, not harder — try this AI tool
Start Learning