How to make a frame isometric in Figma?

How to make a frame isometric in Figma?

Kavin Desi Valli's photo
Kavin Desi Valli

Published on Dec 20, 2020

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Figma is around for quite some time now. Many people are looking at it as a free alternative for Adobe Illustrator or Adobe XD. So, here's a post on how to make a isometric frame in Figma

Normal Design

Start by choosing a frame and making a normal design. I have made this iPhone 11 Pro Max - 1.png

Start of with Isometric

  • Click on the name of the frame on top of the frame to select it. Screenshot 2020-12-20 at 4.50.44 PM.jpg

  • On the left panel set angle to 45º like so

Screen Recording 2020-12-20 at 4.53.07 PM.gif

  • Select all items inside the frame from the right panel and set the constraints to scale like so

step2.gif

  • Now select the frame like done in Step 1 and make a group of the frame by doing Command G on MacOS or Control G on other OS's.

step4.gif

  • Now, go to H on the left panel and type 57.73% over there and see the magic 🥳

step5.gif

  • Now, you would notice that the texts are not as well sized as they should have been. So we will have to tweak the font sizes a little bit.

    Note: The images, shapes and svgs, etc. would be well sized because of Step 3

At the end after tweaking your font sizes, you should get something like this

iPhone 11 Pro Max - 1 (1).png

Now you can add a phone mockup and get this Group 19.png

 
Share this