Your layout is where your application starts to take shape. This tutorial focuses on creating your first screen and arranging the foundational building blocks onto the Canvas.

You’ll leave with a working screen, a deeper understanding of the Structure Panel, and a feel for how Shipcode’s editor thinks.

Creating and Naming Your Layout

This process links your visual screen to your project’s organizational Structure. Layouts and Storyboard documentation may be valuable to you as you explore these.

Open Layouts Mode

1. Click the Layouts link in the top header. This displays your project’s flow in the Structure Panel on the left, showing your current Storyboard and all associated Layouts.
2. Create and Name Your New Layout
3. • In the Structure Panel (left side), click + Layout.
   • • ⏰⏰⏰ Shortcut ⏰⏰⏰: Alt + N (Windows) or Option + N (Mac)
   • Your new Layout will appear on the Canvas. Click on its title in the Structure Panel and rename it to something descriptive, like "Product Detail Page" or "User Profile."

Every time you add a Layout or a new Component to the Canvas, assign a clear, descriptive name to it. This discipline is essential for managing complex projects.

Understanding Storyboards

Seen here, two storyboards, one for “Homepage” and one for “Shop”. Each storyboard has unique layouts associated with it.  

Storyboards help organize your Layouts visually on the Canvas and structurally in the Structure Panel.

• Think of a Storyboard like a folder for related screens.
• You can tell what Storyboard you are currently in because it has a checkmark next to it.
• Layouts are unique to the Storyboard that is selected when they are created.

💡💡💡 Tip 💡💡💡

You can drag Layouts and Storyboards inside their respective structure panels to reorder them and manage their visual flow.

Adding Components to Your Layout

This is where you bring your screen to life by placing elements on the Canvas.

1. Open the Component Panel If it’s not already open, click the second icon from the top in the Left Sidebar (it looks like a square inside a square). This will reveal all available Components. We will focus on the Basic Components for now.
2. • ⏰⏰⏰ Shortcut ⏰⏰⏰: Access the Command Palette (Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)) to search for components by name.
3. Drag Components to the Canvas To add a component, drag it from the Component Panel into your Layout on the Canvas.
4. • Start by adding a View component, as it will be your main container.
   • Then, add basic elements like Text and Image.

As you drag, a blue line shows up on the Canvas, indicating exactly where the component will land in relation to its neighbors.

Using the View Component to Create Structure

The View Component is the structural foundation of your design. Use it to:

• Group multiple components together (e.g., placing an Image and two Text components inside a single View).
• Apply styling, like a background color or unified padding, to the whole section at once.
• Make sections easier to move or reuse as a single unit.

Drag a View onto the Canvas first. Then, drag your Text and Image components and drop them inside the View container.

When you create an experience, you can use the layout tree to navigate to internal layers. The layer that is selected reflects on the Canvas. 

💡💡💡 Tip 💡💡💡

Nesting is often easier in the Structure Panel, especially when working with deeply nested or tightly spaced components. Dragging a component from the tree view and dropping it onto another component's title is the most precise way to ensure correct parent-child relationships.

Navigating and Organizing the Structure

The Structure Panel is a critical tool for managing complexity. It shows the hierarchy of your layout as a tree view, reflecting the Nesting you created with Views.

Renaming for Clarity

To keep things tidy and maintain clear parent-child relationships:

1. Open the Structure Panel.
2. Find the Component in the tree.
3. Double-click its name to rename it (e.g., Rename “View” to “Header Container” or “Text” to “Product Title”).

Selecting Nested Components

As your designs become layered, the Structure Panel and specialized shortcuts will be invaluable for selection:

• You can always click the Component’s name in the Structure Panel to select it instantly.
• ⏰⏰⏰ Shortcut ⏰⏰⏰: Hold Cmd (Mac) or Ctrl (Windows) and click on a Component on the Canvas to select the lowest layer at that spot, rather than the topmost. Double-clicking on a component will drill down one level deeper into the layer stack.

You should now have a working Layout with a View component acting as a container, holding a few basic elements. In the next part, we will use the Appearance Panel to give these elements their look and feel.