Static UI elements

Static UI elements are serving design and usability of apps. They include text boxes, shapes, icons, and images. Apart from icons, those elements don't offer any additional functionality.

Text box

To add text:

1. Click on the text box icon in the top bar.
2. Hover above the UI editor and click where you want to place the text box.

3. Double click into the text box to write text and change formatting.

Use the appearing top bar to change font, font size, color, and other formatting of the text box.

Table

To add a table:

1. Follow steps 1-3 of the text box instructions.

2. Click on the appearing vertical dots icon in the top bar.
3. Click on Insert table.

4. Define the number of columns and lines of the table.

5. Click OK.

Shape

For your app, you can use the following shapes:

• Arc

• Circle

• Ellipse

• Rectangle

• Ring

• Star

To add a shape:

1. Click on the shapes icon in the top bar.
2. Select a shape from the list.

3. Hover above the UI editor and click where you want to place the shape

Access the shape settings via the settings icon (⚙️) in the top bar to configure a shape. In the shape settings, you can:

• define border weight

• define opacity

• enable shadow

• add an animation (appear on hover)

• adjust fill color

• adjust border color

• add an identifier

Icon

1. Click on the icons icon in the top bar.
2. Select an icon from the dropdown.

3. Hover above the UI editor and click where you want to place the icon.

Access the icon settings via the settings icon (⚙️) in the top bar to configure an icon. In the icon settings, you can:

• pick a style (solid, regular, light, thin, duotone)

• adjust fill color

Icons can be used for in-app navigation, too. Simply drag and drop a page or subpage using its handle onto an icon to make it a page link.

Image

To add an image to the UI, upload it to resources first. Now, you can drag and drop it from the file manager to the desired place in the UI editor.