DEV Community

loading...
Cover image for How to make a frame isometric in Figma?

How to make a frame isometric in Figma?

kavin25 profile image Kavin Desi Valli Originally published at livecode247.com on ・2 min read

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

Discussion (0)

pic
Editor guide