Handoff Tools (Zeplin/Avocode)

Install the Zeplin plugin (Plugins > Manage Plugins > search Zeplin). In Sketch, select the artboards to export and choose Plugins > Zeplin > Export Selected Artboards. Zeplin opens in the browser, creates a project, and populates it with the selected screens as versioned items. Future updates re-run the export — Zeplin adds a new version of each changed screen while preserving comment history. In Zeplin, screens appear in a left sidebar organised by Sections you define; developers click any screen to enter Inspect mode.

In Inspect mode, clicking any layer shows: dimensions and position relative to the artboard, fill colors with hex/RGB/HSL toggle, typography values (font, weight, size, line height, letter spacing), border and shadow values, and distances to other selected elements. Zeplin's distance measurement is richer than Sketch's native Option+hover — it shows distances to all four artboard edges simultaneously alongside sibling spacing, without requiring a click-and-hover interaction.

Select a layer in Zeplin and choose your target language from the code panel dropdown: CSS, SCSS, Swift (UIKit or SwiftUI), Kotlin Android XML, React Native StyleSheet, or Flutter. The snippets are starting points — extract the dimension, color, and typography values and adapt them to your component architecture. For text layers, Zeplin references the Text Style name in a comment alongside raw values, making the connection between design tokens and code explicit.

1/* Zeplin CSS output for a card component */
2.product-card {
3  width: 343px;
4  padding: 24px 16px;
5  border-radius: 12px;
6  background-color: #ffffff;
7  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
8}
9
10/* Heading/2 */
11.product-card-title {
12  font-family: 'Inter', sans-serif;
13  font-size: 20px;
14  font-weight: 600;
15  line-height: 28px;
16  letter-spacing: -0.01em;
17  color: #111827;
18}

Zeplin automatically extracts all Document Colors, Text Styles, and Symbols from your Sketch file and presents them in a project-level Styleguide tab. Developers see every color (with its name if you used Color Variables), every text style, and every component — no separate design specification document required. The Styleguide is always current because it updates on every Sketch sync. Link the Zeplin project URL in your README so any developer can access the living spec without asking the design team.

Avocode offers a desktop-app rendering model — it processes Sketch files locally rather than uploading to a cloud server. This makes it the preferred option for teams with data security requirements that prohibit uploading design files to third-party servers. Avocode also provides richer bulk asset export with format conversion (SVG, PNG, PDF, WebP in one pass) and a more configurable annotation system. For most teams Zeplin's web-first workflow and broader framework snippet support are decisive; choose Avocode specifically when cloud upload restrictions apply.

1Decision matrix:
2  Zeplin:   best for web-first teams, multi-platform snippets,
3            auto Styleguide, broad plugin ecosystem
4  Avocode:  best for security-restricted teams (local rendering),
5            bulk export workflows, configurable annotations
6  Sketch Cloud: best for small teams, zero setup, basic CSS only