![]() Engineers can then easily export assets into native code, saving time and tedium. The flexibility to update assets dynamically from one central source, like a symbol in Sketch exported to a component in Zeplin, creates tremendous flexibility. Having a workflow bridge like Zeplin empowers designers to annotate screens and eases the often dreaded handoff phase with complete and precise specifications. ![]() Zeplin will automatically version control your files and you can continue collaborating with team members using this dynamic “source of truth.”Ĭreating a dynamic, organized, and collaborative workflow between design and development teams is essential for building great digital products.Continue to update your Zeplin file by exporting artboards from Sketch.Now that your Zeplin file is ready to share with your team, invite users via their email address, or send them the project URL.Collaborate, share, and use version control. You can even mention other teammates with and they will receive a notification.ġ0.You can add a note by holding down Cmd ( Ctrl for Windows and Linux users) and clicking anywhere on the screen.From the detailed view of a screen, select the add note icon and pin your note to a component. Adding notes to designs is easy with Zeplin.You can learn more about the Components tab of your project style guide in Zeplin here. Organize these into sections such as “Icons,” “Images,” “Common Elements,” etc.Once in the “Styleguide” tab, select the secondary tab, “Components.” Here, you will see all of your symbols exported from Sketch.Select the “Styleguide” tab at the top center of Zeplin (next to “Dashboard”).Design unification is essential, as Airbnb designer Karri Saarinen outlines in Building a Visual Language:Ī unified design system is essential to building better and faster better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with. This is important when a project’s designs are developed for multiple platforms by different team members. Perhaps one of Zeplin’s most useful features is the ability to organize assets into component libraries. ![]() Once highlighted, right click and select “New Section from Selection.” Repeat this until your Zeplin file is properly organized. From the Dashboard view of your project, select similar screens to group into categories.Now that your Sketch artboards are in Zeplin, let’s organize artwork into sections.These will show up in your Zeplin-generated style guide. Save colors into your “Document Colors” palette and fonts as “Text Styles” in your Sketch file.This will allow you to set up components in Zeplin. Create symbols for common elements and assets within Sketch.Depending on what type of project this is (e.g., iOS, Android, or web), Zeplin will automatically adjust the assets’ naming convention, making exporting them a one-step process. If collaborating with other designers, determine conventions that work for everyone on your team. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |