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.