XD Integration with Zeplin and Avocode for Handoff

BEGINNER

Connect Adobe XD to Zeplin and Avocode for enhanced developer handoff — automatic redlines, component documentation, code snippets in multiple languages, and structured asset delivery beyond XD's built-in share links.

90 min

Tutorial 15 of 18

Learning Objectives

Install the Zeplin XD plugin and publish artboards from XD to a Zeplin project for enhanced developer access
Use Zeplin's measurement overlay and code generation to extract CSS, Swift, and Android XML values from published designs
Set up component documentation in Zeplin with implementation notes, variant descriptions, and usage guidelines
Compare Zeplin and Avocode feature sets and determine which tool is appropriate for a given team and project
Read a Zeplin design spec as a developer and identify all values needed to implement a component without asking the designer

Introduction

Zeplin and Avocode are developer-focused handoff tools that sit between the design file (XD, Figma, Sketch) and the development codebase. While XD's built-in share links provide basic inspection, Zeplin and Avocode add measurement redlines, multi-platform code generation, component documentation, and structured asset management that teams working on large projects find essential.

As a developer, working with Zeplin means accessing a structured representation of every design component with CSS (or Swift, or Android XML) values pre-calculated, assets pre-exported, and designer notes attached. As a designer-developer bridge, these tools reduce back-and-forth and make implementation faster.

This lesson covers using Zeplin with XD as the design source — from publishing artboards to reading complete component specifications.

Publishing from XD to Zeplin

Zeplin integrates with XD via a plugin that exports artboards to a Zeplin project directly from XD.

Setup workflow:

Create a Zeplin account (zeplin.io) and create a project
Choose platform: Web, macOS, iOS, Android (determines code generation output)
In XD: install the Zeplin plugin (Plugins menu → Discover Plugins → search 'Zeplin')
Connect Zeplin plugin to your account: Plugins → Zeplin → Connect
Select artboards to export
Plugins → Zeplin → Export Selected → choose the target project
Artboards appear in Zeplin with all layers, measurements, and assets

What Zeplin imports from XD:

