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. |