Structure Panel Overview

The Structure Panel organizes your project's visual hierarchy. It's where you create storyboards to group related screens, build layouts that become your application's pages, and manage the component tree within each layout. Understanding this organizational system helps you build scalable projects and collaborate effectively with your team.

Why Organization Matters

Projects grow quickly. What starts as a few screens becomes dozens of layouts, each containing nested components with complex data flows. The Structure Panel gives you control over this complexity through intentional organization.

• Collaboration: Multiple team members work simultaneously on different storyboards without conflicts. Designers can refine the checkout flow while developers build the product catalog.
• Maintenance: Clear organization makes updates faster. When you need to modify all product-related screens, they're grouped together rather than scattered across your project.
• Navigation Clarity: Your organizational structure is separate from your navigation structure. Storyboards group screens logically for your team. Routes (configured in Project Settings) and Flows control how users move through your application.

Organizational Hierarchy

The Structure Panel reflects three levels of organization:

• Storyboards group related layouts together. Think of them as folders for screens that share context—a checkout flow, a user profile section, or an onboarding sequence. Storyboards are purely organizational. They help your team find screens but don't control how users navigate through your application.

• Layouts are individual screens or views. Each layout becomes a page users see in your application, or a reusable section like a modal body or embedded content. Layouts contain components arranged on the canvas.
• Components are the building blocks within layouts. Text, images, buttons, and containers nest inside each other to create your interface. The component tree shows parent-child relationships that control how elements behave and display.

How Structure Relates to Navigation

This distinction trips up new users:

• Storyboards organize your work - group storyboards by feature area or user journey for your team's benefit.
• Routes navigate your application - configure Routes and Flows to create the user experience.

You might organize all product-related screens in a "Shop" storyboard—product listing, product detail, cart, checkout. But users navigate this journey through Routes you configure in Project Settings and transitions you build in Flows. A user clicking "Add to Cart" triggers a Flow that navigates to a specific Route, regardless of which storyboard contains that layout.

Working with the Structure Panel

Access the Structure Panel from the left sidebar (first icon). The panel shows your project's storyboards and layouts in a tree view. Click any item to select it on the canvas.

Create new storyboards with the "+" button next to the Storyboards header. Create new layouts with the "+" button next to the Layouts header—new layouts appear in the currently selected storyboard.

Reorder storyboards and layouts by dragging them within their sections. Rename items by double-clicking their names. Delete items through the context menu (three dots).

The Structure Panel updates in real-time as team members work. Changes made by others appear immediately, supporting collaborative workflows where multiple people build simultaneously.