# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jetadmin.io/getting-started/pixel-perfect-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.