A few people have asked me how to design these simple grid backgrounds. I’ve put together a thread on how you can do this yourself. It’s really easy. 👇🏻
⚡️ Begin with drawing your shape. It can be a square, rectangle, or whatever you want. For the nature of this tutorial, I’ll try to replicate the image in the first tweet.
✨ Duplicate the square and then add them into Auto-layout. I do it this way so it’s easy to move the squares around later if I don’t like the added details.
🤝 Once you have a row of squares, it’s time to add some columns. Duplicate that layer in the above tweet and repeat the process.
🫶🏼 Once you have something like the above, it’s time to get creative with your mask layer. Add a rectangle shape that covers the squares you just created like so:
🥳 EASY AS THAT!
All you have to do now is match it with your own brand. You can also use a linear gradient on the mask, to achieve different results.
Figma (Adobe 👀) friends, in this thread, I will help people understand how I design these little cards I use in my client work. I get DM’s and messages about them all the time, so I thought I would share a bit of my process.
The cards are usually always set up the same way. One main Frame or Group encapsulates another frame with the illustration and a text layer.
Firstly, I will show you how I designed the card in the previous tweet. Here is how the layers are structured. Pretty simple, right?
Let’s focus on the mask layer because that is the layer that matters and where you can get creative with fades etc.
✨ The “Everything Starts as a Square™” method to Icon Design.
I’ve been designing icons for a few years now and I use a very simple approach when creating shapes for different icons.
🧵
[1/5] The method is exactly what it says on the tin. Start with simple rectangles or squares to achieve the basic shape of the thing you’re trying to draw. Then focus in on the details.
Too many people try to overcomplicate things. Let’s take this restrooms icons.
[2/5] It consists of four rectangles and two circles. That’s all. If you break down each glyph I’ve drawn over the years, I will have used this simple method. Draw out the basic shapes first and then start adding detail like rounded corners/other nuances.