Different neon arrows in blue, yellow and magenta
Downloadable grids for Figma, Sketch & Co.
Save time with downloadable grids for your favourite digital design app.
Save time with downloadable grids for your favourite digital design app.
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:
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.
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/
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
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/\
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/
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!
Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi via email.
