Background Patterns

Grids

To create patterns it is important to understand the use of grids and grid systems. This will help you understand how you can design a pattern. Figma has a really good article which shows how to work with grids.

Shapes

Another step for creating a pattern is shapes. You need to find a shape that you can use and which will ideal for repetition. So you can use that shape several times and in different ways. In the Figma blog, you will find a great article by Namika Hamasaki where she explains her techniques and process to design background patters.

PatternPad

PatternPad is a great tool to customize and create your own patterns. You can create unlimited variations, using multiple shapes and colors.

Looper

Looper for Figma is an awesome plugin that helps you generate very interesting patterns. It works with any vector, shape or text layer.

Pattern Hero

Pattern Hero is an awesome plugin to create background patterns in Figma. It lets you to create background patterns, making grids with selected elements or frames.

Paaatterns

Paaatterns by LSGraphics is a really nice library where you can find different background patterns for free. It is compatible with most of the most popular design tools.

FigmaCrush

FigmaCrush is also a great source to look for great background patterns and it is perfect for you if you work with Figma.

Creating a pattern

Sometimes you don't find a pattern that will fit your UI, for those cases you can create you own pattern. In this section we will walk you through the process of creating your own background patterns. In Figma, go to our Figma file. Here, create a new polygon. For this case, a hexagon of 400x400.

Now, press CMND+E so we can flatten the image and reduce the blank spaces on the sides of the shape. Next, change the color of the stroke to #FF00D6 so we can have a good contrast with our canvas. From the dropdown in the stroke settings, select Center.

Copy the hexagon three more times and place one under another with a separation of 100px. Let's add some rulers to every intersection we find between the shapes.

Now that we have the original pattern, let's group them and duplicate them. Make six columns and six new rows, and put them all together so we can create a symmetric shape.

Now create a new Frame and name it pattern, transform it to component. Make sure that the component has constraints and scale in X and Y.

Once the component is created, let's create a background pattern. Take two copies of our pattern, make sure to put them next to each other, and make sure they are aligned. Let's group them, and add a rectangle over the patterns with a gradient of #FFFFFF, 100% alpha. Set the bottom gradient to #FFFFFF with 0% alpha.

Next, select the gradient as well as the components and group them. Also, add a mask.

Now let's add our pattern to the background of our design. You'll see how the pattern takes life with the background gradient.

Finally, reduce the opacity to 30% and add a mask to the shape. Voila!!! You have a cool pattern as part of your UI.

Conclusion

Adding background patterns to your UI can make a positive difference to the final design. It shows the love and eye for detail you have with your craft. Nowadays, with all the resources and plugins you can easily work with them and beautify your projects.