A Guide to Zeplin 🚀
Design Handoff Made Easy
Zeplin is a handy dandy tool for better communication between designers and developers. By converting designs made in Sketch or Figma to a code-friendly format, Zeplin can help your project be more organized and save everyone’s time!
Install + Create Account
Go to the Zeplin webpage and create an account by clicking on the “Sign up free” button on the top. Everyone needs an account so that you can be given access to specific projects.
There is a web app, but if you’re a designer, you will need to download the Mac or Windows app to export from sketch. Download the app from the bottom of the webpage.
Once you download the app, the Sketch plugin should be installed automatically. If not, go to this page to download the plugin manually. When you’re ready to export, select screens and use Plugins > Zeplin > Export Selected Artboards or the shortcut ⌃ + ⌘+ E to send to Zeplin.
For Figma, you have to add an integration to specific design files. Go to a specific project, click the hamburger menu and turn on Integrations > Zeplin. Turning this on will give you the option to export screens to Zeplin through the export function (⌥/Alt + E or the export button on the right top corner).
Create/Add Project
After logging in, you will be directed to your Projects screen. Here, you can see all the projects you are involved in or create a project. Your Project Manager or Core Mentor may have already created a project. In this case, you can ask the owner of the project to grant you access to the project.
When you create a project, you are given the option to choose the format. Choose accordingly to what kind of platform your app will be using.
After you create a project or are invited to collaborate on one, you can go into a specific project’s Dashboard by double-clicking on them. On the right, you will see the details of your project and a list of members who have access to this project. Let’s call this the Inspector for future reference. You can add your team members with their email or username here.
Slack Integration
Slack integration allows the app to post automatic notifications to your slack channel. Whenever a comment is posted, a color is added to the style guide, or a screen is updated… your channel will be notified with a link directly to the project.
You can customize when the channel is notified by going into Preferences when you click on the settings wheel ⚙ next to the Slack integration part. Select the relevant categories for your team to make sure not to spam your channel with too many notifications from the Zeplin bot…
TIP: Since DALI uses Google authentication, Slack integration is best done on a web browser. Google authentication causes a web browser to launch, and Preferences is only available on the web app. 🐛
Adding to the Style Guide
Some of you may know that Sketch has an ability to generate a basic style guide. Refer to this article for more info.
In order to include colors and text styles in your Zeplin style guide, you have to specify them as document-specific. Generating the Sketch style guide (⌘ + ⇧ + C) will automatically detect all colors and text styles, but it might add some things that are used only once or is not very significant. You can manually add and delete elements from this list by following the below:
When you choose colors for a shape or some text, the color picker dropdown will appear. Add colors into document colors by clicking on the + button on the bottom of this dropdown. To remove a color, right click above the specific swatch and select remove.
To add text styles, create a text item with a specific font, weight, color, size. With the item selected, click on the part right above the Typeface option where it says “No Text Style.” In the dropdown that appears, click on “Create new Text Style” and name it accordingly. Text Styles can be edited in the “Organize Text Styles” menu in the same dropdown.
Defining Assets
👩🎨Designers👨🎨, have you ever had to send your developer a huge zip file of all the icons, images used in the design and realized that you had forgotten something?
👩💻Developers👨💻, have you ever had to nag your designer on Slack for a missing asset to implement into your code?
Well worry not, Zeplin will take care of all that! 👼
Before you export to Zeplin, make sure that you select items or groups that may be used as an asset and make them exportable. This will let Zeplin know that it needs to be considered as an asset.
To do this, select the layer from the Layer List and click on “Make Exportable”(Sketch)/“Export”(Figma) at the bottom of the Inspector (bottom right corner). In Sketch, an item that is made exportable will have a knife icon next to them in the layer list.
Be sure to **name** your layers clearly and correctly, since the name of the layer will be used as the name of the asset when it is exported.
Screen Organizing
Organizing screens is very important when your designs involve multiple features. Just like you can add pages to your sketch file, you can create sections in Zeplin and drag and drop your screens accordingly. Make a section by hovering in between screens and clicking on the ➗ button that appears.
Zeplin also has a handy tagging feature that you can use to filter your screens. Add tags to a screen by right-clicking and selecting “Manage tags.” In the pop-up, you can add an existing tag or create new tags. The existing tags in the project will be shown at the top of the dashboard for easy filtering.
Style Guide
When you enter a specific project, you will see at the very top that you are in the Dashboard. Right next to the highlighted section, there is a tab that says Styleguide.
Click on the tab to see the colors and font styles specified in the Sketch file. These styles will be shown in the Inspector when you click on an item in a screen. Color names are generated automatically, but you can change them here. Font names will be taken from what you named them in the Sketch file.
Note how on the right side of the screen there is a code section that gives CSS code that developers can use in their style code. Hover over the part that says “CSS” and click to change the code language (CSS, Sass etc.) and color format (HEX, RGB, etc.) accordingly.
TIP: If you forgot to add something to the style guide before the export, you can add them by clicking on the check marks in the Inspector. Existing colors/typefaces will have the check mark highlighted in orange.
Assets
All the assets within a screen can be viewed by clicking on the knife icon at the top of the Inspector. You can export all the assets on a screen from this section, or export a specific item by selecting it on the screen.
Vector assets will have the option of being exported as PNGs or SVGs, and image assets will have the option of being exported as JPGs or PNGs. Note how there is just one vector asset thanks to its resizability whereas bitmap items spawn three assets.
Like I mentioned earlier, names of assets will be determined by the layer name. The naming convention can also be specified (dashes, camelcase etc.) by clicking on the settings gear that appears when you hover over the part that says “Assets.”
Commenting
By ⌘+Clicking anywhere on a screen, you can add a comment at that location. After the comment is added, you can click and drag the circle anywhere you want on the screen.
There are five colors you can choose from, which is handy when you need to organize comments—you might want yellow comments for design reviews, blue comments for developers. You can also tag members in specific comments, and they will be pinged via notifications that can be seen on the top right corner of the app.
Comments will have their own threads, so you can reply to a comment to discuss more. You can mark a comment as resolved, which will archive the comment.
Version History
Similar to how Git keeps track of changes in code, Zeplin keeps track of the changes in individual screens. You can view the history of each screen and even enter commit messages(!) by clicking on the hourglass button on the left bottom corner.
That was my quick intro to Zeplin. I think I covered most of the stuff I find handy, but I’m sure there’s still more to explore. Let me know in the comments if you find any other tips or features that you want to share!
