Kuika's Fill feature allows you to customize the body colors and backgrounds of elements. With this feature, you can fill the inner surfaces of elements with solid colors, use patterns or images, and attach files from your device. The flexible nature of the fill feature helps you create designs that are both aesthetically rich and enhance the user experience.
Fill Features
Color
You can fill the body of the element with a specific color.
You can choose the hue and brightness of the color through the Color Picker.
HEX: For example, #FF5733.
RGB/RGBA: For example, rgb(255, 87, 51) or rgba(255, 87, 51, 0.5).
Style
Create New Style: Save and reuse your color tones.
Style Loading: You can ensure design consistency by loading saved styles.
Image Library
You can add images in JPG, PNG, SVG, XML formats to the background of the elements.
You can customize the use of images with position and repeat settings.
Image Library With AI in Fill
With AI support, you can create custom background images.
Generate With AI: Define the image you need, select the recommended images and click the cloud icon to add it to your library.
Repeat
You can repeat the background image in horizontal or vertical orientation.
Especially useful for patterned backgrounds.
Position
You can use either Center, Right, Left, Top, Bottom.
The position of the image may vary depending on the screen or browser size.
Advantages of Fill Features
Flexibility: Provides design freedom by switching between colors and backgrounds.
Consistency: With saved style templates, design integrity can be ensured throughout the application.
Artificial Intelligence Support: With AI, you can save time and produce unique visuals.
Dynamic Usage: You can shape the background designs according to your needs with repetition and positioning options.
Making Fill Settings in Elements
Log in to the Kuika platform and select your project from the Apps screen.
Go to the UI Design module.
Select the element whose fill settings you want to edit.
Open the Styling panel and go to the Fill section.
Click the ellipsis icon in the Styles area.
Create a new style with Add New Style or load a saved style with Load Style.
Choose the color with Color.
Add an image from your device with Background Image or create an AI-powered image with Generate with AI button.
After you complete the settings, the element's fill color or background is automatically updated.
Element Compatibility by Fill Properties
Full Support: Some elements support all Fill properties.
Limited Support: Some elements may only support certain fill settings.
Kuika's Fill feature adds aesthetics and functionality to your designs with its user-friendly interface.