When designing with Kuika, you can customize the body colors or background images of elements using the Fill settings. You can easily edit the Fill settings by following the steps below:
1. Element Selection
- In the UI Design view, select the element for which you want to adjust the Fill settings.
2. Access the Fill Section
- Open the Styling Panel and go to the Fill section.
3. Style Management
- Click the ellipsis icon next to Styles in the Fill field.
- You can create and save Fill styles to use in different elements or in different places by clicking Add New Style from the drop-down menu.
- To use an existing style, you can use the Load Style option in the Search Box in the Styles area to select one of the pre-saved ready-made styles.
4. Color Selection
- You can add a color to your element with the Color option in the Custom Style field.
- Color Selection Tools:
- Color Picker: You can use it to select the desired color and its shade.
- Color Codes:
- HEX: You can use six-digit color codes (e.g. #FF5733).
- RGB or RGBA: You can specify direct color values or RGBA values with transparency (e.g. rgba(255, 87, 51, 0.8)).
5. Background Image
- You can add images to the padding area of the elements with the Background Image option.
- To Add an Image:
- Add: Select an image from your device in JPG, PNG, SVG or XML format.
- Generate with AI: Generate images with artificial intelligence.
- AI Image Generation: Click on the “Generate with AI” button and enter the required information for the image you need. You can choose one of the images suggested by the AI and add it to the fill of your element.
6. Updating Fill Settings
- After you adjust the Fill settings, the fill color or background of the selected element is automatically updated.
Element Compatibility by Fill Properties
- All Properties in Some Elements: Some elements support all properties in Fill.
- Limited Property Usage: In some elements, the Fill property may be limited and only support certain settings.
