Hello Friends,
Hope you are all having a great week so far. I remember someone has said that if you can do something that's not easy to do in Figma, then your website or interfaces is going to stand out easily.
So today, I will teach you how to add perspective into your design. Adding depth also resemble the real world we live in.
Let's bring 3D into our 2D world. Here we go!
LEARN DESIGN
Here’s how to create a subtle 3D perspective grid in Figma—like the one from Vercel.
🎁 Grab your starter file here and follow along!
Video Tutorial is linked below.
Step 1 - Create your pattern
Start by building a basic square grid.
120x120 square
Remove fill, center stroke
Use Pattern Hero plugin
Frame and crop to your screen size.
Adjust the size of grid to your liking
Create a pattern grid using pattern hero plugin.
Step 2 – Start with big frame content
Before transforming, make the frame content larger than it should be.
Un-crop the frame and
Set width to 2880px (2x screen wide)
Height around 2700px(3x screen tall)
This keeps it from shrinking too much later.
Make frame content 2x wide and 3x tall.
Step 3 – Apply 3D effect
Open Perspective Toolkit plugin
On 3D tab, Rotate along the X-axis
Adjust to the angle you like
Just enough to add depth
Apply 3D effect in perspective toolkit plugin.
Step 4 – Tada!
Bring it into your layout.
Paste into your bg layer
Use “Color Burn” and use opacity to soften it up
That’s it. Now you’ve got a clean perspective grid in your hero.
Paste the grid pattern into bg layer and apply color blending.
Thanks for reading!
If the design tips saved you time or gave you an idea, share this email to a friend who’d love it too. They can join here for free!
New here? Subscribe to get next week’s design shortcut
P.S. Got a design problem you’d like me to cover? Just hit reply — I read every message.