All artboard layers and their visual properties
Layer hierarchy (mirrors XD layers panel)
All named colors (from XD's document assets)
All character styles (from XD's document assets)
All components (as reusable sections in Zeplin)
Assets marked for export in XD

Zeplin project settings that affect developer experience:

Density: @1x, @2x, @3x (affects measurement units)
Unit: px, rem, dp (Android), pt (iOS)
Code generation: CSS, Swift, SwiftUI, Kotlin, Flutter, React Native

For web projects:

Density: @2x (treats the artboard as 2x, so all values are divided by 2 for CSS)
Unit: rem (Zeplin generates rem values automatically)
Code: CSS

Updating Zeplin after design changes:

In XD: select updated artboards
Plugins → Zeplin → Export Selected (overwrites existing artboards in Zeplin)
Zeplin shows a diff indicator on updated screens
Developers see a 'Last Updated' timestamp on each screen
Comment threads remain attached to screens even after updates

Reading Design Specs in Zeplin

Zeplin's developer interface provides measurement overlays, spacing guides, and code generation that exceed XD's built-in inspect capability.

Zeplin interface layout:

Canvas: artboard view (click any element to see properties)
Left panel: screen list, component list, styleguide
Right panel: selected element properties + code
Toolbar: zoom, comment mode, export, diff mode

Measurement system in Zeplin:

Click any element → right panel shows all properties
Hover between elements → red measurement lines show spacing
Hold Shift + hover → shows spacing from clicked element to all four sides of canvas
Click element A → then hover element B → shows distance between A and B

Right panel sections:

Code panel (the most valuable for developers):

Shows CSS code for the selected element (or Swift, Kotlin, etc. based on project settings)
Includes all properties: position, size, color, font, border, shadow
Copy individual properties or the entire block
Values automatically converted to rem (if configured)

Colors panel:

Shows all colors used in the design with hex values
Highlights which design system colors are used vs one-off colors

Fonts panel:

Lists all typefaces, sizes, weights used in the selected component

Assets panel:

All marked-for-export assets available for download
Choose format (SVG, PNG@1x, PNG@2x, etc.) and download

Zeplin CSS generation example:

CSS

1/* Zeplin-generated CSS for a course card title */
2.title {
3  font-family: 'Inter', sans-serif;
4  font-size: 18px;       /* Zeplin shows px — convert to rem: 1.125rem */
5  font-weight: 600;
6  font-style: normal;
7  line-height: 1.44;     /* Zeplin shows unitless line-height */
8  color: #111827;
9  letter-spacing: normal;
10}
11
12/* Developer-corrected version */
13.course-card__title {
14  font-family: 'Inter', system-ui, -apple-system, sans-serif;
15  font-size: 1.125rem;   /* converted from 18px */
16  font-weight: 600;
17  line-height: 1.44;     /* already unitless in Zeplin — good */
18  color: #111827;
19  display: -webkit-box;
20  -webkit-line-clamp: 2;
21  -webkit-box-orient: vertical;
22  overflow: hidden;
23}

Component Documentation in Zeplin

Zeplin allows designers and developers to add documentation to individual components — usage guidelines, implementation notes, variant descriptions, and links to related resources.

Adding documentation in Zeplin:

Open a component in Zeplin
Click the 'Documentation' tab in the right panel
Add markdown-formatted notes
Attach links to Storybook stories, GitHub files, or implementation guides
Save — documentation persists for all team members

Component documentation template (for design → code alignment):

MARKDOWN

1## Button - Primary
2
3**React Component**: `<Button variant="primary">`
4**Storybook**: [Button Stories](https://storybook.devbootstrap.com/button)
5**GitHub**: `src/components/ui/Button.tsx`
6
7### States
8| State    | CSS Selector           | Visual           |
9|----------|------------------------|------------------|
10| Default  | .btn-primary           | Blue bg, white text |
11| Hover    | .btn-primary:hover     | Darker blue, shadow |
12| Focus    | .btn-primary:focus-visible | Blue outline ring |
13| Active   | .btn-primary:active    | Darker blue, scale 0.98 |
14| Disabled | .btn-primary:disabled  | Gray bg, muted text |
15
16### Usage
17- Use for primary actions (one per view)
18- DO NOT use for destructive actions — use Danger variant instead
19- Minimum width: 80px
20
21### Accessibility
22- Always include text label (no icon-only primary buttons)
23- Use `aria-busy="true"` during loading state
24- Use native `<button>` — never `<div>` or `<a>` for action buttons
25
26### Notes for developers
27- Transition: 150ms ease on all properties
28- Shadow on hover: box-shadow: 0 4px 16px rgb(37 99 235 / 0.25)
29- The loading state hides the label (color: transparent) and shows a spinner

Zeplin Connected Components (linking Zeplin to Storybook):

Zeplin CLI: npm install -g @zeplin/cli
Create zeplin.json in project root:

JSON

1   {
2     "projects": ["your-project-id"],
3     "components": [
4       {
5         "path": "src/components/Button.tsx",
6         "zeplinNames": ["Button / Primary", "Button / Secondary"]
7       }
8     ]
9   }

Run zeplin connect to link Zeplin components to source files
Developers clicking a component in Zeplin see a link to the implementation file
Storybook integration: Zeplin shows a 'Storybook' tab alongside the design

Zeplin vs Avocode: Choosing the Right Handoff Tool

Both Zeplin and Avocode serve the same purpose (design-to-code handoff) but have different strengths. The choice depends on team size, XD usage, and whether you need cross-platform code generation.

Feature comparison:

Text

1Feature                  Zeplin              Avocode
2XD integration           Plugin              Plugin
3Figma integration        Yes                 Yes
4Sketch integration       Yes                 No (discontinued)
5CSS code generation      Yes                 Yes
6Swift/iOS code           Yes                 Yes
7Android XML              Yes                 Yes
8Flutter code             Yes                 No
9React Native code        Yes                 No
10Component docs           Yes (markdown)      Basic notes
11Connected components     Yes (Storybook)     No
12Design diff              Yes                 Yes
13Version history          Yes                 Yes
14Free tier                1 project, 1 user  Limited
15Team pricing             Per seat            Per seat
16Active development       Yes                 Limited (acquired by Kitemaker)

When to use Zeplin:

Cross-platform projects (iOS + Android + Web from same XD design)
Teams that need component documentation and Storybook integration
Larger teams needing organized project structure
Teams building design systems with multiple component libraries

When to use Avocode:

Smaller teams on web-only projects
Teams already using Avocode and comfortable with its workflow
Projects that need quick setup without configuration

Current recommendation (2026):

With XD discontinued and Avocode under limited development, neither is ideal for new projects starting fresh. For XD-based teams finishing existing projects, Zeplin is the more actively maintained option. For new projects, Figma's built-in Dev Mode with Figma design specs provides equivalent capability without additional tooling.

Alternative handoff workflows without Zeplin/Avocode:

Figma Dev Mode (built-in, free for developers)
Storybook with Chromatic (visual review + component docs)
Linear or Jira design attachment (attach XD links to tickets)

Reading a Complete Component Spec from Zeplin

Using Zeplin to extract all measurements, colors, typography, and states for a lesson item component and implementing it in CSS without additional designer input.

Example CodeYAML

1/*
2Zeplin spec for 'Lesson Item' component:
3
4General:
5  Screen: 'Course Detail - Desktop'
6  Component: 'Lesson Item / Default'
7  H: 64px, W: full-width
8  Background: #FFFFFF (transparent on parent bg)
9  Border-bottom: 1px solid #E5E7EB
10  Padding: 0 16px (from Zeplin spacing measurement)
11
12Lesson Number Badge:
13  W:24 H:24, radius:50%, bg:#EFF6FF, text:#2563EB
14  Font: Inter 13px/500
15
16Lesson Title:
17  Font: Inter 15px/500/#374151, line-height:1.47
18  Truncate at 1 line
19  Flex:1
20
21Duration Label:
22  Font: Inter 13px/400/#6B7280
23  White-space: nowrap
24
25Progress Icon:
26  24x24 SVG, color:#16A34A (complete), #6B7280 (incomplete)
27
28Hover state:
29  Background: #F9FAFB
30  (from prototype: 150ms ease transition)
31
32Active/Playing state:
33  Background: #EFF6FF
34  Lesson title color: #2563EB
35  Number badge bg: #DBEAFE
36  Left border: 3px solid #2563EB
37*/
38
39/* CSS implementation from Zeplin spec */
40
41.lesson-item {
42  display: flex;
43  align-items: center;
44  gap: 0.75rem;           /* 12px measured in Zeplin */
45  height: 4rem;           /* 64px from Zeplin */
46  padding: 0 1rem;        /* 0 16px from Zeplin */
47  border-bottom: 1px solid #e5e7eb;
48  background-color: transparent;
49  cursor: pointer;
50  text-decoration: none;
51  color: inherit;
52
53  /* Transition from prototype notes in Zeplin */
54  transition:
55    background-color 150ms ease,
56    border-left-color 150ms ease;
57
58  /* Active state left border (3px) — use box-shadow to avoid layout shift */
59  box-shadow: inset 3px 0 0 transparent;
60}
61
62/* Hover state */
63.lesson-item:hover {
64  background-color: #f9fafb;   /* Zeplin hover state */
65}
66
67/* Active/playing state */
68.lesson-item[data-active="true"] {
69  background-color: #eff6ff;   /* Zeplin active state */
70  box-shadow: inset 3px 0 0 #2563eb;  /* left border without layout shift */
71}
72
73/* Number badge */
74.lesson-item__number {
75  display: flex;
76  align-items: center;
77  justify-content: center;
78  width: 1.5rem;      /* 24px */
79  height: 1.5rem;
80  border-radius: 50%;
81  background-color: #eff6ff;   /* Zeplin: blue-50 */
82  color: #2563eb;              /* Zeplin: blue-600 */
83  font-size: 0.8125rem;        /* 13px */
84  font-weight: 500;
85  flex-shrink: 0;
86}
87
88.lesson-item[data-active="true"] .lesson-item__number {
89  background-color: #dbeafe;  /* Zeplin active: blue-100 */
90}
91
92/* Title */
93.lesson-item__title {
94  font-size: 0.9375rem;    /* 15px */
95  font-weight: 500;
96  color: #374151;           /* Zeplin default */
97  line-height: 1.47;
98  flex: 1;
99  min-width: 0;
100  white-space: nowrap;
101  overflow: hidden;
102  text-overflow: ellipsis;
103}
104
105.lesson-item[data-active="true"] .lesson-item__title {
106  color: #2563eb;           /* Zeplin active */
107  font-weight: 600;
108}
109
110/* Duration */
111.lesson-item__duration {
112  font-size: 0.8125rem;    /* 13px */
113  font-weight: 400;
114  color: #6b7280;          /* Zeplin: neutral-500 */
115  white-space: nowrap;
116  flex-shrink: 0;
117}
118
119/* Progress icon */
120.lesson-item__status {
121  width: 1.5rem;    /* 24px */
122  height: 1.5rem;
123  color: #6b7280;   /* Zeplin incomplete state */
124  flex-shrink: 0;
125}
126
127.lesson-item[data-complete="true"] .lesson-item__status {
128  color: #16a34a;   /* Zeplin complete: green-600 */
129}

How It Works

Every CSS value comes from the Zeplin spec: height 64px → 4rem, padding 0 16px → 0 1rem, all font sizes converted to rem, all colors used directly from Zeplin's hex display. The box-shadow: inset 3px 0 0 #2563eb technique for the left border avoids a layout shift that would occur if border-left-width changed from 0 to 3px — the box-shadow version adds the visual border without affecting element width. The 150ms ease transition came from the prototype notes left by the designer as a documentation comment in Zeplin.

Key Takeaways

Zeplin publishes XD artboards via plugin and provides measurement overlays, multi-platform code generation (CSS/Swift/Kotlin), and component documentation in one structured interface
Zeplin Connected Components links design components to source code files and Storybook stories — developers clicking a component in Zeplin see a direct link to the implementation
Zeplin generates unitless line-height values (unlike XD's Inspect which shows absolute pixels) — this is one of the key advantages of Zeplin's code generation over XD's built-in CSS
For new projects in 2026, Figma Dev Mode provides equivalent functionality built-in and free for developers — Zeplin adds value for cross-platform teams and teams needing structured component documentation
Use the box-shadow: inset technique for border animations — changing border-left-width from 0 to 3px causes layout shift, but box-shadow: inset 3px 0 0 transparent to inset 3px 0 0 color does not

What's Next?

The next lesson covers XD post-discontinuation migration strategies — moving existing XD files and workflows to Figma, preserving design history, and maintaining continuity for development teams during the transition.

Your progress is saved in this browser, on this device only.

Previous: Developer Specifications and CSS Code Generation in XD

Next: XD vs Figma: Developer Perspective and Migration Guide

UI/UX Design