by Alexander Rechsteiner - Last updated 02/21/2017

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.