🎟️ Designers! Get 20% off our lettering for logos Dribbble crash course with Jon Contino. Use code JON20 🎟️
Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
What’s up friends! Today I’m sharing another secret of my Isometric grid and its basic elements for sketch app, and yeah its how I’ve been using for my past isometric digital designs so far.
You will get the isometric project grid for sketch + the isometric elements where you will see how the grid has been applied. I did spend a lot of time to figure out how the hell I can use the SSR method aka scale, skew, and rotate.
But, sketch won’t let you skew. And all you have to do is scale + rotate. 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. :)
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 landing pages to even the latest dribbble shot. But, just make sure you don’t resize the grid using the sketch scale tool. It will increase the grid lines, just use the resize method using height/width in the right inspector panel.
If you’re still getting confused how to make, just add your comment down here. I’ll try to make a short video or upload a shot with steps as I explained above.
I’m sharing this isometric grid + elements for free no matter how much espresso I had making this project. 😎 I hope you like it.
Show some love by pressing the L key on desktop, or tap on the 💖 like button, if you’re on mobile device. 🙏🏻
Love to have your comments down 👇🏻 here
Would you like to be part of our biggest UX Discord community? Join GSIUXD on Discord now. Thank you so much for your 💖