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 sections

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 also 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 Subsections

To better organize your screens, you can use subsections and nest sections up to 3 levels. To create a subsection, select some screens and right-click to "Create Subsection" or click on the "…" menu of an existing section.

You can also use the divider to create a subsection. When you click the divider in a section, it'll prompt a menu where you can select the section level.

Organizing sections

To access the section menu, you can click on the "…" button on the right. With this menu, you can:

Add a description about the section / Edit the description
Rename section
Create subsection
Copy Section Web Link
Copy Section App URI
Download all screen images (Only on the Web app)
Move the section to another project
Collapse/Expand all sections (Only on the Web app)
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.

Expanding/Collapsing sections

For visually prioritizing your work, you can expand or collapse the sections. To do that, click on 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 on the Web app.

💁‍♀️ On the Zeplin Mac app, you can right-click on the blank area to expand/collapse all sections.

Reordering screens and sections

You can drag screens to move them between different sections. You can also drag sections and reorder them as you please.

To see the section elevator menu, hover over a section's reorder icon on the left. 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.