Technologies
Zeplin
Zeplin is another online graphics editor that supports collaboration between various team members—UI/UX designers, developers, and project managers—in the design process and provides an organized workspace. It can integrate with Sketch, which allows designers to upload mockups or projects directly from Sketch and add them to Zeplin's project folders.
Annotations (sizes, colors, margins, and even CSS suggestions for some elements) made in the Zeplin workspace will be automatically added to projects. Solutions of this type allow teams to co-create a project, which is the only source of truth, where each team member has immediate access to changes, corrections, resources, and comments made by another team member.
Members share
Zeplin is a source of truth about an application's interface in development for the entire team, not just developers. Thanks to this tool, everybody can collaborate simultaneously.
The best practice is to publish only the design on Zeplin, which will later be analyzed by project managers and developers (thanks to the sharing function). As a result, Zeplin contains only those designs that were accepted by the team and transferred to production.
Zeplin offers a feature that allows product teams to comment on the published designs and add annotations.
Design share
Design files and data are organized by project in Zeplin, and the project owner grants the rest of the teammates access to them. Every project can have unlimited files, and Zeplin makes it easier to organize them by providing adequately named sections.
Design system
Zeplin contains more than just the design of app screens (UI mockups, frames). It also allows a user to publish and organize components used in mockups. Zeplin makes it possible to move the entire design system (colors, text styles, spacing, and layout) into production.
Components are stored in the style guide section of every project and exported from Sketch, Figma, or Adobe XD. Some components also deliver code snippets to Zeplin so developers can build a CSS stylesheet faster, resulting in shorter web and mobile development processes.
Designs management
Undoubtedly, Zeplin supports the entire development process and falls under the management-type tools. Besides the integrations mentioned above (Figma, Sketch, Adobe XD), Zeplin also offers communication with other popular management-type applications: Slack, Jira, Teams, Trello, and Storybook. Thanks to this, we can share all the important updates regardless of the application used.
Making changes to published designs and code requires re-exporting them back to Zeplin. The tool overwrites the old design version with a new one as long as the frame has the same name in Zeplin and the design tool that created it.
Systems: Zeplin's place in the process
In summary, the Zeplin tool is a significant element in our production chain (design apps: Figma, Sketch, Adobe XD -> Zeplin -> Storybook) that lets us ship beautiful products. It has its place at the intersection of design and coding.
Zeplin has an extensive permissions system (the team consists of an owner, admin, and members). It allows us to distribute the design work not only in the form of frames but also in a Design System. It's used to communicate changes and maintain the newest version of a design.