🎨Pixel Perfect App

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:

We'll go through the whole process of creation step-by-step.

1. Design your component

1.1 Choose Component Type

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

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.

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.

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.

Step 4: How to locate fields

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

2. Pass and bind data with elements.

After creating the design, you need to bind it with the table data.

3. Conditional visibility (Component Visibility, Conditional Fills)

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

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.