If you’re just getting started with designing for the web, a newbie to Sketch app, a Photoshop (or similar) user not quite ready to make the jump, or a developer looking to throw UI design into your repertoire, then these easy to follow tutorials will be perfect to give you a brief understanding of how Sketch works, and how to produce a gorgeous design for desktop, tablet, and mobile.

Getting our designs ready for handing off

Part 5 (to finish up this series) will be quite short, but that’s because Zeplin is such a breeze to use.

So we have our 3 designs (Artboards) all looking pixel-perfect, and now we need to hand them off to our developer to bring them to life.

There are a few Sketch plugins out there that can create styleguides for you. I’ve used a few in the past, and they do a good enough job.

But, I have fallen in love with the awesome Zeplin app, which automates, so well, the process of handing off your designs, complete with styleguides, and assets, so much more simpler.

So, let’s hop on across to https://zeplin.io/, and sign up for a new account (they have a Free account to start with, so it’s all good).

If you’re the designer, then you can go ahead and download the Mac app (which is what we’re going to do).

If your developer is on Windows or Linux, they can still collaborate on the project by having access to the Web app, so that put’s the ‘Yeah you’re using Sketch, but my devs are on Windows machines’ argument to bed.

Install the app, and fire it up.

And go ahead, and create your first project.

As we have been working on designs for a Web application, choose the Web option.

This (in our case) just keeps the specifics relevant to web use, ie; measurements in px, colour export in CSS etc…

On the next screen, after you’ve created your new project, enter a title for the project, and change the pixel density to your requirements, by clicking on the inspector panel on the right.

Here you also have various ways in which we can share your Zeplin project, and also the option to invite Members to join the project.

Now onto the really simple part, exporting your artboards from Sketch, to Zeplin.

Please Note: When you installed the Zeplin app, it will have also (hopefully) installed a plugin to Sketch.

Back in Sketch, select the 3 artboards that we created previously (Desktop, Tablet, Mobile).

Then Cmd + E or choose Plugins > Zeplin > Export Selected Artboards

Choose the Zeplin project we just created, and click Import.

Then let it do it’s magic!

And boom, boom, shake, shake the room, we have our artboards imported into Zeplin.

Double-clicking will take you through to each individual artboard/design, where you can view more information about that specific artboard.

From here you can choose (by clicking the droplets icon to the right of the colour) the colours to take across to your Guidelines/Styleguide.

Check on the assets (images etc…) you have made exportable from Sketch.

Let me back up quick on the assets mention.

So, for example with the designs we created you could look at exporting the megaphone icon (amongst other assets), which is a simple as selecting it on your artboard, and then clicking on Make Exportable.

You don’t need to touch any of the options that appear in Sketch, as Zeplin will figure it all auto-magically, dependant on the project type, project density etc…

Pretty cool heh?

You can also leave comments for your developer via Cmd + Click anywhere on your design.

And just, like in Sketch, you can easily view the distance measurements between objects on your artboard.

This makes it so easy for a developer (especially if they do not have a copy of Sketch to hand) to view, right down to the pixel, the measurements that you set in your Sketch design.

And selecting a layer in Zeplin also gives you a detailed overview of that layer in the inspector panel.

Your developer is going to be one erm…happy developer.

From the Guideline tab, you can get an overview of the fonts used in your project, and the colours you chose on the previous screen (where you can easily click on the colour name to rename it to something more suitable).

The Font Book aspect could do with a little work, and from speaking to the Zeplin team, I know they are looking at improving this in a future update.

Zeplin, alongside Sketch is a true timesaver, and will keep you, and your developer on the same page, and working in perfect harmony.

And that is a wrap folks!

So, a big thank you for sticking in there throughout this 5 part tutorial series for Sketch.

I really hope it’s given you a better overview of how Sketch can really improve your design process, and when used alongside an app like Zeplin, can streamline the relationship between design, and code.

Thanks for reading the article,
Marc

Oh. Before you go, don’t miss out on this amazing offer for Sketch users…

Want to rapidly improve your design workflow?

Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…

Use the offer code MEDIUM20 to receive 20% OFF Cabana here.