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.
Another way to create a section is using the footer menu. You can select the screens and click the “Create section” button on the footer.
💁♀️ 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 a subsection via the footer menu, you can select the screens under a section, click the "Create section" button on the footer, and choose the "Create subsection" option.
To create an empty subsection, you can choose the "Create subsection" option under the "…" options menu of a section:
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 / View in 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 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 the "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
You'll see the section elevator icon on the left of the Sections filter. When you hover over it, the sections in the project dashboard will be listed. This section elevator menu will also be visible when you hover over the reorder icon to the left of a section.
On this menu, you can reorder sections or change a section level by dropping it under another section. This way, 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.