![]() First things first, you need to click Create Project and then choose the right project type – you can go with Web, iOS, Android or MacOS. Exporting screens to Zeplin Create a project in ZeplinĪfter successful preparation of a Sketch file, you are ready to launch Zeplin □. It only applies when exporting icons separately (not via Zeplin). If possible, try to optimise SVG icons with this tool. Icons will be available as *.SVG and *.PNG For backgrounds and illustrations choose raster formats. □□ Web: Mark icons as exportable in SVG. ![]() Also, layers need to be correctly organised, otherwise it won’t export correctly layers with transparencies.” TLDR: “Fills need to be set as non-zero (Sketch default is even-odd). Developers would be able to download the icons in *.SVG (optimized with SVGO) and *.PNG (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)Īccording to this Medium article, you have to change the fill settings of the SVG icons - please read the details there. □□ Android: Mark icons as exportable in SVG. For colored illustrations, it’s better to export them as PNGs. This will allow developers to access the icon in the *.PDF and *.PNG formats.Īccording to iOS developers, it is good to export icons in grayscale if exporting to PDF – they will be able to add colour using code. □□ iOS: Mark icons as exportable in PDF. The best way to handle it is simply going to the Symbols panel (or an external library) and marking artboards as exportable: This applies only to icons and illustrations. One of the most important things while preparing a file for export in Zeplin is marking elements as exportable. If for some reason you weren’t able to build a proper file, make sure to at least have symbols that follow naming convention and artboards grouped by flows. All the work that you have put into the organisation of your file pays out now. Most importantly, you should work with neatly organised symbols (and nested symbols), proper layer and text styles, and group screens by flow. I am sure that most designers are familiar with good practices for working with Sketch. One of the most important things before proceeding to export is preparing the Sketch file. Without any further ado, let’s get started! Preparing for the export Organise your document After reading this article you will know everything about Zeplin. Therefore, I am happy to present you with the proper way of handling the handover. Once someone shows you the right way to do it, you will be a master. If you rely on Sketch to flesh out your ideas, it can greatly streamline your workflow and save you a lot of valuable time.Exporting your designs with Zeplin is nothing particularly difficult. ![]() Whenever you choose to export assets, Zeplin automatically generates all necessary sizes depending on each platform’s requirements.Īll in all, Zeplin packs numerous useful features that can help teams of designers and developers work together more efficiently. Zeplin creates code snippets that can be exported and added to the app’s source code, saving you a great deal of time and effort. This makes it easy for developers to view all the information they need in the right format. Full-featured app that can lessen your development team’s workloadĭimensions are displayed in different types of units, depending on the target platform. You can take advantage of the Guideline page to store your color palette and view which fonts are being used in the project.Ĭommunication between team members is made simple with the help of color-coded notes that make it possible to have lengthy discussions. Can help designers work efficiently, while staying in touch with the development teamĪfter importing your artboards from Sketch, Zeplin automatically creates a list of all the colors and assets used in each screen. Useful tool that can be used together with Sketch to transfer content in no time at allĪfter installing Zeplin, the Sketch plugin should be installed automatically, but you can also perform this operation manually by downloading the source files and following the instructions provided by the developer.Īfterward, exporting your Sketch projects to Zeplin is a simple task that anyone can complete in seconds. The Zeplin application is bundled with a Sketch plugin that enables you to export your artboards with just a couple of mouse clicks. Zeplin is a Mac app that aims to make it easier for designers and developers to work together on projects, sharing resources and ideas while spending as little time as possible in unproductive meetings.
0 Comments
Leave a Reply. |