# 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.

{% hint style="info" %}
**Good to know**

The [UI/UX crash course](https://showroom.appfarm.app/ui-ux-design) in our Showroom contains best practices for UI and UX design, and how to make clean and user-friendly apps.
{% endhint %}

The UI designer consists of four main sections:

1. [UI components](#id-1.-ui-components)
2. [Views](#id-2.-views)
3. [Layout designer](#id-3.-layout-designer)
4. [Component properties](#id-4.-component-properties)

<figure><img src="https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FPNuYNMCsH7PEOL5ZQrnJ%2FUntitled%20drawing.png?alt=media&#x26;token=25c50a87-ae44-461c-962d-63f975f561de" alt="A screenshot of the UI designer in Appfarm Create"><figcaption><p>The UI designer in Appfarm Create</p></figcaption></figure>

### 1. UI components

The UI components pane contains the full [library of UI components](https://docs.appfarm.io/library/ui-components) that can be added to an app.

To add a component from the library 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.

{% content-ref url="../../library/ui-components" %}
[ui-components](https://docs.appfarm.io/library/ui-components)
{% endcontent-ref %}

To add a [custom UI component](https://docs.appfarm.io/reference/apps/ui/shareable-ui-components) to a view:

* Drag and drop the component from the list at the bottom of the Views pane into the view tree.

{% content-ref url="ui/shareable-ui-components" %}
[shareable-ui-components](https://docs.appfarm.io/reference/apps/ui/shareable-ui-components)
{% endcontent-ref %}

### 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](https://docs.appfarm.io/reference/apps/ui/views), a standard page/screen;
* [Dialog](https://docs.appfarm.io/reference/apps/ui/views/dialog), a modal window placed over a view often used for user confirmation or data entry;
* [Drawer](https://docs.appfarm.io/reference/apps/ui/views/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](https://docs.appfarm.io/library/ui-components/container). 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](https://docs.appfarm.io/reference/appfarm-create/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 ](https://docs.appfarm.io/reference/appfarm-create/user-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.

{% content-ref url="ui/views" %}
[views](https://docs.appfarm.io/reference/apps/ui/views)
{% endcontent-ref %}

### 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.

{% content-ref url="ui/layout-designer" %}
[layout-designer](https://docs.appfarm.io/reference/apps/ui/layout-designer)
{% endcontent-ref %}

### 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

{% content-ref url="ui/component-properties" %}
[component-properties](https://docs.appfarm.io/reference/apps/ui/component-properties)
{% endcontent-ref %}