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

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

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 —

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

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