Bootstrap 4 Grid for Affinity Designer

by Alexander Rechsteiner - Last updated

Gutter Columns

Ever since Affinity Designer entered public Beta on Windows, I was delighted with the tool. It just seems so much more intuitive, well thought out and lightweight than any of the competing Adobe tools. The program is evolving rapidly and Serif does an excellent job of responding to the community in their forums. Affinity Designer has since been released fully on Windows and I’ve decided to switch to it for all UI/UX and web design tasks.

To help with design projects based on Bootstrap 4, I have created a grid for Affinity Designer akin to my Photoshop Grid for Bootstrap 4.

The features are pretty much exactly the same:

  • Artboards for xl, lg, md and sm viewport sizes
  • Shape objects for columns and gutters
  • Screen size helpers for common screen sizes
  • Test images rendered in an actual browser
  • Guides along the column borders
  • Based on Bootstrap 4
  • Non-artboard version for xl

For more a more detailed explanation of these features, refer to the article about the Photoshop grid PSD. This file is free to use.

As always, feedback is welcome. You can reach out via email or Twitter.