As a design delivery platform, Zeplin helps developers get clarity on finalized designs to start the development quickly. Once designs are published to Zeplin, you no longer need to ask if the design is final and get lost in design files to export the assets, access specs, and code snippets.

Zeplin’s collaboration features provide the ability to share a common language and avoid potential miscommunication from the beginning. You can integrate Zeplin into your everyday tools and connect your codebase to your design system to improve your development processes.

In this article, we listed all the Zeplin features available for developers. No matter if you’re a beginner or an existing user, feel free to use this guide to become a power developer in Zeplin.

When you select a layer within a screen or a component published by the designer, Zeplin automatically generates resources, including measurements, assets, and code snippets on the right panel—tailored to the platform's needs. You can also measure the distances between design elements directly within the canvas.

To get started with inspecting designs, you can follow:

You can use Comments to ask questions to your teammates or share your feedback on the design. With Annotations, you can document how your designs should behave with descriptive GIFs/videos, reference product requirements, and even share API endpoints.

Zeplin extensions are JavaScript modules that generate code snippets from various design elements. When you create a project for the first time, you might realize that some extensions are added to the project automatically. Zeplin adds HTML and CSS extensions to Web projects, Swift and Attributed Strings to iOS projects, and XML extensions to Android projects by default. These extensions are officially developed and maintained by Zeplin.

You can explore all the extensions built by developers from the community and the Zeplin crew here: https://extensions.zeplin.io

Here are also articles to learn more about adding extensions to projects/styleguides:

💁‍♀️ As a bonus, you can read Exporting CSS and HTML if you’re a Web developer. If you’re a React Native developer, you can read Exporting React Native code snippets article. The articles under Developing iOS, Android, or Web projects using Zeplin also explain how the other official extensions work.

If you’re interested in building a Zeplin extension, you can get started from:

Styleguides ensure your designs are brand-consistent throughout all your apps by guiding your team to implement designs that have been curated, so nothing off-brand makes it to production. In Zeplin, each project has a Local Styleguide that would contain components, colors, text styles, and your spacing system. Designers can also create Global Styleguides, set up parent/child relationships between them to inherit the design elements and link them to individual projects.

Components are reusable design elements exported by your designer. You can inspect the components used in a screen directly from the canvas or list all the components within a styleguide from the “Components” section.

To learn more about components, you can follow:

Along with components, designers can also export colors and text styles from their design files and define spacing tokens.

You can list colors, text styles, and spacing tokens from the Styleguide tab or see them through the right panel while inspecting screens. Watch our tutorial to learn more:

You can also export design tokens from Zeplin to JSON format or download them as a .zip package, learn more here:

Layout Specs allow you to see Auto Layout and Constraints in your designs—helping you to understand how a layer should behave according to its parent (container) or children (item). Learn more here:

Screen Variants allow you to combine variations of the same screen, reducing clutter and enabling developers to toggle between them quickly. Learn more here:

With the help of Version Diff, you can compare what's changed between versions and visually spotlight those differences both on-screen and in the Inspect panel. As a developer, you can catch changes immediately, even if it's a subtle pixel height update or radius adjustment.

You can learn more about Version Diff here:

You can connect your components in your codebase to components in Zeplin, and your team can access their code right on the designs.

You can use Zeplin’s CLI to connect your components in repositories—such as GitHub, GitLab, Storybook, or any other source of documentation. Learn more here:

If you’re using Storybook, you can also connect your components using Zeplin’s Storybook integration with a user interface:

You can integrate Zeplin with the tools you already use to improve your team's collaboration, such as Slack, Microsoft Teams, Jira, VS Code, and Zapier. Here is the list of all the official Zeplin integrations:

Zeplin’s API enables you a wide range of capabilities to access the data in Zeplin. Using Webhooks, you can receive notifications about changes happening in Zeplin. You can access the documentation from:

Next up: Collaborating with your team