Introduction

Thank you for your interest in Layerz App Designer and for visiting this documentation. From here on, we will refer to Layerz App Designer simply as Layerz.

Layerz is an app for designing apps.

While there are many ways to design apps, Layerz takes a different approach from other design tools.

Design tools traditionally provide a way to freely draw on a canvas. Free-form tools allow designers to create anything without limits. However, in app design, this freedom often creates a gap between the design and the actual product.

Freely drawn designs are then translated into code by developers, and during this process, certain parts cannot be implemented, ultimately leading to decisions to change the design.

In Layerz, every design action is done in the same way an app is actually constructed, so your design immediately becomes an app.

To achieve this, when you open the editor, you see an iPhone-sized Scene where you can place desired design elements using Drag and Drop. The design elements added are always arranged neatly on the Scene using methods like Auto Layout, Stack, and List.

In addition to designs created by the designer, most of the basic Components provided by the OS as part of an app are also available. These include basic Components like Label, Button, and Switch, as well as more complex Components like Web View and Map View.

With Layerz, you naturally learn how apps actually work and can quickly create practical app designs.

App Design

Layerz allows you to use most of the native methodologies and UI Components provided by the OS to create app designs that fit the OS as quickly and easily as possible.

A Scene can be defined as a single screen displayed to the user.

Within Layerz, you can create multiple Scenes, design each Scene independently, and then connect them using Tab Bar, Navigation Push, Modal, etc. to create a flow identical to an actual app.

This enables perfect Prototyping.

Why Layerz is an iPad App

Layerz is an iPad App. Yes, we know. A desktop solution is essential for maximum productivity. That's why we are also preparing a Mac App.

However, Layerz uses iOS UI Components directly to perfectly demonstrate that your design works exactly as an app. To fully support both productivity as an editor and execution as the resulting app, we first built the iPad version.

All features work 100% on the iPhone version as well. While editing on iPhone may be somewhat inconvenient due to screen size constraints, the powerful advantage is that Preview provides an experience perfectly identical to running a regular app.

Feature List

• Scene Edit
  • Provides screen-by-screen design. All design elements are functionally connected organically.
• List Edit
  • The most frequently used design element is arranging information into lists. You can design multiple sections with different layouts within a single scroll.
• Stack Edit
  • While design elements can be individually arranged using Auto Layout, using Stack allows you to create more structured layouts.
• UI Component
  • You can use OS-provided UI Components directly.
  • Supported elements include:
    • Image, Blur View, Label, Button, Text Input, Activity Indicator, Segmented Control, Slider, Switch, Stepper, Page Control, Progress, Map, Color Well, Date Picker, Calendar, Web View
    • All UI elements have editable properties.
• Custom Design Component
  • Designed layouts can be saved as separate Components for reuse.
  • When a Component is reused, it is called a Component Instance or Instance.
  • Most detailed properties of an Instance can be overridden.
• App Navigation
  • Multiple Scenes can be connected through Tab Bar, Push Navigation, Modal, etc.
• Color System
  • Allows you to manage custom Colors.
  • All Colors can have both Light Mode and Dark Mode colors specified simultaneously.
  • OS-provided default Colors can be used directly. Simply using background and Label colors immediately supports Dark Mode.
  • Supports iOS's Tint Color system.