Storyboards organize related layouts into logical groups. They help teams find screens quickly, support focused collaboration, and reduce visual clutter on the canvas. Understanding when to create storyboards versus adding layouts to existing ones helps you maintain clean project organization as complexity grows.

When to Create Storyboards

Create new storyboards when screens share context but represent distinct areas of functionality. A few patterns work well:

• Feature-based organization: Group screens by product feature or business capability. An e-commerce project might have storyboards for Browse (product listing, search, filters), Product Details (PDP, reviews, recommendations), Cart & Checkout, and Account Management. Each storyboard contains the complete set of screens needed for that feature area.
• Journey-based organization: Group screens by user flow or task completion. An onboarding project might have storyboards for Welcome Flow, Account Setup, Profile Completion, and Tutorial Sequence. This approach works well when user journeys are linear and well-defined.
• Platform separation: Create separate storyboards for web versus mobile when designs differ significantly. A responsive website and native app might share data sources but require different layouts. Organizing by platform keeps each implementation focused.
• Team ownership: Assign storyboards to team members or workstreams. One designer owns the homepage storyboard while another builds product pages. This reduces merge conflicts and clarifies responsibility.

When to Add Layouts to Existing Storyboards

Add layouts to existing storyboards when screens extend or support the storyboard's existing functionality:

• Variations of the same screen (mobile vs. tablet product detail pages)
• Modal content or overlays triggered from screens in the storyboard
• Error states or empty states for existing screens
• A/B test variants of screens
• Internationalized versions of layouts

If you're unsure whether to create a new storyboard or add to an existing one, ask: "Would someone working on these screens need to see both at the same time?" If yes, they belong in the same storyboard.

💡💡💡 Tip 💡💡💡
Don't overthink this decision. You can always move layouts from one storyboard to another by dragging them into the desired storyboard after a layout has been created.

Creating and Managing Storyboards

Access the Structure Panel from the left sidebar. Click the "+" button next to the Storyboards header to create a new storyboard. Give it a descriptive name that reflects the screens it will contain.

• The checkmark next to a storyboard name indicates which storyboard is currently active. Creating new layouts adds them to the active storyboard. Switch between storyboards by clicking their names in the Structure Panel.
• Rename storyboards by double-clicking the name in the Structure Panel. Delete storyboards through the context menu (three dots)—this deletes all layouts and components within that storyboard.
• Reorder storyboards by dragging them within the Storyboards section. Reordering affects only the Structure Panel list, not navigation or functionality.

Storyboards and Collaboration

Multiple team members can work in the same storyboard simultaneously. Changes appear in real-time for all users. This supports parallel workflows where designers refine visual styling while developers configure data sources.

Storyboards reduce collaboration conflicts by isolating work areas. A developer building checkout functionality works in the Checkout storyboard without affecting a designer's work on the homepage storyboard. Real-time updates keep everyone synchronized without blocking progress.

The canvas displays only the active storyboard's layouts. This reduces visual clutter and helps teams focus on relevant screens rather than scrolling through the entire project.