Precision Editor

Updated

In our Design Panel, the Precision Editor enables detailed adjustments to selected elements according to your specific needs. It provides comprehensive control:

Design-panel

  • Flex: Adjust positioning and spacing

  • Dimension: Modify sizes with exact values

  • Typography: Edit font properties and formatting

  • Appearance: Edit the opacity of layers

  • Fill: Customize background colors or images

  • Stroke: Customize borders

  • Interaction: Optional define your elements

1. Edit Flex

  • Change the Display, Flex direction, Flex wrap, Justify and Align from the options.

Edit-flex1

Edit-flex2

2. Edit Dimension

  • To change the Dimension of a selected element or isolated text, enter pixel value in the size field.

    Editing-Dimension

3. Edit Typography

  • Select an element to change the typography of its text.

  • Select Font family from the dropdowns and options.

    Selecting-typography-style

  • Type an RGB value (e.g., rgb(45,45,45)), enter a hex code like #FF00FF, or use Color selector to set the font color.

    Selecting-typography-color

4. Edit Appearance

  • Change the opacity of selected elements from 0-1 on the appearance panel.

Editing-apperance1

Editing-apperance2

5. Edit Fill

  • Type an RGB value (e.g., rgb(45,45,45)), enter a hex code like #FF00FF, use color selector or chossing Gradient filter to fill the background of selected elements.

    Filling-backgrond

  • Click the [Images] button to customize images.

    Upload-image-button

6. Edit Stroke

  • To customize border radius of selected elements, type the value on the stroke panel.

    Editing-stroke

  • Select different border styles from the dropdown.

    Selecting-border-style

Tips

To define how the generated pages responds to the user actions-like when a user clicks, types or moves the mouse on the page, you can edit the properties in the 'Interaction' for different elements.

Edit-interaction

In Design Panel, the Precision Editor empowers you to create and design your UI project. Try it now and experience the difference it makes!