Catalog / Zeplin UI/UX Design Collaboration Cheatsheet

Zeplin UI/UX Design Collaboration Cheatsheet

A comprehensive cheat sheet for UI/UX designers and developers using Zeplin, covering essential features, shortcuts, and collaboration workflows to streamline the design handoff process.

Zeplin Basics

Workspace Overview

Dashboard: Central hub for projects, components, and styleguides.

Projects: Organize designs by platform (iOS, Android, Web).

Styleguides: Living documents for design consistency, containing colors, text styles, and components.

Components: Reusable UI elements synced from design tools (Sketch, Figma, Adobe XD).

Integrations: Connects with tools like Jira, Slack, and Microsoft Teams.

Navigation Shortcuts

Cmd + 1

Go to the Dashboard

Cmd + 2

Go to the active Project

Cmd + Shift + S

Open the Styleguide for the active Project

Cmd + Alt + C

Go to the Components screen

Inspecting Designs

Select Tool: Click on any element to view properties (color, font, size, spacing).

Measurements: Hover over elements to see distances to adjacent items.

Code Snippets: Generate code snippets (CSS, Swift, Android XML) for selected elements.

Assets: Download assets (images, icons) in various formats and resolutions.

Comments: Leave feedback directly on the design for clarification and iteration.

Collaboration Features

Commenting and Feedback

Adding Comments: Click anywhere on the design and type your comment. Use @ to mention team members.

Resolving Comments: Mark comments as resolved once the issue is addressed to keep the design clean and organized.

Threaded Conversations: Maintain context with threaded replies under each comment.

Notifications: Stay informed with email and in-app notifications for new comments and mentions.

Team Management

Inviting Members

Invite designers and developers to collaborate on projects.

Setting Permissions

Control access levels (admin, editor, viewer) for different team members.

Managing Roles

Assign specific roles to team members for efficient workflow management.

Activity Logs

Track team activity and changes within projects.

Integrations

Jira: Link design tasks to Jira issues for seamless project management.

Slack: Receive notifications for new designs, comments, and styleguide updates directly in Slack.

Microsoft Teams: Similar notification support as Slack, integrated within Teams channels.

Adobe XD, Figma, Sketch: Direct plugin support for publishing designs to Zeplin.

Styleguides and Components

Styleguide Management

Creating Styleguides: Create and manage styleguides to maintain design consistency across projects.

Adding Colors: Define and organize color palettes for easy access.

Adding Text Styles: Define typography styles, including font family, size, and weight.

Documenting Design Tokens: Manage reusable design tokens (e.g., spacing, border radius) for scalability.

Linking to Components: Connect styleguide elements to corresponding components for a unified design system.

Component Library

Importing Components

Import components from design tools to create a reusable component library.

Organizing Components

Categorize components for easy navigation and discovery.

Version Control

Track component versions and updates to ensure design consistency.

Component Usage

View component usage across projects to identify inconsistencies.

Advanced Styleguide Features

Custom Properties: Add custom properties to styleguide elements to store additional information.

Variables: Use variables in styleguide elements for dynamic updates and theming.

Code Components: Integrate code components directly into the styleguide for developers.

API Access: Access styleguide data via API for custom integrations and automation.

Design Handoff Workflow

Preparing Designs for Handoff

Naming Layers: Use clear and descriptive names for layers and groups.

Grouping Elements: Organize related elements into groups for easier selection and inspection.

Using Auto Layout/Constraints: Ensure designs are responsive and adaptable to different screen sizes.

Exporting Assets: Export assets at the correct resolution and format for different platforms.

Adding Annotations: Add annotations to clarify design decisions and provide additional information.

Developer Workflow

Inspecting Designs

Use the Inspect tool to view properties, measurements, and code snippets.

Downloading Assets

Download assets in various formats and resolutions.

Using Code Snippets

Copy and paste code snippets directly into your codebase.

Collaborating with Designers

Leave comments and provide feedback on the design.

Troubleshooting

Missing Assets: Verify that assets are correctly exported and linked to the design.

Incorrect Measurements: Double-check measurements and ensure they are accurate.

Version Conflicts: Ensure you are working with the latest version of the design.

Integration Issues: Troubleshoot integration issues with Jira, Slack, and other tools.