Overview & Core Design Concepts

This series will walk you through the essentials of layout creation in Shipcode.

Welcome to the Shipcode visual development environment. To build anything with confidence, from a simple screen to a complex application, you first need to understand the relationship between the major tool panels and the core building blocks.

This document serves as your essential guide to the key concepts you’ll use in every future tutorial, ensuring you have the right vocabulary before we start building.

The Editor: Your Workspace

The Shipcode Editor is organized into four primary regions designed to facilitate a smooth visual development workflow:

Canvas: This is your main editing space, where you drag, drop, and visually arrange components to build your screen. This is where you see your Layout come to life.
Structure Panel (Left Sidebar): This panel provides a tree-view hierarchy of your project's organization. It is essential for managing your overall screen flow and for selecting deeply nested components on your active Layout.
Component Panel (Left Sidebar): This is the library of building blocks you can drag onto the Canvas. It contains everything from basic elements like Text and Image to specialized containers like View and Data Zone.
Appearance Panel (Right Sidebar): The central hub for styling. Once a Component is selected on the Canvas (or in the Structure Panel), you use this panel to adjust its visual properties, including color, size, spacing, and layout behavior.

Core Shipcode Concepts

Every action in Shipcode revolves around three foundational concepts: Structure, Layout, and Appearance.

Structure

Structure defines how your application is organized on a macro level—how one screen relates to another.

Storyboard: Think of a Storyboard as a folder or a scene for organizing related screens. For example, a "Product Page" Storyboard might contain separate Layouts for the mobile product view, the tablet product view, and the product review form. This provides a visual container for organizing your work.
Layout: A Layout is a single screen or view within a Storyboard. This is the primary unit of design you will be building. Every distinct page a user sees in your app is a Layout.

To navigate to your screen management area, click Layouts in the top header.
In the Structure Panel, you can click + Layout to add a new screen to the currently selected Storyboard.

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

Layout

Layout refers to the arrangement and grouping of elements within a single screen.

Component: The fundamental, reusable building block of your application’s interface. Whether it’s a piece of Text, an Image, or a more complex element, all visual parts are Components.
View Component: This is arguably the most important component you will use. The View acts as a flexible container—similar to a <div> in web development. You use it to:
- Group multiple components together (e.g., grouping a product image and its price text).
- Apply styling, such as a background color or unified padding, to an entire section.
- Make sections easier to move or reuse as a single unit.
Nesting: This is the practice of placing one component (or View) inside another. Nesting creates a hierarchy that controls how elements behave and allows complex designs to be broken down into manageable parent-child relationships. Nesting is often easier to manage directly in the Structure Panel's tree-view.

Appearance

Appearance refers to the visual styles and properties applied to a component. This is controlled entirely through the Appearance Panel on the right.

Typography: Controls the look of text, including font family, size, line height, weight, and text alignment.
Spacing: Controls the distance elements are from each other and their containers. This is broken down into two concepts:
- Padding: Adds space inside the component, between the content and its border.
- Margin: Adds space outside the component, separating it from other components.
Effects: Properties that add visual emphasis or polish to a component, such as a Border, Corner Radius (for rounded corners), or a Box Shadow.

Introduction to Reusable Components

As you begin to build sections and screens, you’ll naturally create patterns you want to use repeatedly (like a product card or a navigation bar).

Reusable Components (Custom Component) are a Layout or a group of Components that you save to your project's library for use anywhere. When you update the original Reusable Component, every instance of it across your project updates automatically, which is the core principle of building scalable applications.

Helpful Shortcuts

As you navigate the Canvas, these shortcuts can help you move faster:

Pan the Canvas: Hold the Spacebar and use your mouse selector.
Zoom In: Windows – Ctrl + = | Mac – Command + =
Zoom Out: Windows – Ctrl + - | Mac – Command + -
Reset Zoom: Windows – Ctrl + 0 | Mac – Command + 0
Select Deeply Nested Layer: Hold Cmd (Mac) or Ctrl (Windows) and click on the component. This allows you to select a component layered beneath another.
Open Command Palette: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows). This allows you to quickly search for components by name.

Did this answer your question?