Jacob Ruiz

View Original

Tutorial: How to use Zeplin to automatically generate measurements, styles, and assets from your Sketch files

See this content in the original post

Zeplin is a well-designed program that feels lightweight but is actually quite robust. I'd say it's fair to call it the industry standard for handing off designs to engineering. Here's a quick walkthrough.

1. Download Zeplin and create an account

Head over to zeplin.io to create a Zeplin account and install the Mac app (which also includes a Sketch plugin). You get 1 project for free.

 

2. Start a new project in Zeplin

Once you've installed Zeplin on your Mac, choose your project type (Android, iOS, and Web).

3. Choose your pixel density

If you're working with the standard iPhone artboard in Sketch, you're working in 1x. I'll do another blog post about pixel density some other time.

 

4. Export your artboard from Sketch to Zeplin.

With the artboard selected, se the easy-to-remember shortcut (⌘E) to export the artboard to Zeplin.

5. View your mockup in Zeplin.

Do you see this magic? In Zeplin you can click on any element in your design to get all of its properties: position, spacing, color, text styles, etc. They even give you a nice "copy" button so you (or a developer or product manager) can easily grab the exact copy you've written, removing any room for error in spelling or punctuation. 

6. Share the specs with your developer

If you'd like to share a single screen, you can quickly grab a link from the right-hand panel when viewing an individual screen in Zeplin:

However, I'd recommend going back to the Project Dashboard view in Zeplin, where you can invite the developer to the project using their email address (on the right-hand side panel)

Those are the basics of Zeplin, and frankly there's not much else to it, which is great. Try it as a free account and see if it helps your workflow. I have a paid account and have found it to be the best way to send accurate specs that get implementation as close to pixel perfection as possible.

Zeplin also has a Slack integration that will notify channels when new designs are added or changed. I've found it to be a bit overkill, but if you're into that sort of thing, then go for it!

See this content in the original post