I couldn’t find a good clean Bootstrap grid for Adobe XD that uses XD’s layout grid feature with guides to mark the midpoint of column gutters. So I made this grid template and I hope you like it!
Calculating the layout grid settings in Adobe XD is harder than it should. Unlike Sketch (which makes it easy), XD does not let us specify a design area (called a container in grid systems like Bootstrap.
Adobe XD forces us to define margins (the area outside the container/design area). This makes it a huge pain when you simply want to increase or decrease your column gutters. So I came up with an easy way to calculate the grid settings.
I couldn’t find a good clean Bootstrap grid for Adobe XD that uses XD’s layout grid feature with guides to mark the midpoint of column gutters. So I made this grid template and I hope you like it!
Over a year ago I wrote Is Adobe XD Ready for Production Work? and a lot has changed since then. So it’s time for an update!
At Adobe MAX 2016, Adobe said “you really have everything you need to be successful doing production work inside of XD”.
I like designing with Sketch, and Adobe XD is clearly inspired by Sketch (to put it mildly). It’s been out of beta for a while now, so can you really do production work with it? That depends on your needs. To help you decide, I’ve compiled a list of its limitations.
Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).
I find that many designers (especially those coming from print) don’t really understand how resolution works on the web, so I’d like to explain it. These concepts apply to whatever design app you use (Photoshop, Sketch, Adobe XD, Illustrator, etc.) and understanding this will help you create properly sized web graphics.
If an image will be coded into a space of 300 pixels, you have to make:
In a webpage, both images will be coded so they appear physically the same size, but the 2x image has more pixels squeezed into that space (so it appears sharper and more detailed).
NOTE: The resolution you see in Photoshop (such as 72ppi) is ignored by web browsers and is therefore irrelavent. It does not matter what the resolution is set to (so just make it 72ppi). All that matters is the pixel width and height of your images!
At Adobe MAX 2016, Adobe said “you really have everything you need to be successful doing production work inside of XD”.
I like designing with Sketch, and Adobe Experience Design (XD) is clearly inspired by Sketch (to put it mildly). I’ve started learning XD and it does show a lot of potential. It’s still in beta, so can you really do production work with it? That depends on your needs. To help you decide, I’ve compiled a list of its limitations.
Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).
