How to build a simple Pattern in Figma

or better say an easy and fast way to design pattern without Illustrator!

Donatella Balloni
2 min readNov 25, 2018

During the studies in UX/UI design at Codaisseur design Academy, I developed with my colleague Maraini Macedo, and 3 code developers, a web app called “Kid to Kid”. A Tinder-style web application, to be delivered in 4 days.

We decided to fill the background pages with a nice pattern using icons downloaded from flaticon.com because we didn’t have enough time to design customised ones.

Icons downloaded from Flaticon

There are endless ways to create a pattern but at this time, this was my quickest way to make it a simple and adaptable to all circumstances during our workshop.

Take a look at the video below, I hope it will be helpful to understand how to design a pattern in an easy way:

Pattern design made with Figma

And here where we applied it:

Please, if you have other ideas to design pattern in a different way on Figma, leave me a comment, it will be helpful to everybody :)

--

--

Donatella Balloni

I am a UX/UI designer with a background in Industrial Design creating emotions through Colours, Materials, and Finish to the digital world.