Sketch To Zeplin



Announcing new features for product teams

Get started with Zeplin+ Download the Zeplin desktop app for Mac or Windows. You can use the app. Designers are always looking to streamline handoff to development. Zeplin might be your next great shortcut. Zeplin is a popular UX design tool for asset management, team collaboration, and documentation. In this course, Natalie Schultz shows how to build and share up-to-date design specifications using Zeplin and Sketch. You can export design files (screens) from Sketch & Photoshop to Zeplin, not in the other way. From Zeplin, you can export the exportable objects as PNG, JPG, PDF, SVG, etc., or even you can export the whole screen as PNG by dragging the thumbnail to a folder / desktop.

Zeplin desktop

Introducing Component Variants, Zapier Integration, and new Notifications experience. Learn more.

Designers have published 6,860,867
6
4
Figma, Sketch and Adobe XD designs to Zeplin for development and collaboration in the past 30 days.

Get started for freeGo to projects →
253px
Radius, 2px
Sketch
#419BF9
Sketch To Zeplin
Roboto, Medium, 24px
#FFFFFF

Leading product teams use Zeplin

Explore why →

Publish designs for development

Go beyond specs. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop.

Developers get a 'locked' design to build from, while designers can iterate on the next great release.

Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

Bring together the multidisciplinary team

An accessible workspace that is friendly to non-designers including developers, product managers, copywriters and more.

Zeplin also helps the team collaborate by providing much needed organization and structure to native design files.

Upload Sketch To Zeplin

Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.

Extend your design system

Drive consistency by surfacing design system elements where developers can easily reuse them. Then, go even further by using Connected Components to extend designs to code!

open platform

Connect your tools and build custom workflows

Leverage your investments in tools like Jira, Trello, Slack and VS Code through deep integrations with Zeplin.
With the Zeplin open API and webhooks, you can also create custom workflows to support your specific needs.

Deliver on the promise of design

Zeplin Sketch Plugin

Exporting assets from a Sketch design in Zeplin is quite straightforward. After selecting a layer in your Sketch file, select “Make Exportable” from the bottom-right of the screen.

After this is selected, Zeplin will generate all the necessary images with different scales and formats automatically, tailored to the platform you’re designing for; Web, iOS, Android, or macOS.

Assets with transparent padding

In a lot of cases, you might need to export your icons with padding around them, to keep everything neat. Let’s say you have 36px ⨉ 36px icon but you want to export it as a 48px ⨉ 48px image with a transparent background.

This is where Sketch’s “Slice” feature comes in:

  • Draw a slice around the icon.

  • Group the slice and the layer(s) together.

  • Here’s the cool part, select the slice and check “Export Group Contents Only”:

Download Zeplin Windows

Sketch

Keeping Groups Together

Zeplin Software

Zeplin normally displays all the layers in your Sketch file, even if they’re grouped. At some point, you might want to keep some groups together, as a single layer. After selecting the layer, use the shortcut “Cmd + Shift + X”. You can also do this through the menu: “Plugins > Zeplin > Utilities > Exclude Sublayers”.

Sketch To Zeplin Plugin

☝️You can also add “-g-” in front of your layer names, which is what the Exclude Sublayers option does automatically.

Sketch To Zeplin Export

Related articles:





Comments are closed.