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. 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. With this, you don’t need to make screen artboards containing symbols exportable.
Sketch Symbols need to be made exportable for Zeplin to render them out 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). However, you don’t have to go through setting multiple sizes or suffixes as you would normally. Symbols will need to be made exportable, via the Make Exportable button at the bottom of the right-hand panel (Inspector). Using symbols in Sketch is a good rule overall, as it will make things easier when preparing your assets for Zeplin. 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)! Symbols Setup Finally, avoid ALL CAPS – Zeplin always converts letters into lowercase and may add additional underscores between each letter when they’re converted. Don’t worry on this, as that’s the preferred naming standard for iOS.
ZEPLIN PLUGIN FOR SKETCH ANDROID
It will turn underscored names into camelCase, while Android and Web projects will retain their original underscored names. Speaking of Zeplin, if you use underscores, make note that Zeplin renders the asset names differently for iOS projects. Our Sketch Layer / Asset Naming Conventions in action In Zeplin, however, only the last part of the name ( ic_cameraSelected) will be used for the rendered asset. You can carry this over into Sketch when naming your symbols, as doing this will cause them to become grouped. Depending on your system, you can also include categories and subcategories for grouping purposes, such as category/subcategory/ ic_cameraSelected. We follow conventions similar to what Ribot outlines in their Project Guide: įor images, we use img_name, and for icons, we use ic_name. A naming convention helps both teams understand how the asset system works, and makes it easier to discuss them later on. Sketch Setup Naming Conventionsīefore production in Sketch begins, designers should work with the developers to establish naming conventions for assets. We’ve made our latest edits to this article in April 2017.
ZEPLIN PLUGIN FOR SKETCH HOW TO
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!Įditing 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. 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.
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.
0 kommentar(er)
