Build Your Screens

You are here:
< Back

 

The KocoConnect Screen Builder is organized similarly to other common graphic design programs, as it has a canvas and control panels. The difference is KocoConnect also makes the designs functional on a mobile device, so the mobile app design capabilities are more extensive.  The screen builder is organized with two panels on the left that control constructing the design called the Components Panel and Layers List and a single panel with two tabs on the right for modifying the design called the Layout and Properties Panel.


The Components Panel on the Left

Components are the building blocks of your app. The KocoConnect Screen Builder gives you creative flexibility with freeform design by dragging components onto and around your screen.  Unlike other app builders, you are not restricted to a particular layout.

Each component category opens a menu of options. By clicking on the menu item, you can add visual elements like Text and Assets, interactive elements like scrolling Containers, and functional elements like Buttons and Data Sources.  To place a component in its own layer, just click on the component.  To place a component in a particular location or layer, click and drag the component to the desired destination.

 

 

Learn more about how to build screens with Components.


The Layers List on the Left

The Layer List contains all layers on the current screen. Layers can be made of one component or a group of components like a container with a text box and image inside of it.

The Layers order in the list affects the front to back arrangement.

A layer at the top of the list is arranged in front of a layer further down the list.  The same is true for grouped components within a layer. Visually stacking components gives you a great deal of design flexibility.

 


Layouts – Designing for Different Screen Sizes

When mobile programmers build apps, they have to ensure the screens display correctly on varying screen sizes.  This is called Responsive Design. KocoConnect automates responsive design for you by providing controls in the Layouts Panel.

Learn more about responsive design using the layouts menu.

Properties

From Layouts, toggle using the tabs to the Properties Menu.  Here you can modify the style of your components such as changing colors, cropping, adjusting text size and applying actions to buttons.  Each component has a unique set of properties.

 

 

Learn more about properties of the different components:

  • Containers
  • Text
  • Assets
  • Forms
  • Buttons
  • Data