How To Fill Container In Figma

by

Figma, a widely-used and powerful interface design tool, is known for its intuitive interface and wide range of features. Whether you’re new to design or an experienced professional, knowing how to fill a container in Figma is an essential skill. In this tutorial, we will guide you through the process step by step.

What is a Container in Figma?

In Figma, a ‘container’ is a broad term that typically refers to any shape or object that can hold other objects within. Design elements like rectangles, circles, and custom shapes can be used as containers. Filling these containers aids in differentiating them from the rest of your design, allowing you to better showcase your creativity.

How to Fill a Container in Figma

Filling a container in Figma is a straightforward process. Here is a step-by-step guide:

  1. Firstly, select the container you wish to fill. You can do this by clicking on the container directly or by finding it in the layers panel and selecting it from there.
  2. Once you’ve selected the container, look at the properties panel on the right side of the screen. There, you will find the ‘Fill’ option.
  3. Click on the small square box next to ‘Fill’. This will open a color palette.
  4. You can either choose a color from the palette or input a specific hex color code if you have one. Once you’ve selected a color, the container will be filled with your chosen color.

Here’s what this process looks like in code:

            <Container id="container1">
                <Properties>
                    <Fill type="color">
                        #hex color code
                    </Fill>
                </Properties>
            </Container>

Final Thoughts

That’s all there is to it! Now you know how to fill a container in Figma. Although we’ve focused on color fills in this guide, it’s worth noting that Figma also offers gradient and image fills for even more design possibilities. Don’t be afraid to experiment and let your creativity run wild!