Get more out of Zeplin while collaborating remotely

It’s been three weeks of working remotely for the Zeplin crew — while we do have some experience working as a distributed team (we have offices in Istanbul, San Francisco and London), it’s the first time we’re all working remotely. As most of you, we’ve also been adapting to all of the changes happening — the aim of this post is to share how you can use Zeplin to facilitate communication while you’re working from home and continue collaborating asynchronously.
Before jumping into the details; first things first — we hope that you, your family and friends are all staying healthy and safe out there. That’s the most important thing right now.
We’ve put together a list of and tips and tricks that can help you and your team while you’re working and collaborating remotely. Let’s start with some integrations.

Stay up-to-date on projects with the Slack integration

You can enable the Slack integration in a project and Zeplin will automatically send updates about screen updates, new comments, styleguide changes, etc. to the channel. Since we mostly collaborate asynchronously these days, it’s a great way to follow along with a project, without having to check your Zeplin notifications. Everyone in the Slack channel will also see a thumbnail preview of the changes and access Zeplin directly from Slack, without you having to ping anyone.
Here are some ProTips. 🎩🐰 We find it helpful to create two separate channels for the same feature:
Zeplin notification
Feature channels: Anyone on the team is welcome to join these. Here we mostly share internal feedback and updates. We like to name these channels with the abbreviation “ft”, for example “ft_styleguides”.
Development channels: Team members who are actively working on the feature are in this channel, so that we can talk deeply around the challenges, questions, blockers here without spamming others. We name them using the abbreviation “dev”, for example “dev_styleguides”.
Having two separate channels can help you organize the information you want to share with your teammates. You can decide on what to share with who and update your Slack preferences from the Web app based on that.
Preferences in Zeplin
☝️ To help you collaborate more, we’ve prioritized the Microsoft Teams integrations — stay tuned for more updates on this!

Manage tasks with the Jira integration

We recently released our Jira integration, where you can connect Zeplin to your Jira Cloud instance to enable two-way collaboration; meaning you can access designs in Jira and reference Jira issues within Zeplin.

Attach designs to Jira issues

You can attach your screens, sections or projects from Zeplin to a Jira issue — this way the team can preview the designs directly within Jira.
Attach from Zeplin

View and filter Jira issues in Zeplin

You attached your screens to Jira, that’s great! What now though?
While inspecting a design in Zeplin, engineers, designers or PMs need to know which epic, story or issue it belongs to. Once you attach Zeplin resources to Jira issues, you can now access the Jira issue directly from within Zeplin.
Jira selector in Zeplin

Check previous iterations with Versions

What has changed? You’re working on countless iterations behind the scene. You can help your team not to get lost within these changes, trying to figure out which version to stick to.
Screen links in Zeplin will always show the most recent version — you can also refer to previous iterations by sharing Version links.
Versions in Zeplin
When managing different versions, it’s important to communicate clearly on the changes made. While exporting new designs, you can enter commit messages to describe what has changed. Here are our recommendations for commit messages:
Stick to one style: Use the “imperative mood” for simplicity. e.g. change, not changing, remove, not removed.
Be precise: Provide specific information so your colleagues can easily figure out what to look out for.
Keep it simple: If you feel like you need to explain something in detail, prefer using the screen description section on the right panel.
Commit message in Zeplin

Pop-out the notifications panel to check updates

We’re receiving a lot of feedback related to notifications, we’re aware that’s it’s not very easy to follow notifications in Zeplin and we’ll be working on it very soon. In the meantime, we wanted to share a hidden feature of the macOS app, it can still be helpful while checking the updates, which can be helpful while checking your updates:
Did you know you can pop-out the notifications panel and use it as a check list while reviewing your notifications?
Just hold the title bar and drag it wherever you want!

Easily reference the resources you want

You can streamline communication by sharing links to specific resources in your projects. Apart from projects and screens, you can share links for:
Sections: From a section’s menu to the right
Tags: By right clicking on a tag
Versions: From a version’s right panel or the Versions panel
Notes: By right clicking on a note

Help your team get familiar with your design system

​​Linking your styleguides to projects ensure that designs stay brand-consistent throughout all of your apps. Everyone on the team can clearly see the component names within the design, promoting reusability.
Exporting components to Zeplin and connecting them with your codebase can help your team naturally discover and learn more about your components, as they’re viewing designs.
Your design system is constantly evolving, so are the UI components in your codebase. You can onboard new engineers to your codebase as they’re working on designs, making sure that they have quick access to up-to-date documentation.
Component in Zeplin

…and finally, virtually hug your teammates

Whatever the tool you’re using, the best help will come from your own teammates. We try to do random gatherings to have fun with some random concepts: virtual Garaje lunches with the San Francisco crew or Skribbl drawings with the Istanbul crew. Get creative and have fun!
Zeplin crew-1
Zeplin crew-2