Introduction

Thank you for your interest in Layerz and for taking the time to read this guide.

Layerz is a design tool for iPad, iPhone, and Mac that lets you design an app the way it actually works — interactive, native, and real, not a picture of an app.

There are many ways to design an app, but Layerz takes a different approach from other design tools.

Design tools have traditionally offered a way to draw freely on a canvas. A free-form tool places no limits on the designer's creativity and lets you design anything you want. In app design, however, this is also what creates the gap between the design and the actual product.

A freely drawn design is later translated into code by a developer, and during this process some parts turn out to be impossible to implement, eventually forcing decisions to change the design into something else.

In Layerz, every act of designing follows the same rules a real app is built on, so that gap never opens: what you design is exactly what you experience in live preview.

To make this possible, opening the editor shows you an iPhone-sized Screen, where you place the design elements you want by Drag and Drop. The design elements you add are always kept neatly arranged on the screen — the Screen — using methods such as Auto Layout, Stack, and List.

And beyond the designs you create yourself, you can use most of the standard Components that the OS provides — real native components, not lookalikes. These include basic Components such as Label, Button, and Toggle, as well as more complex Components like Web View and Map View.

With Layerz, you naturally come to understand how an app actually works — and because you design with the platform's own building blocks, you are guided toward designs that follow Apple's Human Interface Guidelines by construction.

App Design

To make designing an app that fits the OS as fast and easy as possible, Layerz lets you use most of the native methodologies and UI Components that the OS provides.

A Screen can be defined as a single screen shown on the display.

In Layerz, you can create multiple Screens, design each one independently, and then build the same flow as a real app using Tab Bar, Navigation Push, Modal, and more.

This makes perfect prototyping possible.

Why Layerz Is an iPad App

Layerz is fundamentally an iPad app. But you can use it in exactly the same way on iPhone and Mac.

The reason Layerz is built around iOS is that the design output itself is made up of iOS Components. You can design using many Components directly — including Tab Bar, Navigation Bar, and Toggle Switch — and as new versions of iOS upgrade the design of these Components, those design changes are reflected as-is.

Every feature works 100% on iPhone and Mac as well.

On iPhone, the editing features can be a little inconvenient to use because of the limited screen size, but a powerful advantage is that when you Preview, your design feels exactly like the real thing, right in your hand.

On Mac, you can work more comfortably on a larger screen using a mouse. Mac also offers a Run mode in addition to Preview, so you can experience your design in its own window — a great way to explore iOS design on the Mac.

Anatomy of a Layerz Design

In Layerz, a design is three things brought together in one place — Design, Data, and Behavior. And it comes to life instantly in live preview, with no build step.

• Design — Compose screens by placing native UI components on a Screen.
• Data — Define the information your design handles and bind it to the screen. → What is Data
• Behavior — Define "when this happens, do this" visually, using Action Flow. → What is Action Flow
• Connect — Communicate with real APIs to work with live data. → Importing OpenAPI / Swagger