Introduction to Zeplin for coders

Hello. I am Nakayama, a coder in the Coding Factory Department (hereafter referred to as CF Department).

Today I'd like to talk about Zeplin , a design sharing tool that makes communication between designers and coders, which can often cause friction, much smoother and also makes markup super fast.

I've been using it more and more recently for various projects, so I'd like to introduce some recommended points from a coder's perspective.

What is Zeplin?

Zeplin is a tool that allows designers to share designs created with Photoshop, Sketch, and Adobe XD with coders. Launched in 2015, it was used by well-known companies such as Airbnb, Slack, and Pinterest in 2017, and the number of users continues to grow.
By receiving designs in Zeplin, coders can easily access image assets and instantly see information like the distance of each element and CSS colors.
Don't worry if you don't have Sketch or XD, or if you're not a Mac user.
Also, because it is an online application, design updates are immediately reflected in Zeplin, so coders will never have to say, "I was looking at the old design by mistake!"
Furthermore, the comment function can be linked to Slack and other services to facilitate communication between coders and designers.
It is free to use. If you are a designer and would like to export a design, you can do so for free for one project, but with the paid version you can export multiple projects. However, you can share multiple page designs within one project.

You can see the distance between elements by hovering the mouse over them like this. CSS is displayed in any format in the right panel.

How to read Zeplin

Zeplin? I was using it without any confidence, but I looked it up! Zeplin is jointly developed in Istanbul and California, so Zeplin is the Turkish word for Zeppelin. It means airship, as the logo shows. It is pronounced "zepurin" in katakana.
By the way, when I asked the official question of why they chose this name, they said,
"There's nothing special about it, but I like the sound of it, and I thought that if the words are almost the same in Turkish and English, it would be easy to get used to!"
It was a word I was not familiar with.

You can export images instantly!

You can choose the export format as PNG or SVG.

You can make an image into an asset all at once by pressing the knife mark on the right panel. You can also choose the magnification. However, if nothing is displayed here, you cannot cut it out. This is because you cannot export on Zeplin unless you set the asset before exporting. If you need to export, refer to the original data or ask your designer to set the export settings.

<Reference>
How to install and export designs: How to use Zeplin, a handoff tool you can use to transfer Photoshop design data to engineers | Dearps

You can see the update history

You can also write a commit message.

Sometimes you find yourself coding with an old design because you were looking at an old design file! With Zeplin, you don't have to receive updated design data, download it, and extract it, and the updates are synchronized immediately.
If there is an update, a pop-up will appear at the bottom of the screen.
You can also check the history by clicking the hourglass icon below, so you can see who made the update and when.

The font is displayed

Example of a special font

This feature is probably the most useful.
There is no need to "resolve unknown fonts" anymore. Fonts that are not available locally will be displayed as designed, so there will be no misalignment of the design due to different fonts. Yes, with Zeplin.

You can add comments (and reactions)

This is what it looks like on Windows. You can also type Slack emojis in the comments.

If you have desktop notifications turned on, you can see comments in real time, and by linking it to Slack, notifications with comments can be displayed in channels.
This function is very useful. Designers can add additional comments such as "Don't hover here" or add comments such as "I changed the height here" to changes.
Also, when you check with the director or designer and get feedback, you can receive comments such as "The margins here are not correct" and reply "I fixed it." In that case, it is easier to understand if you change the color of the comments, such as blue for corrected ones and yellow for unaddressed ones. After that, when the director/designer confirms that the corrections are complete, they can press the "resolved" button to resolve the comment, and the comment will be hidden, making it easier to see the remaining issues and reducing the number of missed issues.

Reference sites that provide detailed information about Slack integration and comments:
"Zeplin and Slack have sped up communication with the director about designs."

First of all, the interface is cute.

Being cute is more important than anything else. It also needs to be fun. When using it, you can feel the atmosphere of the engineers developing the app having fun in the details (although I don't know if that's actually the case), and it makes us, the users, feel happy too. Reacting with emoticons is a feature that's also available on github and slack, so engineers can use it casually, and I personally think that this kind of culture is a good thing.

It seems that the number of apps that can be linked will continue to increase in the future, so I would like to continue using it.

Zeplin blog (latest information here): https://blog.zeplin.io/