UI

Appfarm Create's UI designer is a visual tool for structuring and designing the user interface of an app. Simply drag and drop UI components and connect them to data, app flow, and business logic to rapidly compose an interactive interface.

Good to know

The UI/UX crash course in our Showroom contains best practices for UI and UX design, and how to make clean and user-friendly apps.

The UI designer consists of four main sections:

1. UI components

2. Views

3. Layout designer

4. Component properties

The UI designer in Appfarm Create

1. UI components

The UI components pane contains the full library of UI components that can be added to an app.

To add a component to a view, either:

• Click the component to add it as a child of the selected element in the view tree, or

• Drag and drop the component into either the view tree or the layout designer.

pageUI components

2. Views

In the Views pane is a list of all the user interfaces, or views in the app. There are three types of views in Appfarm Create:

• View, a standard page/screen;

• Dialog, a modal window placed over a view often used for user confirmation or data entry;

• Drawer, a persistent element or temporary modal window often used for navigation.

To add a view to an app, at the top of the Views pane, either:

• Click the plus icon to immediately add a new standard view, or

• Click the arrow icon and select the type of view you'd like to add.

Views consist of UI components that can be in a tree structure by nesting them inside Containers. Branches of the tree can be expanded and collapsed. Select a component to highlight the preview in the layout designer and show the available properties in the properties pane. Right-click a component in the tree, or use keyboard shortcuts to perform operations like copy, paste, and delete.

By default, your most recent (visited) views or dialogs are displayed at the top of the Views pane ("Recent"). You may turn this feature off from the Preferences in the top-left menu. You may also right-click a view or dialog to pin it as a Favourite at the top of the Views pane.

pageViews

3. Layout designer

The selected view, dialog, or drawer is displayed in the layout designer. You can adjust the settings for responsive design and preview the app in different screen sizes.

pageLayout designer

4. Component properties

The properties pane displays the available properties for the selected UI component over four tabs:

• Component properties

• Style properties

• Conditional style properties

• Motion properties

pageComponent properties