How a designer makes background patterns to push her creativity

We came across Namika Hamasaki's work on her Dribbble portfolio while collecting inspiration from daily UI challenges. Designers are attracted to daily UI challenges because they provide a creative exercise without the constraints of client or management expectations. While the idea and practice of daily UI challenges aren’t new, they often focus on common UI elements like sign up forms or mobile apps. So when we discovered Namika’s daily pattern challenge, it stood out as unique. Her approach around creating patterns was unusual too. She uses atypical color palettes and geometric shapes to create patterns with a distinct look and feel. We reached out to learn more about Namika and her process of creating patterns in Figma. And, keep reading to watch a video that shows how Namika brings her patterns to life. Here is what she had to say, as well as a video of her work in action:

Look for daily inspiration

I love making patterns. So much so, that recently, I challenged myself to create a new pattern every day. While the definition of pattern is “a repeated decorative design,” none of my daily designs look the same. Because of that, people often ask me how I find inspiration, especially when I’m creating something new every day. But really, it’s not that difficult. I tell them to look around. There’s inspiration around every corner of life. If you keep your eyes open, you’ll soon notice unique details in food, architecture, furniture, nature, on your walk to work — inspiration is everywhere. Once you start picking up on those little details, it’s easy to translate them into whatever you’re working on, which for me, is patterns.

I come across so many ideas that I want to make sure I keep track of all of them. Whenever something catches my eye, whether it’s shapes or colors or composition, I take a photograph to reference later as I’m sitting down to design. This habit also ensures I’ve got a library of starting points so that I’m never facing the dreaded blank page.

Create your color palette

This pattern challenge was a great excuse to try new color combinations I was interested in but hadn’t had the chance to use in other work. At work, I'm often restricted to brand color palettes, so for this challenge, I decided to get far outside of the box with my color choices. I’ll often look to photographs for ideas, and once I find an image that inspires me, I use this Figma image palette plugin to extract colors from my photos and generate a color palette.

Make a grid

Once my color palette is figured out, I move onto the next step in my process, which is to set up my grid. This is especially important when you’re working with patterns because you want to make sure your pattern repeats correctly and that you can organize your pattern elements easily. With Figma, I can quickly set up my preferred grid using Layout grid

Our grid pro quo: Everything you need to know about layout grids in Figma

Want to leverage the full power of layout grids in Figma? This article will reveal some different ways to use them, plus share a few handy tips.

Play around with shapes

Now it’s time to have some fun! When I first started the daily pattern challenge, I was drawing my patterns by hand but switched to digital when I became interested in composing patterns using basic geometric shapes. By the end of my pattern designing process, some of the patterns look quite complicated, but they started out as simple shapes like circles, rectangles, and triangles that I strategically placed on my grid. Though I start with the basics, I play around with the shapes to see how different approaches yield different visual results.

For example, I might make a circle and then rotate it by 45 degrees to see how that feels.

Or maybe I’ll get a little more adventurous and play with rotating each semi-circle by a different angle. This is the point in my pattern designing when I get to play and see what feels right.

Here is another exploration of me shifting the circle, to see how that looks and feels.

I will also explore tweaking the color combinations of the pattern, seeing what new & interesting outcomes I might stumble upon along the way.

Make patterns seamless

Once I settle on a pattern I’m happy with, I turn it into a component. Next is a super important step that you can’t forget — turn the clip content option off. Once that’s done, I copy the component and arrange them to fill the frame. Moving the elements within the master component is a great way to explore layouts and lets you quickly figure what you like best.

Duplicate this file for a peek into the entire process used to create Daily Pattern #028. You will get a better look at my exploration of placing my original copied component into my desired pattern.

About Namika

Namika Hamasaki is a Brand & Product Designer based in San Francisco, currently working at All Turtles, a technology company that develops AI products. Her current focus is on creating and fostering brands through visual and interaction design. In her spare time, she likes playing video games, watching anime, and drinking green tea. Find her on Twitter, @haiji505.