Greg Althoff

Creating Isometric Shapes on a Grid with Figma

  • Save

Lately I've been tinkering around with designing some isometric pieces for a client. I wanted to design all of my assets in Figma because I believe it is the best product and design tool currently out there* and going back and forth between programs can become a bit tiresome.

After digging around, I found out that you cannot create an isometric grid in Figma. So I quickly found a tutorial and created my own set of grids in Illustrator and imported them (as SVG's) into Figma. I didn't want have to use Illustrator beyond that, so thanks to @Ryan Morrison 's discovery of the phantom 57.73% height and my new grid's, I was able to start creating some fast isometric assets!

If anyone is wanting a tutorial or the source files to work with, hit me up on this thread. I was thinking of making a video tutorial in the near future.


*Yes I've used Framer, Sketch, XD and InVision Studio (beta) .. but nothing has it all like Figma does. It allows for importing of seamless vector files, fastest tool on the market, client commenting, browser, mac & pc, and some great gradient controls.

keyboard shortcuts: L or F like