# Pixel Perfect App

To familiarize yourself with how `Customize with Designer` works, let's build a simple design:

{% embed url="<https://www.youtube.com/watch?v=-u6X4gpCWj8&t=16s&ab_channel=JetAdmin>" %}

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FYng8zM0ZGGY0NROf2BMS%2Fimage.png?alt=media&#x26;token=44193e64-9b55-477a-90d8-ff6c8f1661da" alt=""><figcaption></figcaption></figure>

We'll go through the whole **process of creation** step-by-step.&#x20;

### **1. Design your component**&#x20;

**1.1 Choose Component Type**

Identify the type of component you want to create, whether a button, card or any other UI element.

{% @arcade/embed flowId="e986hg2hXRjuOfMN1uGx" url="<https://app.arcade.software/share/e986hg2hXRjuOfMN1uGx>" %}

**1.2 Customization with Designer**

**Step 1: How to add shapes**

Select the shape you want to utilize from the menu on the top left. In the example, we will use Rectangle and Ellipse shapes.

{% @arcade/embed flowId="tHEIVQEXp7tmHjPOqRY9" url="<https://app.arcade.software/share/tHEIVQEXp7tmHjPOqRY9>" %}

**Step 2: How to add parameters**

To add a parameter to the card, you need to use the menu on the top left. After adding a parameter you need to specify type and test value.

{% @arcade/embed flowId="K4g9WpLVlMqNcnv0XFvS" url="<https://app.arcade.software/share/K4g9WpLVlMqNcnv0XFvS>" %}

**Step 3: How to add borders**

You can add borders to the shapes or reshape them. To add borders or reshape, choose the shape and use the menu on the right.

{% @arcade/embed flowId="tJuH1P3DuoWr1KGhdUR5" url="<https://app.arcade.software/share/tJuH1P3DuoWr1KGhdUR5>" %}

\
**Step 4: How to locate fields**

Use the tutorial below to locate the fields for the parameters.

{% @arcade/embed flowId="xLtlwzXqhNBYs88MUNh0" url="<https://app.arcade.software/share/xLtlwzXqhNBYs88MUNh0>" %}

### **2. Pass and bind data with elements.**

After creating the design, you need to bind it with the table data.&#x20;

{% @arcade/embed flowId="W1tBfHOyhfPBZvQ6y3GW" url="<https://app.arcade.software/share/W1tBfHOyhfPBZvQ6y3GW>" %}

### **3. Conditional visibility (Component Visibility, Conditional Fills)**

For changing the visibility of a component please follow the steps as shown below.

{% @arcade/embed flowId="6ya9Zo2mBFCpaLEhofSA" url="<https://app.arcade.software/share/6ya9Zo2mBFCpaLEhofSA>" %}

### **4. Responsiveness**

To check how your design will respond to different screen sizes, please follow the steps shown below. Ensure that it maintains its integrity and functionality across various devices.

{% @arcade/embed flowId="hIz9gNH1QAh9z5gLziPW" url="<https://app.arcade.software/share/hIz9gNH1QAh9z5gLziPW>" %}