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
|
Go to the Dashboard |
|
Go to the active Project |
|
Open the Styleguide for the active Project |
|
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 |
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. |