Downloadable grids for Figma, Sketch & Co.

Some designers build their sites straight with Webflow. Not a Webflow user yet? You can get your account here. While others first work with wireframes or even high-fidelity mockups. I belong to the later group, as it allows me to experiment with layouts, hierarchy, colours and more before going into Webflow and building the site. I work with Figma, Sketch or Adobe XD depending on the project and always like having a grid that I can work with in each tool. Using a grid lets be lay out the elements on the page more easily and helps me to see if anything isn't lining up as it should.

If you're like me and you like working with grids (or you'd like to start working with grids in the future), check out some of the resources below. I have collected editable grids for all major digital design tools including:

  • Sketch
  • Figma
  • Adobe XD
  • Photoshop
  • Affinity Designer

The links lead to the website of the grid creators who have taken the time to set them up and made them available for anyone to use. You can also use these grids as a starting point and amend them to fit your individual project by changing columns and gutters as needed.

Adobe XD

Dan Rodney created a grid for Adobe XD that is derived from Bootstrap and also includes the midpoint column gutters.

https://www.danrodney.com/blog/adobe-xd-bootstrap4-grid/

Figma

Viktor Shyshko has also made a grid available for Figma for you to use free of charge. Nice!

https://dribbble.com/shots/5778082-Bootstrap-Grid-v4-for-Figma

Sketch

While Sketch has fallen out of favour with some designers who've now switched to Figma, it is still widely used by other designers and agencies. However here's the grid template - again created by Dan Rodney.

https://www.danrodney.com/blog/sketch-bootstrap4-grid/\

Photoshop

Yes, believe it or not some designers and teams still work with Photoshop to create their designs. So here is a grid that can be used to keep everything nice and tidy.

https://hackerthemes.com/bootstrap-4-grid-psd/

Affinity Designer

And for anyone who has abandoned Adobe, there is also a grid for Affinity Designer.

https://hackerthemes.com/bootstrap-4-affinity-designer-grid/

There you go: whichever tool you use, there's a grid for you! Are you working with another tool you need a grid for? Let me know!

This might also interest you...