| description |
|---|
Design your first custom component from scratch using Component Designer |
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" %}
 (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png)
We'll go through the whole process of creation step-by-step.
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" %}
After creating the design, you need to bind it with the table data.
{% @arcade/embed flowId="W1tBfHOyhfPBZvQ6y3GW" url="https://app.arcade.software/share/W1tBfHOyhfPBZvQ6y3GW" %}
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" %}
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" %}