Isometric grid and elements for sketch

Isometric versions of illustrations & designs are one of the eye-popping styles preferred by most graphic artists, illustrators, and designers. I've made this file & distributed it on Gumroad as my 2nd freebie after getting a lot of requests, especially from Sketch app users. Also, check out my earlier UI color resource freebie that I shared on Gumroad before. 

Here is the isometric grid + elements pack I posted on Dribbble recently. If you're a sketch app user, you'll love this isometric grid and the given isometric elements in this pack for Free.

What's Included

1. Isometric grid for sketch (more than 1600x1200px)

2. Basic isometric elements as you see them on the product snapshots. 

*You need sketch 51.3 and above to open/edit this file. 

The Process

I did spend a lot of time to figure out how the hell I can use the SSR method aka scale, skew, and rotate within Sketch app.

But, sketch app won't let you skew directly. You can skew any vector shapes by using the transform tool followed by scaling + rotating. The principle I have applied was to create the base isometric grid using the same -30 degree, -150 degree and its vertical axis having equal spacings. Just ignore the exact measurements for now. :) It's just a grid, and not a geometry class 😎

Basically, 1. you can draw a box/rectangle shape over the grid 2. rotate 45/-45 3. place the shape to match the grid after the rotation 3. now use the transform command (cmd + shift + T), now select one of the 8 nodes (in my case, I select the bottom center one) and use the keyboard up/down key to transform the shape until it matches one of your isometric grid units. Yeah it’s a manual process though. But believe me, once you’re done with all the basic elements, it’s just a matter of compositing. 4. now use the rotation tool to rotate -60, 60, 120, -120 respectively to get your desired angles/isometric faces. That’s the trick.

*The isometric grid template for sketch is larger than 1600x1200, which is best suitable for website headers, landing pages, etc. But, just make sure you don’t resize the grid using the sketch scale tool. It will increase the thickness of the lines/strokes inside the grid. Just use the resize method using height/width in the right inspector panel.

I’m sharing this isometric grid + elements for free no matter how much espresso I had making this project. 😎 I hope you like it.

Connect with me via

Get in touch with me over Twitter X for anything else. I talk and publish mostly on UX & Product Design. Enjoy this gift from me 👋