The Layouts Editor is where you can manage the look and feel of your experience. It consists of a Header, Sidebars, and a Storyboard.

Header

The Header, shown in blue, in the center of the header you will see 3 links for quick access to layouts mode Layouts, flows mode Flows, and project settings Settings.

While in a project, the logo is always on the top left, next to your project name. You can click the logo to return to the Project Dashboard.

To the right of your project name, there is an icon that indicates your project's state. You will see a rotating syncing icon when your project is syncing with the cloud. When your project is up to date, you will see a cloud with a check mark inside it.

On the right side of the Header, you will see several elements. When multiple users are active in the project with you, their avatars will appear here. If there are no additional users in the project, you will not see any avatars.

Next to the avatars are action buttons for Undo, Redo, and Preview. Undo moves one step back in your chain of changes, while Redo moves one step forward. Preview provides a QR code that can be used with the Shipcode Preview App, or clicked to navigate to the published version of the project.

Your avatar will be displayed at the far right of the Header. When clicked, it opens a menu to access your “Account Details”, “Project Settings”, or “Sign Out”.

Left and Right Sidebar

The Left Sidebar, shown in yellow, and the Right Sidebar, shown in red, have tab icons that open a flyout panel when clicked, in the image above, flyout panels for both the left and right sidebar are open.

The left tabs contain project-wide settings such as Assets and Versions. You can also manage your project's structure and browse the list of available Components.

• Structure
• Components
• Assets
• Versions

The right tabs give you the ability to configure the selected layout or component on the Canvas.

• Appearance
• Settings
• Universal Access
• Interactions
• Layout

The Canvas

The Canvas, shown in gray (and titled "Storyboard", is the assembly area where you can preview the screens within your application, add components, reorder components, and more.

Moving around the Canvas

You can pan around the Canvas using horizontal and vertical scrolling if you have a trackpad. If you do not have a trackpad or mouse with horizontal scrolling, you can hold the spacebar and click+drag on the Canvas with your mouse.

To zoom in, you can press Control+= (Windows) or Command+= (Mac). To zoom out, press Control+- (Windows) or Command+- (Mac). You can also zoom in and out smoothly by holding “Control” (Windows) or “Command” (Mac) while moving your mouse’s scroll wheel up and down.

The Canvas presents a single Storyboard at a time. To switch between Storyboards or to create a new Storyboard, navigate to the Structure Panel in the Left Sidebar.

Adding Layouts

To add a new Layout, make sure the desired Storyboard is active. You can then click the “+” icon next to the “Layouts” section of the Structure Panel. You may also use the “N” key shortcut to create a new Layout in the current Storyboard. 

Refer to the Shortcuts section to view the list of shortcuts available to you within the Canvas.