How to improve your design workflow with Zeplin and Sketch?
By: Galaxy Weblinks
Tags: Zeplin, Design, Sketch, Developer, Designer

Working with Sketch and Zeplin: Steps and Tips

Zeplin facilitates the handoff by taking designs from Sketch, Adobe XD, Figma, and Photoshop and exporting them into a format that can easily generate code snippets, style guides, specs, and assets. It is focused purely on improving the collaboration between product designers and development teams, and needs.

1. Get started with Zeplin+

Create a Zeplin account if you don’t have one already. You can sign up for free: https://app.zeplin.io/register

Download the Zeplin desktop app for Mac or Windows.

You can use the app-based or web-based version of it. While creating your designs, you can decide what kind of project you are going to create: is it web, iOS, Android, or experimental?

2. Prepare your Sketch file for seamless export to Zeplin

When you download the Zeplin app, their plugin will automatically appear in your Sketch file.

In Sketch, organize your assets and layers using consistent naming conventions. If collaborating with other designers, determine conventions that work for everyone on your team.

Depending on what type of project this is (e.g., iOS, Android, or web), Zeplin will automatically adjust the assets’ naming convention, making exporting them a one-step process.

Create symbols for common elements and assets within the Sketch. This will allow you to set up components in Zeplin.

Save colors into your “Document Colors” palette and fonts as “Text Styles” in your Sketch file. These will show up in your Zeplin-generated style guide.

Note: You should have separate projects for iOS and Android, even if the designs are identical. This is because Zeplin will generate different code based on the type of project.

Select the project resolution which matches your Sketch artboards (e.g., 1x, 320px).

3. Export and Organize the Sketch artboards to Zeplin.

From Sketch, highlight all artboards that you would like to export to Zeplin.

Go to Plugins > Zeplin > Export Selected…

Now that your Sketch artboards are in Zeplin, let’s organize artwork into sections.

From the Dashboard view of your project, select similar screens to group into categories. Once highlighted, right-click and select “New Section from Selection.” Repeat this until your Zeplin file is properly organized.

The side panel has also the option to create your style guide by adding elements to it.

Perhaps one of Zeplin’s most useful features is the ability to organize assets into component libraries. This is important when a project’s designs are developed for multiple platforms by different team members

4. Annotate your designs in Zeplin

Adding notes to designs is easy with Zeplin. From the detailed view of a screen, select the add note icon and pin your note to a component.

You can add a note by holding down Cmd (Ctrl for Windows and Linux users) and clicking anywhere on the screen. You can even mention other teammates with “@” and they will receive a notification.

5. Collaborate, share, and use version control

Now that your Zeplin file is ready to share with your team, invite users via their email address, or send them the project URL.

Continue to update your Zeplin file by exporting artboards from Sketch. Zeplin will automatically version control your files and you can continue collaborating with team members using this dynamic “source of truth.”

Conclusion

The amount of time saved in creating redlines for every single component, and in-depth documentation on its behavior is incredible.

Plus, developers have a view of designs earlier in the process. And designers can see the front-end code. This helps us all identify the similarities between projects more quickly to help plan out how code or designs should be managed.

Or, if we’re seeing design theory or assets trending in a new direction, this helps us identify potential code challenges earlier in the design process.