With Zeplin, you will handoff more than specs
An organized workspace to publish designs, where the entire team can collaborate to ship beautiful products together.
Finalized designs, tailored specs
Never ask if the design is final ever again and get specs, assets and code snippets —tailored by platform. No more getting lost in design files.
Specs
Assets
Colors
Text styles
.button {
width: 142px;
height: 40px;
border-radius: 20px;
background-color: var(--
tiffany-blue);
}.button
width: 142px
height: 40px
border-radius: 20px
background-color: $tiffany-blue.button {
width: 142px;
height: 40px;
border-radius: 20px;
background-color: @tiffany-blue;
}.button {
width 142px
height 40px
border-radius 20px
background-color $tiffany-blue
}Specs
Assets
Colors
Text styles
let attributedString =
NSMutableAttributedString(string:
"text")
attributedString.addAttribute(.foregr
oundColor, value: UIColor.teflon,
range: NSRange(location: 8, length:
5))const text = {
fontFamily: "SFProDisplay",
fontSize: 9,
letterSpacing: 0.5,
textAlign: "left",
color: colors.white
};NSMutableAttributedString *attributedString = [
[NSMutableAttributedString alloc] initWithString:@"text"];
[attributedString
addAttribute:NSForegroundColorAttributeName
value:[UIColor teflonColor] range:NSMakeRange(8, 5)
];Specs
Assets
Colors
Text styles
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@color/white"
android:letterSpacing="0.06"
tools:text="#tiffany-blue"
/>const text = {
fontFamily: "SFProDisplay",
fontSize: 9,
letterSpacing: 0.5,
textAlign: "left",
color: colors.white
};With Zeplin there is no need to manually write out sizes or margins, type the copy, export icons. It's simply f***ing awesome and saves lots of time.
Alex Potrivaev Product Designer, Intercom
Integrated to tools you use everyday
Get notified of changes on Slack or MS Teams,
view designs on Jira issues, export assets/colors directly to your IDE e.g. Xcode, Android Studio.
Zeplin has become a core tool in the workflow of some of our ongoing projects. If you’re always looking for ways of ensuring that you’re crafting the most elegant experiences, then you’ll love it too!
Phill Farrugia iOS Engineer, Prolific Interactive
Connect your codebase to your design system
Access UI components in your codebase—with links to Storybook, GitHub, and any other source of documentation—right on the designs.
Generate code snippets that makes sense
We’re not here to hand you the complete front-end code, we just want to help out with repetitive stuff—simply grab the snippets you need.
Code snippets in Zeplin are open source extensions built by the community. Pick the ones that fit your workflow, or build your own.
In an ocean of design tools vying for attention and brand awareness, Zeplin delivers 10x the usefulness with none of the attitude. We've come to depend on it for our production timeline, and our engineers strongly prefer it to the competition.
Justin Maxwell Cofounder & Chief Design Officer, Smith.ai
Pop it out!
Pop the designs out as a transparent window that you can move around. Compare it with the app or the website to align elements smoothly. It even snaps to the iOS simulator!
Build custom workflows
Build a wide set of custom solutions ranging from internal scripts/applets to full-blown apps using Zeplin’s RESTful API. Zeplin also integrates with Zapier for no code solutions.
Ready to experience the glory of Zeplin as a team?
Publish finalized designs with one click
Stay in your design flow using your favorite design tool including Figma, Adobe XD, Sketch and Photoshop CC.
I absolutely love how everyone is on the same page for layout, sizing, and colors—it saves me so much time, it’s crazy.
Shannon Tinkley Product Designer, Slack
Provide developers the specs they really need
Select the platform you’re designing for and let Zeplin—pun intended—take care of the rest, generating accurate tailored specs, assets and code snippets.
Specs
Assets
Colors
Text styles
.button {
width: 142px;
height: 40px;
border-radius: 20px;
background-color: var(--
tiffany-blue);
}.button
width: 142px
height: 40px
border-radius: 20px
background-color: $tiffany-blue.button {
width: 142px;
height: 40px;
border-radius: 20px;
background-color: @tiffany-blue;
}.button {
width 142px
height 40px
border-radius 20px
background-color $tiffany-blue
}Specs
Assets
Colors
Text styles
let attributedString =
NSMutableAttributedString(string:
"text")
attributedString.addAttribute(.foregr
oundColor, value: UIColor.teflon,
range: NSRange(location: 8, length:
5))const text = {
fontFamily: "SFProDisplay",
fontSize: 9,
letterSpacing: 0.5,
textAlign: "left",
color: colors.white
};NSMutableAttributedString *attributedString = [
[NSMutableAttributedString alloc] initWithString:@"text"];
[attributedString
addAttribute:NSForegroundColorAttributeName
value:[UIColor teflonColor] range:NSMakeRange(8, 5)
];Specs
Assets
Colors
Text styles
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@color/white"
android:letterSpacing="0.06"
tools:text="#tiffany-blue"
/>const text = {
fontFamily: "SFProDisplay",
fontSize: 9,
letterSpacing: 0.5,
textAlign: "left",
color: colors.white
};With Zeplin there is no need to manually write out sizes or margins, type the copy, export icons. It's simply f***ing awesome and saves lots of time.
Alex Potrivaev Product Designer, Intercom
Share your design system with the team
Create styleguides to organize components, colors and text styles. Link styleguides to multiple projects, enabling engineers to reference your design system across all of your projects.
Keep everyone on the same page, always up-to-date
Everyone in the team can access the latest design resources, get notified of changes without you having to ping them.
Zeplin is a perfect place to have an up-to-date repository for pixel-perfect comps which anyone can see and comment on. Everybody is loving to work with Zeplin :)
AJ M. Product designer, Pinterest
Ready to publish your first design and share with your team? Ready to publish your first design?
An inclusive design workspace, welcoming to non-designers
Bring together the multidisciplinary team, including developers, product managers, copywriters and more, all in one easy to use design workspace.
Everyone in the team can access up to date design resources, get notified of changes.
Zeplin has been an integral part of enabling our team at Twitter to move quickly and seamlessly with engineering and continues to be adopted as the go-to design hand-off tool throughout the organization.
Ben Suarez Product Designer, Twitter
Those illustrations! They're amazing @bran, we should use these on the profile page as well.
My jaw is about to hit the floor
.
Oh, stop it you two! Yes @jan, we should. I'll update the profile page in a bit..
Collaborate in context
Add notes directly on designs to communicate ideas, feedback or to ask for technical details. To keep things organized, categorize notes by color and resolve them when you're done.
Zeplin has sped up our workflow while increasing transparency and collaboration. We can’t imagine using Sketch without Zeplin.
Nefaur Khandker Product Designer, Khan Academy
Speed up your workflow with integrations
Add Zeplin to a Slack channel, a Trello board, or a Jira ticket to speed up your workflow, always keeping the team up to date.
Zeplin is a perfect place to have an up-to-date repository for pixel-perfect comps which anyone can see and comment on. Everybody is loving to work with Zeplin :)
AJ M. Product designer, Pinterest
Help your team get familiar with your design system
Collect and organize your team’s projects and design system resources like components, colors, text styles—referencing them quickly when necessary.
