In order to build great digital experiences, there needs to be an airtight handoff between design and development teams.

With Zeplin, you can keep your work in the design tools while publishing your finalized designs in an organized and accessible workspace. Everyone in the team can access the latest design resources and get notified of changes without having to ping them. You can define user journeys, document behaviors, and share requirements to give more context to your designs and improve your handoff processes.

In this article, you can learn how to start using Zeplin and discover all of the features you will need as a designer. You can also check out this demo video:

To get started, you will need to have a project in Zeplin. It supports 4 different project types: Web, iOS, Android, and macOS. Since developers use different resources for each platform, Zeplin generates all resources, like assets, specs, and code snippets, based on your project type. For example, the measurements will be in pt for an iOS project, while they will be in px for a Web project.

You can check out these articles to learn more about creating a project in Zeplin:

After you've created your project, it's time to start publishing your designs. Zeplin works seamlessly with Figma, Sketch, Adobe XD, and Photoshop. Based on your design tool, you can learn the details from one of the articles below:

You can also publish your designs in order. Whether your artboards or components are laid out horizontally, vertically, or numbered in your design file, you can choose the order you want to publish them to Zeplin.

In addition to publishing your designs from the design tools, you can import your designs in the PNG format into a project from the Zeplin Mac app. Here is how it works:

In Zeplin, every project has its own local styleguide. When you publish your designs, Zeplin automatically finds the design elements, such as colors and text styles. You can add them to the project's local styleguide.

In addition to projects' local styleguides, you can create global styleguides. With global styleguides, your team can manage text styles, colors, spacing systems, and components separately from a project. You can also export your components directly to your global styleguide, and they will be listed under the Components section in the global styleguide.

If you have a UI kit, design system, pattern library, or brand styleguide you're working on, you can set it up in Zeplin and even create child styleguides that inherit from the parent one.

You can learn more details about the global styleguides from this link:

After a while, you may need to update your designs and publish your screens' new versions to Zeplin. In this case, you'll also need to see the previous versions of your designs and compare them. Here are the screen versions in Zeplin that can help you!

Also, Screen Variants allow you to combine variations of the same screen, reducing clutter and enabling developers to toggle between them quickly. Screen Variants help communicate variations of screens such as:

You can start with this article to learn more about it:

Once your team gets used to Zeplin, your project and screen count will probably continue to increase. To keep things organized and understandable by every member, you might need to organize your dashboard and projects. You can quickly tidy your workspace with sections, descriptions, and tags!

You can also organize your styleguides by creating sections and groups:

While the entire team can add their feedback or ask questions by using Comments to collaborate on designs, designers will also need to share their instructions visibly. That's where the Annotations come on stage!

With Annotations, you can document how your design should behave with descriptive GIFs/videos, reference product requirements, and even share API endpoints.

When you add components to your artboards/frames and publish them into Zeplin, you can access the details of your components on the right panel while inspecting your screens. Also, you can see all the components used on a screen!

In addition, Zeplin can now highlight components across screens of a project and show a list of them per screen. This way, you can do your final check after you publish your designs to Zeplin and be sure that everything is just fine!

So far, so good! We started by creating a project, then published our designs and tidied up our workspace. Now it comes to the user journey!

The Flows tab is where you show the user journey and connect your screens. Designers, developers, and PMs can share a common language when describing user journeys and design intent. This results in increased alignment and higher productivity across teams. Here you go:

And one more thing… You can use Zeplin's Stage Mode for a simplified interface focused on presenting and reviewing designs. With the Stage Mode, you can present your screen in Zeplin and get feedback on them through comments.

Now you're all set up as a Designer in Zeplin! 🥳