Explore UI Design mode

Get started designing the UI with the UI Design view mode.

With the UI Design view, you can design the screens of mobile or web applications.

To create the application for which you want to design the interface, go to Apps and click Create Web App if you want to develop a web application or Create Mobile Compatible if you want to develop a mobile application. Then give a name and click the Create button. The created application opens with the UI Design view. In this view, you can add new elements to the screen with the Elements panel on the left, and you can edit the properties of these elements with the Properties panel on the right.

The currently open screen is displayed in the middle of the UI Design view. You can create new screens with the Screens panel and click New Folder for these screens, name the folder, and click the Create button. You can edit the screens in the folder you created.

If you are preparing responsive screen design, you can use free and predefined options for screen width. You can continue your UI design in the web, tablet and phone view you choose.

Kuika has elements in different categories such as Container, DataRepeater, Display, and Input. You can add the relevant element from the Elements panel by dragging and dropping it to the screen.

With the Item Tree, you can view the hierarchy of the screen and its elements. You can also use the BreadCrumb line at the bottom to help with this. In this area, you can view the parent and child relations of the selected element. You can also view other elements and select the relevant element with one click.

When you select an element, the Properties panel on the right is also used to edit the element's parameters. The contents of the Properties panel change according to the properties of the selected element. Make sure the screen is selected so you can view the properties of the currently open screen. You can select the screen and adjust its properties by clicking the bottom edge or outer area of the screen. You can also make visual edits of the selected element with the Styling panel. Via the Styling panel, you can edit spacing, typography, and borders.