Sections in Zeplin

Since the dawn of time, we’ve been getting requests for one more layer of screen organization, which would work nicely with our existing feature, Tags. 🚀

For ones who are not familiar, a quick intro: Zeplin is a collaboration tool for designers and developers that generates specs, assets and code snippets from designs, tailored for iOS, Android and Web. Check out zeplin.io to learn more.

Why sections?

Tags work great for organizing your screens, yet they’re not enough if you have too many. They help you group screens but they don’t provide a visual organization, which would let you find a particular screen faster, especially if you’re not familiar with the project.

Recently, we realized that some of our users actually use a clever workaround and export fake screens to their Zeplin projects, to act as visual dividers. 😳

We’ve started brainstorming on this “hack” and discussed it with a lot of fellow designers and developers. We’ve learned that in most cases, designers prefer grouping screens based on features, e.g. Login, Browse, Cart, Profile and so on. Unlike tags, screens only belong to a single group.

Immediately, folders or sections come to mind. We’ve decided to stick with sections, which provide a better visual separation and work brilliantly with tags. 🏄

Sections, together with tags

Currently on existing Zeplin projects, tags act as groups for all sorts of concepts. Tags like Login and Browse let you organize screens based on features, while tags like In Progress and Done let you do the same based on their status.

Sections fit the first example perfectly, grouping screens by features which leaves secondary concepts for tags. You can use tags to distinguish common elements you use like Popups, Dialogs; you can use tags to communicate screens’ status or you even use them to assign screens to certain users. A flexible option that should fit most workflows.

When you select a tag, screens within that tag will still be displayed under their sections, not breaking the visual separation.

How does it work?

While hovering your cursor over screens, you’ll now notice a divider between screens, which provides a super quick way to create a new section. When you click the divider, screens located after the divider will fall into a new section where you can name it directly. You can also select arbitrary screens on the Mac app and right click to create a section from your selection.

You can drag screens to move them between sections, also drag sections to reorder them as you please. It’s also possible to collapse sections, to focus on the ones prioritize — pretty straightforward. 💁

Sections have an optional description field as well, which you can add through the contextual menu on the right.

Here’s a final tidbit: For your existing tags, we’ve added an option to convert tags to a section. Just right click the tag and select Convert to Section.

Make sure to update your apps and give sections a whirl. We’re really enjoying it so far and looking forward to hearing what you all think.

Cheers! 👋

Zeplin is a collaboration tool for designers and developers that generates specs, assets and code snippets from designs, tailored for iOS, Android and Web.