TLDR
Zeplin is a specialized design handoff platform that bridges the gap between designers and developers by providing a dedicated environment for spec inspection, asset export, and version control. Unlike all-in-one design tools, Zeplin focuses exclusively on the handoff phase, offering cleaner interfaces, better collaboration features for distributed teams, and robust integrations with developer workflows.
Key takeaways:
- Zeplin imports designs from Figma, Sketch, and Adobe XD while maintaining strict version control
- Developers get clean spec inspection without navigating complex design files
- Native integrations with VS Code, Jira, and Storybook streamline implementation workflows
- Export design tokens as JSON for use in Style Dictionary or CSS-in-JS systems
- Best suited for teams that need clear separation between design exploration and production handoff
What is Zeplin?
Zeplin is a purpose-built design handoff tool that sits between design software and code. While tools like Figma combine design creation and developer handoff in one platform, Zeplin focuses exclusively on the handoff phase. Designers publish completed artboards from Figma, Sketch, or Adobe XD to Zeplin, where developers can inspect specifications, export assets, and leave implementation feedback—all without touching the original design files.
Design handoff tools are specialized platforms that provide developers with measurements, colors, typography, and asset exports from design mockups. They solve the "how do I build this?" question by translating visual designs into implementation-ready specifications.
The core philosophy is separation of concerns: designers work in tools optimized for creation, while developers work in tools optimized for implementation. This prevents developers from accidentally modifying design files, reduces cognitive load by hiding design-specific features, and creates a clear "published" state that signals "this design is ready for implementation."
Zeplin organizes designs into projects and screens. Each screen represents a single artboard or frame from the design tool. Developers can click any element to see CSS properties, measure distances between elements, and download assets in multiple formats. The interface is intentionally minimal—no layers panel, no design tools, just the specs needed to build.
Why Use Zeplin Over Figma Dev Mode?
Figma's built-in handoff capabilities have improved significantly with Dev Mode, so why would a team choose a separate tool? The answer comes down to team structure, workflow needs, and the level of control required over the handoff process.
Strict version control is Zeplin's biggest advantage. When a designer publishes to Zeplin, that version is frozen. Developers see exactly what was approved, even if the designer continues iterating in Figma. This prevents the common problem of "wait, the design changed again?" during implementation. Figma Dev Mode shows the current state of the design file, which can change at any moment.
Distributed team workflow is where Zeplin shines. For teams working across time zones or with external contractors, having a clear "published" state creates checkpoints. Designers publish when ready, developers receive notifications, and everyone knows which version is the source of truth. There's no ambiguity about whether a design is "final" or still being explored.
Cleaner developer experience matters for teams where developers don't need to see the full design file. Zeplin removes all the design-specific UI: no artboard navigation, no layers panel, no prototyping controls. Just the screen, the specs, and the assets. This reduces cognitive load and makes it faster to jump between screens during implementation.
Better project management integration connects handoff to implementation tracking. Zeplin's Jira integration allows you to link designs directly to development tickets. When a developer starts a ticket, they can jump straight to the relevant screen in Zeplin. Status updates flow back to Zeplin, showing which designs are in progress or complete.
That said, Zeplin is not always the right choice. Small teams or solo developers often prefer keeping everything in Figma to reduce tool sprawl. Real-time collaboration is smoother in Figma where designers and developers can annotate directly on the design file. And Figma's component documentation features (variant properties, descriptions) are more comprehensive than Zeplin's component view.
Setting Up the Zeplin + Figma Workflow
The most common Zeplin workflow starts with designs in Figma. Here's the complete setup process from installation to first handoff.
Step 1: Install the Figma Plugin
In Figma, go to Plugins → Browse plugins and search for "Zeplin." Install the official Zeplin plugin. The plugin adds a publish command to Figma's right-click menu and allows you to configure which Zeplin projects receive updates.
Step 2: Create a Zeplin Project
In Zeplin, create a new project and select the platform type (Web, iOS, Android, or macOS). The platform choice affects how measurements are displayed—web shows pixels and CSS, iOS shows points and UIKit properties, Android shows dp and XML attributes.
Invite your team members with appropriate roles: Editors can publish designs and modify project settings, while Viewers (developers) can only inspect and comment. This role separation prevents accidental modifications while keeping costs low for large development teams.
Step 3: Publish from Figma
Select the frames you want to publish in Figma. Right-click and choose Plugins → Zeplin → Publish. The plugin will ask which Zeplin project to publish to. Select your project and click Publish.
The first publish creates new screens in Zeplin. Subsequent publishes to the same frames create new versions, preserving the history. You can always revert to previous versions if needed.
Step 4: Inspect Specs in Zeplin
Developers receive a notification when new screens are published. Open Zeplin, navigate to the project, and click any screen to enter inspection mode. Click elements to see their properties, or hold Option/Alt while hovering to measure distances between elements.
The right panel shows extracted CSS, including colors, typography, shadows, and borders. You can toggle between CSS, SCSS, Less, Sass, and Stylus output formats. For mobile platforms, the panel shows Swift (iOS) or Kotlin/XML (Android) equivalents.
Step 5: Export Assets
Click any image or icon in Zeplin to see export options. Zeplin automatically generates multiple resolutions (1x, 2x, 3x for mobile; standard and retina for web). SVG assets are available in their original vector format with embedded styles converted to inline attributes.
Zeplin also supports tagged assets, where designers can mark specific layers in Figma as exportable before publishing. This ensures developers get exactly the assets they need without having to request them separately.
Developer Integrations
Zeplin's ecosystem extends beyond the web interface with integrations that bring design specs directly into developer workflows.
VS Code Extension
The Zeplin VS Code extension allows developers to inspect design specs without leaving their code editor. Install it from the VS Code marketplace, connect your Zeplin account, and access your projects through the sidebar.
While editing CSS or component code, you can search for screens, view specs side-by-side with your code, and copy CSS values directly into your stylesheets. This eliminates constant tab-switching between browser and editor.
Jira Integration
Connect Zeplin to Jira to link designs with development tickets. In Zeplin, click the three-dot menu on any screen and select Connect to Jira issue. Paste the Jira ticket URL, and Zeplin creates a bidirectional link.
Developers viewing the Jira ticket see a preview of the design with a link to open it in Zeplin. In Zeplin, the screen shows its implementation status based on the ticket's workflow state (To Do, In Progress, Done).
Storybook Integration
For teams using Storybook for component documentation, Zeplin's Storybook integration creates connections between design screens and component stories. Add the Zeplin extension to your Storybook configuration:
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
addons: [
'@storybook/addon-essentials',
'@storybook/addon-zeplin'
],
// ... other config
};
export default config;Then annotate your component stories with Zeplin screen IDs:
// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'Components/Button',
component: Button,
parameters: {
zeplinLink: {
project: '5d5e7b2e0e7e3b0016d8f3a1',
screen: '5d5e7b2e0e7e3b0016d8f3a2'
}
}
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: { variant: 'primary', children: 'Click me' }
};The Storybook UI will display a link to the Zeplin screen, making it easy for developers to reference the design while building components.
Code Example: Extracting Styles from Zeplin
Zeplin generates CSS output for every element, but converting these styles to modern design systems often requires translation. Here's a practical example of taking Zeplin's CSS output and converting it to Tailwind CSS utility classes.
Zeplin's Generated CSS
When you select a button component in Zeplin, you might see CSS output like this:
/* Zeplin's extracted CSS */
.primary-button {
background-color: #3b82f6;
border-radius: 8px;
padding: 12px 24px;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #ffffff;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.primary-button:hover {
background-color: #2563eb;
}Converting to Tailwind Utilities
Rather than using this CSS directly, most modern projects use utility-first frameworks. Here's the equivalent Tailwind implementation:
// Button component using Tailwind (converted from Zeplin specs)
export function Button({ children, onClick }: ButtonProps) {
return (
<button
onClick={onClick}
className="
bg-blue-500 hover:bg-blue-600
rounded-lg
px-6 py-3
font-semibold text-base leading-6
text-white
border-0
cursor-pointer
transition-colors duration-200
"
>
{children}
</button>
);
}The conversion process:
background-color: #3b82f6→bg-blue-500(Tailwind's blue-500 is #3b82f6)border-radius: 8px→rounded-lg(Tailwind's lg is 8px)padding: 12px 24px→px-6 py-3(Tailwind spacing scale: 6 = 24px, 3 = 12px)font-weight: 600→font-semiboldtransition→transition-colors duration-200
Creating a Tailwind Config from Zeplin Tokens
If your Zeplin project uses custom colors that don't match Tailwind's defaults, extract the color tokens and add them to your Tailwind configuration:
// tailwind.config.ts - extending with Zeplin's brand colors
import type { Config } from 'tailwindcss';
const config: Config = {
theme: {
extend: {
colors: {
// Colors extracted from Zeplin style guide
brand: {
primary: '#3b82f6',
primaryHover: '#2563eb',
secondary: '#8b5cf6',
accent: '#f59e0b',
},
neutral: {
50: '#f9fafb',
100: '#f3f4f6',
700: '#374151',
900: '#111827',
}
}
}
}
};
export default config;Now you can use bg-brand-primary instead of hard-coding hex values, maintaining consistency with Zeplin's specifications while leveraging Tailwind's utility system.
Exporting Design Tokens from Zeplin
Beyond CSS output for individual elements, Zeplin allows you to export design tokens from the project's style guide. This is critical for teams building cross-platform design systems or using tools like Style Dictionary.
Accessing the Style Guide
Every Zeplin project has a Styleguide tab that collects all colors, text styles, and spacing values used across published screens. Zeplin automatically extracts these from your designs and groups them by type.
For colors, Zeplin shows the hex value, usage count (how many screens use this color), and the ability to add semantic names. Instead of "Blue #3b82f6", you can rename it to "Primary" or "Interactive".
Exporting as JSON
Zeplin supports exporting style guides as JSON, which can be consumed by Style Dictionary or custom build scripts. The JSON format follows a predictable structure:
{
"colors": [
{
"name": "Primary",
"value": "#3b82f6",
"category": "Brand"
},
{
"name": "Primary Hover",
"value": "#2563eb",
"category": "Brand"
}
],
"textStyles": [
{
"name": "Heading Large",
"fontFamily": "Inter",
"fontSize": 32,
"fontWeight": 600,
"lineHeight": 40,
"letterSpacing": -0.5
}
],
"spacing": [
{
"name": "xs",
"value": 4
},
{
"name": "sm",
"value": 8
},
{
"name": "md",
"value": 16
}
]
}This JSON can be transformed into CSS custom properties, SCSS variables, or design tokens in JSON format for cross-platform consumption. The standardized export makes it easy to automate the flow from Zeplin to production code, reducing manual copying and the risk of inconsistencies.
Automating Token Updates
For teams practicing continuous design system updates, combine Zeplin's API with CI/CD pipelines to automatically pull style guide changes. When designers update colors or typography in Figma and republish to Zeplin, a webhook triggers a build that regenerates token files and opens a pull request with the changes.
This level of automation ensures design and code never drift apart, and developers always work with the latest approved design decisions.
FAQ
Q: How much does Zeplin cost compared to Figma Dev Mode?
A: Zeplin starts at $8 per seat per month, while Figma Dev Mode is free with unlimited viewer seats but requires $12/month for each editor seat. For teams with many developers and few designers, Zeplin's per-seat pricing can be more economical since all developers need access but not all need design editing capabilities.
Q: Can Zeplin integrate with Figma for design sync?
A: Yes. Zeplin offers a native Figma plugin that allows designers to publish artboards directly from Figma to Zeplin. The plugin maintains version history and automatically updates specs when designs change. This workflow keeps design files in Figma while providing developers with a dedicated handoff interface in Zeplin.
Q: When should I use Zeplin instead of Figma Dev Mode?
A: Use Zeplin when you need strict version control for distributed teams, a cleaner developer-only interface without design clutter, or better integration with project management tools like Jira. Figma Dev Mode works well for small co-located teams who prefer keeping everything in one tool, but Zeplin excels at separating design exploration from production handoff.