Image for post

Image for post

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

Nitish Khagwal

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.

Image for post

Image for post

Isometric Objects

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.

Image for post

Image for post

Orthographic & 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.

Image for post

Image for post

Orthographic Projection

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.

Image for post

Image for post

Isometric Projection

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

Image for post

Image for post

Objects in Isometric Projection

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

Image for post

Image for post

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.


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.

Image for post

Image for post

Isometric Projection Technique

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

Image for post

Image for post

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.

Image for post

Image for post

Altitude of right angle triangle
  • 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 —

Image for post

Image for post

Using Trigonometry to find X and Y

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

Image for post

Image for post

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

Image for post

Image for post

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.


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.

Image for post

Image for post

Orthographic Projection of Cuboid

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.

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

Step 1: Drawing the Top View

  • Select the top view shape from orthographic projection.

Image for post

Image for post

  • Rotate the shape to 45°.

Image for post

Image for post

  • Flatten the shape for the absolute bounding width and height.

Image for post

Image for post

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

Image for post

Image for post

  • Woohoo!, we created the top view.

Step 2: Drawing the Front View

  • Select the front view shape from orthographic projection.

Image for post

Image for post

  • Rotate the shape to –45°.

Image for post

Image for post

  • Flatten the shape for the absolute bounding width and height.

Image for post

Image for post

  • Multiply the shape’s height with .5773

Image for post

Image for post

  • Rotate the shape to 60°.

Image for post

Image for post

  • Yahoo!, we created the front view.

Step 3: Drawing the Side View

  • Select the side view shape from orthographic projection.

Image for post

Image for post

  • Rotate the shape to –45°.

Image for post

Image for post

  • Flatten the shape for the absolute bounding width and height.

Image for post

Image for post

  • Multiply the shape’s height with .5773

Image for post

Image for post

  • Rotate the shape to –60°.

Image for post

Image for post

  • Yay!, we created the side view.

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

Image for post

Image for post

Cuboid in Isometric Projection

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.

Image for post

Image for post

Orthographic View of Cylinder

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.

Image for post

Image for post

  • Duplicate the top view oval for the bottom view.

Image for post

Image for post

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.

Image for post

Image for post

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.

Image for post

Image for post

Isometric Objects

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.



Read More

ترك الرد

من فضلك ادخل تعليقك
من فضلك ادخل اسمك هنا