Isometric Designing in Figma

Hello everyone, recently I got interested in isometric designing and wanted to try it out in Figma. A plugin called Isometric is also available which will turn your frames into an isometric view, although in this blog, I will tell you the steps to make simple isometric designs in Figma without any plugin.

This blog was originally written as a guest post on Vizartpandey.com

Now, what is Isometric Design?

Isometric Design is drawing three-dimensional objects in two-dimensional planes where the object is viewed at an angle of 120 degrees i.e., all the three x, y and z-axis should meet together at a point with a 120-degree angle, that is why isometric objects should have equal and accurate measurements.

Now let’s take a look at a few examples of isometric designs made in Figma…

As you can see above, the isometric design provides depth to simple shapes and makes them look more realistic, the reason which makes it so popular.

You can also access the Figma resource files of this pattern design and Tableau public portfolio showcase shown above to have a better look.

Now, let’s take a look at the steps to make isometric designs in Figma…

Step 1:

Take any frame or shape in Figma, absolutely any shape with no particular measurements, you can even take an ellipse or a blob if you want. Now, create the design you wish to make, like shown below…

Step 2:

Select your design elements in the frame and rotate them to 45 degrees.

Step 3:

Put your frame in a group, even if all your elements are already in a group, group it again.

As I mentioned earlier, isometric objects should have equal and accurate measurements, although your frames will not necessarily always be equal and accurate, that’s why here we rotate and put it in a group which keeps it in a 1:1 ratio, no matter how distorted the element itself is.

Step 4:

This is the most crucial and the last step to make your isometric design in Figma. After you have rotated it to 45 degrees and put it in a group, change the height of the group to 57.73% and we are done!!🎉

This number is derived from the mathematical formula of Pythagoras and other properties of angles and Xyz planes. Although we don’t need to dig deeper into the maths behind it, and rather remember the technique and we are done!

Note: Sometimes your elements can get displaced like shown below, but there’s nothing to worry about, I would suggest that you set the constraints to scale for the whole group before changing the height or you can just change the size a bit and align them and it will be good to go!

Step 5:

After your design is in an isometric view, you can add a drop shadow to make it look more realistic like it’s floating or it’s placed on top of something.

And your isometric design is now ready to be shared with the world!!

Credits:

The first time I came to know about isometric designing, was when I came across a tutorial to make isometric mock-ups by Alexunder Hess, so I would like to give the original idea credit to him. He also has a full-fledged course for Isometric Design, you can grab it if you want to dig deeper into this topic!!

That’s all folks! I hope you had a good time reading this blog! You can always connect with me on Twitter or LinkedIn or follow me on Tableau, Figma, Behance, Dribbble, Medium and Instagram.

Thank You!😊