![]() ![]() In Sketch, organize your assets and layers using consistent naming conventions.Now that we have Sketch and Zeplin ready to go, we’ll set up our Sketch file for a seamless export to Zeplin.Download the Zeplin desktop app for Mac or Windows.Create a Zeplin account if you don’t have one already.To see a general overview and learn more about how to use it, see the Zeplin demo video below: Working with Sketch and Zeplin: Steps and Tips However, Zeplin has a bit of a learning curve that requires some time and attention. Once the flow of working with Zeplin and Sketch (or the other apps mentioned above) is understood, the workflow becomes easy. At that point, a paid plan would be needed. When designing for both iOS and Android, two separate projects will be required. Zeplin offers a free plan, but under that plan, it’s limited to one project. While Zeplin has many helpful features, it isn’t perfect. – Jason Stoff, Senior Designer, Digital Products Zeplin Limitations If it’s not in Zeplin, it’s not official. We basically consider Zeplin to be our source of truth for collaborating with Engineering. In one of our past articles, Toptal Designer Micah Bowers talked about the importance of having a standardized design language system in order to communicate efficiently across various functions of product teams working on digital products.īy versioning design assets, creating component libraries, and generating living style guides, a project ported into Zeplin can serve as the “single source of truth” for product teams. – Alex Potrivaev, Product Designer design specifications, a.k.a. It’s simply awesome and saves lots of time to focus on design explorations. With Zeplin there is no need to manually write out sizes or margins, type the copy, export icons. ![]() ![]() Say goodbye to the days of “redlining.” Zeplin is focused purely on improving the collaboration between product designers and development teams and is used by leading product teams at Airbnb, Dropbox, Pinterest, Microsoft, and many others. Zeplin facilitates the handoff by taking designs from Sketch, Adobe XD, Figma, and Photoshop and exporting them into a format that can easily generate code snippets, style guides, specs, and assets. When a design is ready to move into the development phase (the “handoff”), engineers need a way to understand it and translate it into code. In Sketch, an item that is made exportable will have a knife icon next to them in the layer list.Zeplin is a powerful collaboration tool that bridges the gap between designers and developers by creating a connected space for product teams.Ī crucial piece of any product development puzzle is the place where design meets development. 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). This will let Zeplin know that it needs to be considered as an asset. Well worry not, Zeplin will take care of all that! □īefore you export to Zeplin, make sure that you select items or groups that may be used as an asset and make them exportable. □□ Developers□□, have you ever had to nag your designer on Slack for a missing asset to implement into your code? □□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? Text Styles can be edited in the “ Organize Text Styles” menu in the same dropdown. 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. To add text styles, create a text item with a specific font, weight, color, size. To remove a color, right click above the specific swatch and select remove. Add colors into document colors by clicking on the + button on the bottom of this dropdown. When you choose colors for a shape or some text, the color picker dropdown will appear. You can manually add and delete elements from this list by following the below: 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. ![]() In order to include colors and text styles in your Zeplin style guide, you have to specify them as document-specific. What is a style guide? It is a compilation of all design assets that are used to create composites and mocks of a final product - including but not limited to icons, colors, and typography. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |