LearnUX.io Awwwards Honorable Mention

Developer Handoff with Zeplin Course

  1. Welcome 00:50

    Welcome

    Take a look at Zeplin

  2. Organizing Assets 07:15

    Organizing Assets

    Chcek how to organize assets inside Zeplin

  3. Version control in Zeplin 05:22

    Version control in Zeplin

    See how powerful the version control in Zeplin can be

  4. Exporting assets 11:06

    Exporting assets

    Save images and vectors from Zeplin

  5. Sharing assets 03:49

    Sharing assets

    See how to share assets for development

  6. Components 02:37

    Components

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

  7. Goodbye 00:40

    Goodbye

    That is all for now

Developer Handoff with Zeplin Course

Duration: 00:31:39 Last update: 4 years ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

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!

Code Handoff from design files
Working with Zeplin

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!

Code Handoff from design files
Designer Developer workflow

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!