Creating Isometric Illustrations — Made Simple with the Isometric Projection

Learn how to quickly create eye-popping isometric illustrations in Figma or Sketch App.

8 min readSep 16, 2017

If you are a designer or an illustrator, possibly less or more, you are doing with the illustrations every other day.

Illustrations help to communicate complex ideas, functionality, or even the top product benefits to the novel users.

In modern product design culture, we have so many different illustration styles, and they are still evolving to the infinity ∞. Isometric illustrations are among one of the most favored flavors of the minimalist designers.

In general, illustrators go with the traditional flow, which includes drawing an isometric grid and then creating objects all over it manually*.

I am a technician with an artistic approach and not a canvas obsessed artist. However, I still love and get inspired by art. So, I choose the isometric projection with some maths to create isometric illustrations.

We can create a set of respective isometric objects and assemble them to create an isometric illustration.

We need to understand both the orthographic and isometric projections to create quick isometric objects in modern prototyping tools like Figma or Sketch App.

A 3-dimensional object can be visually represented in 2 dimensions using either orthographic or isometric projection.

An object that resides in orthographic or isometric projection has a top, front, and side view. Depending upon the observer’s viewing angle, we can determine the top, front, and side views interchangeably.

Orthographic and Isometric Projections

In orthographic projection, an object is represented in flat-looking individual planes. The angle between each plane is 90 degrees.

In isometric projection, the angle between any two planes is 120 degrees, while the third plane is at 90 degrees. We can see the object’s depth in isometric projection.

We can easily draw any shape like a cube or cylinder in isometric projection using some basic maths and magic multipliers.

In isometric projection, we at least need 3 different planes to draw the top, front, and side view of the object.

Top, Front and Side View in Isometric Projection

In the image above, the top view is drawn in the XY plane, the front view is drawn in the YZ Plane and the side view is drawn in the XZ plane.

We have excelled in orthographic and isometric projections, and next, we are going to learn how to create an isometric object.

Isometric Projection Technique

If we rotate a flat looking orthographic view to -45 or +45 degrees and set its height to 57.7350%, we will end up with a top view in isometric projection. We can further rotate it to either +60 or -60 degrees for front or side views.

But wait. Hey Nitish, why to rotate a plane at 45 degrees and set its height exactly to 57.7350%? Is that a ping-pong random value? NO!
It’s math, and it’s trigonometry.

The Maths — Isometric Magic Number 57.7350%

tldr; If you are in a rush, you can skip to read this section for now and bookmark this article to read it later.

We can find the altitude of the triangle in both orthographic and isometric projections and make a percentage comparison.

We can use a right-angle triangle that has an equal length of the adjacent and opposite sides. Such a triangle also has two equal and opposite angles of 45° to make a sum of 180°.

Let’s do it step by step —

Let’s draw a right angle triangle that has equal length of the adjacent and opposite sides (20).

Right angle triangle with equal adjacent and opposite sides

In the diagram below, we need to find the value of x, so that we can compare it with the altitude of isometric projection later. We also need to find the value of y, so that we can calculate the altitude of the triangle in isometric projection.

In the diagram below, we can use Cos(θ) = b/h to find the value of y and Sin(θ) = p/h to find the value of x. Let’s do some quick maths —

Cos(45°) = baseY / hypotenuseH
baseY = Cos(45°) * hypotenuseH
baseY = . 7071 * 20
hence, baseY = 14.1421

Similarly,

Sin(45°) = perpendicularX / hypotenuseH
perpendicularX = Sin(45°) * hypotenuseH
perpendicularX = .7071 * 20
hence, perpendicularX = 14.1421

Now, let’s rotate the triangle to -45°.

We know that, in isometric projection, the angle between two planes is 120°, so let’s re-draw PQ and RQ.

Altitude of Triangle in Isometric Projection

We can now easily find the value of k using Tan(θ) = p/b.

Let’s do it —

Tan(30°) = perpendicularK / baseY
perpendicularK = Tan(30°) * baseY (we calculated baseY = 14.1421 above)
perpendicularK = . 5773 * 14.1421
hence, perpendicularK = 8.1642

Now, let’s calculate the percentage ratio of perpendicularX from orthographic projection and perpendicularK from isometric projection.

Let’ do some maths again —

perpendicularX * n/100 = perpendicularK
n=8.1642*100/14.1421
so, n = 57.73%

I guess it makes a lot of sense now to use that value very confidently while making objects in isometric projection.

The Tutorial : Making Isometric Object

Let’s quickly open the Figma or Sketch App to draw our first isometric object. We are going to create a cuboid. We will first make an orthographic view and later turn it into isometric projection.

How to draw orthographic projection?

In Figma or Sketch App, draw three shapes using the “Rectangle” tool (R); for top, front and side view, respectively.

Just to simplify things, while making rectangular shapes for top, front and side views in orthographic projection, we should be careful that —

Width of front view is equal to the width of top view.
Height of side view is equal to the height of top view.
Width of side view is equal to the height of front view.

How to draw isometric projection?

Let’s make a quick start with the top view —

Step 1: Drawing the Top View

Select the top view shape from orthographic projection.

Rotate the shape to 45°.

Flatten the shape for the absolute bounding width and height.

In Figma, go to “Object” → “Flatten Selection” or use “Cmd”+“E” keyboard shortcut. In Sketch App, go to “Layer” → “Combine” → “Flatten” or use “Cmd” + “8” keyboard shortcut.

Multiply the shape’s height with .5773

Woohoo!, we created the top view.

Step 2: Drawing the Front View

Select the front view shape from orthographic projection.

Rotate the shape to -45°.

Flatten the shape for the absolute bounding width and height.

Multiply the shape’s height with .5773

Rotate the shape to 60°.

Yahoo!, we created the front view.

Step 3: Drawing the Side View

Select the side view shape from orthographic projection.

Rotate the shape to -45°.

Flatten the shape for the absolute bounding width and height.

Multiply the shape’s height with .5773

Rotate the shape to -60°.

Yay!, we created the side view.

Now, let’s bring the top, front, and side view closer to form a cuboid.

Let’s try making an isometric cylinder using the same technique —

First, we need to draw orthographic view for the cylinder. In Figma or Sketch App, use the “Rectangle” (R) and” Oval” (O) tool to draw shapes for the top and front view.

Just to simplify things, while making oval and rectangular shapes for top and front views in orthographic projection, the width of the top view should be equal to the width of the front view.

For the top view, we need to multiply the oval’s height with .5773, very similarly, as we did above, while creating the top view of the cuboid.

Duplicate the top view oval for the bottom view.

Let’s bring the top, front (from orthographic view), and bottom view closer. Ain’t that simple? That’s how we create a cylinder in isometric projection.

YES! this is it! You are an isometric master. Now, you need a bit of practice to unveil a new realm to draw quick isometric illustrations.

There are infinite possibilities to use isometric projection technique while creating eye-dazzling isometric illustrations. I believe you can now draw every possible primitive shape in isometric projection.

I hope this article helps you to draw quick isometric illustrations.

Feel free to get in touch at Twitter↗

Cheerio! Bie 👋 👋