DEV Community

Cover image for How to make a frame isometric in Figma?
Kavin Desi Valli
Kavin Desi Valli

Posted on • Originally published at livecode247.com on

How to make a frame isometric in Figma?

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

Top comments (0)