Developer Handoff with Zeplin Course

00:50

Welcome

Take a look at Zeplin
07:15

Organizing Assets

Chcek how to organize assets inside Zeplin
05:22

Version control in Zeplin

See how powerful the version control in Zeplin can be
11:06

Exporting assets

Save images and vectors from Zeplin
03:49

Sharing assets

See how to share assets for development
02:37

Components

Check out how you can use Symbols from Sketch to create components
00:40

Goodbye

That is all for now

Have you ever been wondering how to introduce successful and effective designer -> developer workflow? Forget about extensive specs and involve tools that will let designers and developers stick to their natural language yet provide a smart way to extracting assets and code from design files. One of the great tools you can use in this process is Zeplin! Let's learn it in a breeze!

Zeplin - Working techniques
Working with resources from Sketch
Developer Handoff
Version history
Working natively and in browser

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

This course is aimed both at designers and developers, who strive to create effective workflow and use the most convenient tools for Handoff. This will be useful in both 1/1 teams as well as in bigger organizations. Or you are a team leader and want to introduce highest standards in terms of designer -> developer culture - this course is also for you!

Reviews (2)

Working with Developers

The aspect of so-called Handoff - bringing the design specs to developers is essential in modern UI design. Not only can you make it faster and more straightforward but most importantly you don’t really need to worry about what kind of assets are required, because with the use of modern tools developers can extract them themselves!

Easy code Handoff

More and more apps are bringing Handoff to the table. From Figma you can preview the measures, font sizes, colors as well as export all of the code as CSS, iOS or Android formats. Marvel recently introduced a great way of extracting the assets as well as copying the code. Adobe tools also have introduced Handoff in Adobe Extract that is a part of Creative Cloud. If you provide a link to the .psd file saved in CC folder, developer can easily read the measures and export assets. For Sketch, there are many great plugins such as Sketch Measure, but the right solution is...

Using Zeplin for Code Handoff

Zeplin is a native app for both Mac and PC, that lets you easily check out all the properties as well as export assets from both .sketch and .psd files. If you don't want to use the dedicated app there is also a web link for the browser that can be used by developers.

Extract Everything

The moment you share your design files in Zeplin, your team gets the access to all of the assets, including graphic files that can be extracted as bitmap or vectors, platform-specific code as well as all the measures. There are also some additional features such as version history and more!

Handoff has never been easier

Style guide is a designers' language, not friendly for developers. To the opposite, code is best understood by developers. There is no need to write extensive specs that no one is reading - get the tools and explain the idea across your team and you're covered!

Gain access to all courses from $12/mo