Fill

Kuika's Fill feature is a powerful tool that allows you to customize the body colors or backgrounds of elements in your design. With this feature, you can fill the inner surfaces of elements with solid colors, use images or patterns as fills, and add image files from your device. The flexible nature of the fill feature helps you create designs that are both visually rich and improve the user experience. In this tutorial, you will learn how to fill with color, create backgrounds using external images, enhance fills with patterns and textures, and integrate your own images into your designs.

Fill Features

1. Color

You can fill the body of the element with a specific color. For this

• Element Selection: Select the element you want to add color to.
• Using Color Picker: You can choose the hue and brightness of the color using the Color Picker in the Fill section.
• Color Codes:
  • HEX: For example, you can use six-digit codes such as #FF5733.
  • RGB or RGBA: For example, you can use rgb  (255, 87, 51) or rgba(255, 87, 51, 0.5) to add transparency.

2. Style

You can create a style template to reuse frequently used color tones in different elements:

• Create New Style: You can save your color tones and use them in different elements to save time.
• Style Upload: You can easily upload your saved styles to ensure design consistency.

3. Image Library

You can add images to the background of elements. Image Library supports the following formats:

• JPG, PNG, SVG, XML.
• You can use the position and repeat options to use the added background image more effectively.

4. Image Library With AI in Fill

With Kuika's AI assistant you can create custom images for the background of screens or elements.

• Generate With AI: Click this button and type detailed information about the image you need in the Prompt Input box.
• Suggestion List: AI will suggest images based on the information you provide. You can add your favorite images to your image library by clicking on the cloud icon.

5. Repeat

Depending on the size of the background image you add, you can have the image displayed repeatedly according to the width or height of the screen.

• The image repeats horizontally or vertically depending on the width of the browser on the screen.
• This is especially useful for patterned or textured backgrounds.

6. Position

You can adjust the position of the image you added. Position settings:

• Center: The image is positioned in the center of the screen.
• Right: The picture is positioned on the right side of the screen.
• Left: The picture is positioned on the left side of the screen.
• Top: The picture is placed at the top of the screen.
• Bottom: The picture is placed at the bottom of the screen.

Note: The positioning of the picture may vary depending on the screen or scanner size. For example, when Position → Center is selected, the image remains in the center area depending on the browser width.

Advantages of Fill Features

• Flexibility: You can increase your design freedom by switching between colors and background images.
• Consistency: With saved color and style templates, you can ensure design integrity across the app.
• Artificial Intelligence Support: You can save time and create unique designs by generating background images with AI.
• Dynamic Usage: You can shape background designs according to your needs with repetition and positioning options.

Kuika's Fill feature provides ease of use while increasing the visual impact of your designs with its user-friendly interface and powerful tools.