All Collections
Projects & Screens
Sections & Tags
Organizing screens with Sections
Organizing screens with Sections

Learn how to organize your project using Sections

Okan avatar
Written by Okan
Updated this week

You can have a lot of screens in a Zeplin project, and it can be a bit hard to keep track of these screens. In these circumstances, Sections let you organize your project and group the screens based on features in your project in a visual way.

Creating a section

To create a section, hover your cursor between screens, and you'll notice a divider there, ➗. When you click the divider and select "Split to section”, screens located after the divider will fall into a new section, where you'll also be able to name the section.

You can also select multiple screens and right-click to create a section from your selection.

💁‍♀️ You can create sections automatically by exporting Figma sections. Zeplin will create sections in your project in the same hierarchy as in your Figma file. Learn more here.

Creating a subsection

To better organize your screens, you can use subsections and nest sections up to 3 levels. To create a subsection, click the divider and select “Split to subsection” option. You can also select screens, right-click and choose "Create subsection".

To create an empty subsection, you can choose “Create subsection option under “…” options menu:

Organizing sections

The “…” options button on the right offers you all the options to organize your section. Under this menu, you can:

  • Add screens to flow

  • Add a description about the section / Edit the description

  • Rename section

  • Create subsection

  • Copy Section Web Link

  • Copy Section App URI

  • Download all screens as images

  • Move the section to another project

  • Collapse/Expand all sections

  • Delete the section

☝️ Deleting a section only deletes the section itself, not the screens within the section—the screens move to the section above. If there is no section above, the screens remain ungrouped. If you'd like to delete the screens as well, select “Delete with screens” option.

Expanding/Collapsing sections

To visually prioritize your work, you can expand or collapse the sections. To do that, click the expand/collapse arrow on the right. You can also click on the section bar appearing on the left of the section.

To expand/collapse all sections at once, select "Expand/Collapse all sections" in a section's menu.

Reordering screens and sections

You can drag screens from one section to another to move them between. You can also drag sections and reorder them as you please.

Section elevator menu

When you hover over the section's reorder icon on the left, a section elevator menu will be visible. On this menu, you can reorder sections and change the section level by dropping them under a section. If you do this, the dropped section will be the subsection of the parent.

To dig deeper into this or any other topics related to Zeplin, reach out to our Customer Success crew at success@zeplin.io to schedule a 30-minute call.


Related articles

Did this answer your question?