James McDonald Profile picture
Design @clerkdev. Open for freelance work @wireframe. Buy icons @theiconicapp. Prev: @tailwindlabs

Dec 20, 2022, 6 tweets

🎩

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 file: figma.com/file/1vToUqBSp…

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling