Isometric Illustrations in Figma

Figma is a powerful tool for interface development and prototyping. We use it to design our products and to create graphic layouts for marketing and other purposes. One of the most significant advantages of Figma is that it allows you to write custom plugins enabling third-party developers to expand the already extensive range of the platform's capabilities. Let’s discuss one of such plugins.

For new brochures, our product designer came up with an interesting concept: to display illustrations in isometric projection. There is already a working plugin Easometric. However, it has a disadvantage: Easometric can only create 30-degree projections, and this angle cannot be changed in any way, since the value of 30° is embedded in the plugin’s source code. And we needed an angle of 22°: the Wallarm logo is rotated at such an angle in isometric projection. The author of the plugin published it freely on GitHub, so we decided to modify it ourselves.

The original idea to replace all references of 30° to 22° did not give the desired result. It worked well for the left and right projections (faces of the cube), but the top projection has changed incorrectly.

We had to get back to school stereometry lessons. Each isometric transformation on a plane consists of two actions: skewing and rotating the shape.

While the rotation angle for all projections should be the same up to the sign (depending on a cube’s face), the skew angle of the upper face should be different from the side faces. Applying the basic trigonometry functions, and also knowing that the sum of all angles in a triangle is 180° and that the diagonal of a rhombus bisects the angles, we get:

β = 90° - α;

β + γ = 90° ⇒ γ = 90° - β = α;

χ + 2×γ = 90° ⇒ χ = 90° - 2×γ = 90° - 2×α

where α — isometric transformation angle, χ — the desired angle to skew the upper face.

So, in the general case, the desired angle will be equal to 90° - 2×α (again, up to the sign). It immediately becomes clear why the original 30-degree projection worked without these calculations: 90° - 2×30° = 30°. Since we figured out the angle and developed a formula to calculate it, we decided to modify the plugin so that we could create projections at any angle. After examining the Figma documentation on writing plugins, we were able to add an input field to Easometric to specify the angle. The result works just as required.

The designer was more than happy. We also decided to send our modifications to the plugin’s author as a pull request, so that they add this to the code.