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

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.

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.

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.

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.

**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).

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

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

*Cos(45°) = baseY / hypotenuseHbaseY = Cos(45°) hypotenuseHbaseY = . *7071

*20*

hence,

hence,

*baseY**=*

*14.1421*Similarly,

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

*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*.

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

Let’s do it —

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

*perpendicularK**=*

*8.1642*Now, let’s calculate the ** percentage ratio** of

**from orthographic projection and**

*perpendicularX*

*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.

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.

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 —

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

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

**the**

*equal to*

*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.