> For the complete documentation index, see [llms.txt](https://docs.incari.com/incari-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.incari.com/incari-studio/2023.2/demo-projects/prefabs-demo.md).

# Prefabs

In most *HMI* **Projects** you will create, the likelihood of having different variants of a component is quite high. Although this component can be anything from list items to search boxes, in this **Demo** we will be focusing on arguably the most prominent one: buttons.

## Overview

As part of this **Project** you will:

1. [Create a simple button in **Incari Studio**.](#1-creating-a-simple-button)
2. [Turn your basic button into a customizable **Prefab** with **Logic**.](#2-building-your-prefab)
3. [Use **Prefabs** to build a complex **Project** with just a few clicks.](#3-using-prefabs-to-build-complex-projects)

| :information\_source: | **What is a Prefab?** |
| --------------------- | --------------------- |

A **Prefab** in **Incari Studio** is a reusable component that encompasses its own **Logic**, design, and behavior independently from the rest of the **Project**. This means they can be transferred between **Projects** and take many shapes. For more information, see [**Prefabs**](/incari-studio/2023.2/objects-and-types/prefabs.md).

| :warning: | **Before you start** |
| --------- | -------------------- |

In order to follow along with this guide, you will need to be running **Incari** **Studio** version 2022.1 or higher. [Download now](https://www.incari.com/incari-studio/). Also, to follow along, you can download the **Assets** folder for this project using this [link](https://repo.incari.com/incari/prefabs/-/archive/master/prefabs-master.zip?path=Assets).

The fully functional **Project** is available in **Incari Hub** under *Remote Projects*. To start from scratch, keep following from here.

## 1. Creating a Simple Button

Imagine a generic, rounded rectangle button that can have multiple different icons in the middle, something you would see in a lot of *HMI* systems. This can even be used to build a custom keyboard, although there is already a customizable [**On-Screen-Keyboard** **Object**](/incari-studio/2023.2/readme.md) in **Incari**, so there is no need.

Our button will have three states: **'Resting'**, **'Hover'**, and **'Pressed'**.

![Button states.](/files/MbqvjWSG7JECguO4holR)

For this **Demo**, we need 5 different buttons: *Wi-Fi*, *Bluetooth*, *Cellular*, *GPS*, and *Mic*. This is a common layout that you might see everywhere from your phone to your car. These are the final buttons we want to have:

![](/files/mMldQst4cfEzrM1hDKG4)

### 1) Creating the Project

Open **Incari Hub** and [create a **Project**](/incari-studio/2023.2/getting-started/first-steps/creating-a-project.md) using the default parameters. After all is complete, you should be presented with the **Incari Studio** start screen.

![](/files/BXN6V7LKznv6o9WGmWmL)

### 2) Importing the Assets

Go to the **Asset Manager** to import the unzipped files into your **Project** which you downloaded by the above.

![](/files/rVlmSBJxiqCTZPmhGcBy)

### 3) Creating Image Sequences

One of the simplest ways of creating different states for an image is using [**Image Sequences**](/incari-studio/2023.2/toolbox/events/imagesequence.md). In your **Project's** **Assets** folder, you will find them pre-created. Should you wish, you can skip this step. But just to demonstrate how easy it is to create them, let’s make one for the Wi-Fi icon.

![](/files/jq1TVRAkHslg01aSMtt8)

### 4) Creating a Prefab

To create a new **Prefab**, in this case one called **'Button'**, simply right-click on the **Asset Manager** and select `Create Asset > Prefab`.

![](/files/iKrmvZ6OPcLPvp9OKocR)

### 5) Creating our Button

After creating your **Prefab**, double-click on it to open the editor. To add **Assets** to the **Scene**, simply drag them from the **Asset Manager** to the **Scene**. First, we will add the button backgrounds **Image Sequence** ('Button.incseq'). This way, we can later modify its state on hover.

Lastly, add an icon (let’s use Wi-Fi for the first one) and set its `sort index` to 3, so that it’s on top of everything else. Changing its name to Icon from the **Scene Outliner** is also a good way to make sure it stays common.

![](/files/pjE4ZTYccuMTQZtHmb6s)

## 2. Building Your Prefab

### 1) Animating the Prefab with Logic

Open the **Logic Editor** through `View > Logic Editor`.

Let’s start by creating the **Logic** for the **'Hover'** and **'Resting'** states.

![Hover Logic](/files/CDW4zfYK5X3GOAF8sPpe)

And lastly, when we click our button it will change the state of the icon, negate the corresponding variable, and output the new value.

![Click Logic](/files/eHFBEG5sEbrf3DJVHBb6)

Which leaves us with this as the end result:

![End Result](/files/Zr2zqqX5WtiTqGsYRLep)

### 2) Export Your Prefab

Now, in order to use it in different **Projects** and to collaborate with others, let’s export our **Prefab**. This can be done by right-clicking the **Prefab** in the **Asset Manager** and selecting `Export Prefab`.

![](/files/CZ1Spk42mS5ONs5w9pmj)

## 3. Using Prefabs to Build Complex Projects

The real power of **Prefabs** is that you can use them again and again in different contexts. Using the **Prefab** we have just created, let’s build a simple control panel. It should take only a few drag and drops to build this fairly generic dashboard:

![Dashboard with Map in the Background](/files/StM8Dk1Hsxj0MstAeprX)

This **Project** uses the **Assets** from the *Dashboard* folder of the provided files. After adding our map and taskbar backgrounds, we can drag our **Prefabs** from the **Asset Manager** to the **Scene**.

![](/files/K3tMW7zCk1zrBm19xUOE)

After adding all **Prefabs** to the **Scene** and placing them in their respective locations, add the appropriate icons for each of them from the **'Sequences'** folder.

![](/files/7rlPARTZJ2KvWGTto2KJ)

| :warning: | After all is done, do not forget to initialize your **Prefabs**! |
| --------- | ---------------------------------------------------------------- |

![Prefab Initialization](/files/uqXrXMGXuf0NiJtfFU5m)

Finally, we add a slide-in animation for the taskbar.

![Current Group Structure](/files/wgXKKTHxQT1XViidku2H)

![Slide-In Animation](/files/UCaRMl2yXmy3EaWrnBJs)

To see it in action:

![](/files/Ryorh8sNdf2ubZZ5KE4y)

:exclamation: Using our Prefabs, we managed to create a dashboard in mere minutes using **Incari Studio**. As your **Prefab** library grows, building complex projects for any need will only get quicker.