- Zeplin’s Web app works on Windows, macOS and Linux devices and supports most modern browsers to provide the best experience: Chrome 62+ Firefox 59+ Safari 11+ Edge 15+ Plugins. Photoshop CC 2015+ Sketch 44.1+ Related articles: Using Zeplin on Linux. Downloading Mac and Windows Apps.
- Tutorial: app design tutorial using Sketch and Zeplin.
Exporting assets from a Sketch design in Zeplin is quite straightforward. After selecting a layer in your Sketch file, select “ Make Exportable ” from the bottom-right of the screen. After this is selected, Zeplin will generate all the necessary images with different scales and formats automatically, tailored to the platform you’re.
Bohemian Coding’s Sketch makes producing creative assets for our projects super easy, and Zeplin allows our developers to get to these assets pain-free. What helps this production flow is ensuring our designers prep assets in their Sketch files correctly before anything goes into Zeplin, and some follow-up tasks once they’ve been uploaded. Today I’m going to walk you through how to prep your Sketch files for export into Zeplin, and how to work within Zeplin to ensure your developers can grab assets with a smile!
Editing Note: If anything changes in terms of this production flow, including new features in Sketch or Zeplin that relate to it, we’ll be coming back to this article to ensure it’s up to date. We’ve made our latest edits to this article in April 2017.
Sketch Setup
Naming Conventions
Before production in Sketch begins, designers should work with the developers to establish naming conventions for assets. A naming convention helps both teams understand how the asset system works, and makes it easier to discuss them later on. We follow conventions similar to what Ribot outlines in their Project Guide: https://github.com/ribot/android-guidelines/blob/master/project_and_code_guidelines.md
For images, we use img_name, and for icons, we use ic_name. Depending on your system, you can also include categories and subcategories for grouping purposes, such as category/subcategory/ic_cameraSelected. You can carry this over into Sketch when naming your symbols, as doing this will cause them to become grouped. In Zeplin, however, only the last part of the name (ic_cameraSelected) will be used for the rendered asset.
Speaking of Zeplin, if you use underscores, make note that Zeplin renders the asset names differently for iOS projects. It will turn underscored names into camelCase, while Android and Web projects will retain their original underscored names. Don’t worry on this, as that’s the preferred naming standard for iOS. Finally, avoid ALL CAPS – Zeplin always converts letters into lowercase and may add additional underscores between each letter when they’re converted.
Quick Edit: Zeplin now allows developers to change the naming format of assets! You can either use the default convention Zeplin applies, the original format set from Sketch, or your favorite case type (camel, snake, or kebab)!https://twitter.com/zeplin_io/status/855080872327991297
Symbols Setup
Using symbols in Sketch is a good rule overall, as it will make things easier when preparing your assets for Zeplin. Symbols will need to be made exportable, via the Make Exportable button at the bottom of the right-hand panel (Inspector). However, you don’t have to go through setting multiple sizes or suffixes as you would normally. This is because Zeplin does the heavy lifting of producing the multiple sizes for assets based on the type of project you’re submitting to (Android, iOS, Web).
With this, you don’t need to make screen artboards containing symbols exportable. When you upload an artboard to Zeplin that contains symbols, it will produce assets for all nested symbols that have been made exportable within the artboard. Because symbols create themselves as an artboard within the Symbols page in Sketch, you can change the size of the symbol artboard to give the asset itself some padding. With this, Zeplin will generate the asset with a transparent background, as it uses the symbol’s artboard settings when rendering assets. If you need the asset to include the background color applied to the symbol’s artboard, you can enable the Background Color option in the Inspector.
As you make changes to your symbols via the Symbols page, they’ll apply to every instance of the symbol. This means you can make the asset exportable once from the Symbols page, and every screen artboard submitted to Zeplin that uses it will have the same settings applied, so you don’t have to repeatedly set it per screen.
If you create a parent symbol that allows for overrides of text or nested symbols, Zeplin will account for any overrides you apply to your symbols within a respective screen artboard. This makes it really easy to create a symbol once and make changes to it as you go from screen mock to screen mock.
Zeplin Setup
Plans and Accounts
If you haven’t already created a Zeplin account, you’ll want to take note of the different plans that are available when you sign up. There’s a Free plan, which lets you get started with 1 active project. If you need more, you’ll need to archive a project in order to create a new one, or you can upgrade to either the Starter plan (3 active projects) or Growing Business plan (12 active projects). For all 3 of these plans, whenever you need to add someone to a project, they’ll need to also have a Zeplin account. People that you frequently add to other projects will show up in a convenient list when go to add people, otherwise you’ll need to use the email they signed up with first.
However, this can be a hassle to manage if you’re part of a large team, especially if you have multiple people creating multiple projects, and if everyone needs to be aware every project in general. This is where the Organization plan comes in because it allows you to create a centralized account that you can group and manage people under. Its pricing is per-member, which helps in the long-run as you don’t have to have multiple people paying for Starter or Growing Business plans. Once someone is added to your Organization, if you give them an Admin or Editor role, they’ll be able to create an unlimited number of projects, and all Organization members will be able to access them.
Here are a few resources directly from Zeplin that talk more about Organization plans:
General Information: https://support.zeplin.io/pricing-and-plans/organization-plan
Adding Members: https://support.zeplin.io/pricing-and-plans/organization/adding-organization-members
Organization Roles: https://support.zeplin.io/pricing-and-plans/organization/assigning-roles-to-organization-members
Zeplin Projects
When creating a new project, you’ll be asked what platform the project will be for: Web, Android, or iOS. Zeplin will generate rendered asset based on what you select, so make sure you’re matching the platform you’re importing mocks from Sketch for. Depending on if your project is multi-platform, you may end up with multiple projects, one for each platform your Sketch files conform to and how you want assets to be exported.
Once your project has been made, you should be taken right into the project. From here, there’s a couple things you’ll need to do to finish setting it up. The name defaults to Untitled, so you’ll need to give it a name proper. This can be whatever you’d like, but if your project is multi-platform, you may want to use a naming system like this;
- projectname Android
- projectname iOS
- projectname Web
The density defaults to unknown, and depending on the platform type, you’ll get different options for what you can set it to. This setting is very important as it’ll determine how assets exported from Zeplin are sized. Match it to the density or sizing of your mocks. With Sketch being vector-based, you can work at any size and export them easily. We usually work at a mdpi (360px) / @1x (320px – 375px) size for native apps.
Exporting from Sketch
Zeplin Plugin
A small housekeeping step to take care of first: Make sure you’ve installed the Zeplin Sketch plugin. If you’re using the Zeplin Mac app, this should be installed automatically, which you can check in Sketch under the plugins menu. If it’s not there, or you haven’t installed the Zeplin Mac app and have never installed a Sketch plugin before, this page should help you out: https://zeplin.io/support.html
Sketch Artboards
Once you’re good to go, select which artboards you want to export into your Zeplin project, either by selecting them in the Layers List or clicking on the artboard’s name in the Canvas. Shift-Clicking will let you select multiple artboards.
Next, you can either use the ⌘+E shortcut or by going into Plugins > Zeplin > Export Selected Artboards… – this will bring up a new window that displays a list of your projects. You may need to log into Zeplin from here. If you have the Zeplin Mac app installed, opened, and are logged into it, it’ll automatically display your projects.
Select which project you want to upload to, and click Import. While it’s uploading, you can switch over to Zeplin and watch it update with your screens, otherwise you can just wait for the progress bar to fill up.
Reviewing in Zeplin
Styleguide
Once all the artboards finish uploading, head over to the project’s Styleguide tab in Zeplin. You’ll see that a bunch of suggested colors and text styles that can be added. This is based on the text styles Zeplin found from your Sketch file, and the associated colors it could find.
Once added, you can edit the names it applied to each respective color and text style; doing this helps give them variable names that developers can use as classes, and these variable names will apply to all screens uploaded to the project that Zeplin sees already using them. It’ll also check your last export for any new styles that haven’t been added to the guide!
Asset Check
Zeplin App
Along with the Styleguide, it’s usually a good idea to the Dashboard tab so you can go through each imported screen and make sure all of the assets you expect to be exportable look right, such as the names and sizing. You can view this either by looking in the Assets tab in the right-panel (the slice/knife icon) or directly clicking on a symbol on the screen. Doing this, you can see the properties of the asset, and can directly download the files for the respective symbol.
You can also do this with copy. Like assets, you can click on a body of text to see its properties, such as what typeface was used, the sizing/alignment/line-height of the body, and what color it uses. If it already uses a color or text style defined in the Styleguide, it’ll show as such. Otherwise, if they weren’t defined as styles in your original Sketch file, you can add them to Styleguide – either the text style, the color, or both.
Changes, Updates, and Fixes
You can easily fix issues in Sketch and re-upload to Zeplin, but there are a few things to keep in mind. Firstly, if you make changes to a symbol or overrides on a parent symbol in Sketch, you’ll need to upload all screens that use that symbol.
Secondly, you’ll want to keep the name of the artboard the same in both Sketch and Zeplin. Otherwise, if you change it in Sketch, it will upload the artboard as a new screen in Zeplin, which will cause it to have a different URL. This can get annoying if you’ve set Zeplin to be your source of truth for scope/expectations, and have already linked to the screen elsewhere (like in a JIRA task/story). If you need to change the name, make the change in both Sketch and Zeplin, and then upload the screen to the same project. This will make sure Zeplin will apply the change as a new version to the existing screen.
Finally, on the topic of versioning, Zeplin will keep track of each upload you make to a screen, and everyone will be able to look through the past versions of a screen. This is done by clicking the little hourglass icon in the bottom left when you view a screen, which reveals the version timeline panel. As a new version is made, you’ll be able to add a note through this panel. Make sure your note details what changes actually occurred, so that everyone knows what to look for. Depending on your plan, your history may not go back to the very first upload, but you can delete visible versions. I only recommend doing this if you made a minor change that really doesn’t need a whole note on its own.
Final Thoughts
Overall, this process has worked so well for us because we’ve been able to maintain a good collaboration between design and development. Exporting Sketch mocks into Zeplin speeds up our designer’s production time, and developers can easily and quickly get assets once they’re up on Zeplin. Designers can make updates as needed and can note changes to developers through versioning. Developers then have notes on styling of elements thanks to the Styleguide, without the designers having to write them up themselves!
Exporting artboards from a Sketch design to Zeplin is quite straightforward. 🚀 To be able to export designs, you need to download the desktop app.
Select any layer/artboard in your Sketch file.
Press ⌃⌘E or use the menu up top “Plugins > Zeplin > Export Selected…” to start export process.
☝️ It's sadly not possible to import Sketch files directly into Zeplin since Zeplin works with a plugin. If you don’t see the plugin in the Sketch menu, you can install it here.
Zeplin Desktop
Zeplin shows the file location on the right panel of the screen if you're the user who exported that screen and you're using the same machine that you used to export. You can directly open the design file in Sketch by clicking on the file name.
Next up: Collaborating with your team
Sketch Zeplin Components
Related articles: