Prepping Adobe XD for Desktop Builds

Responsive sizes are awesome…unless you’re designing in a static environment.

One of the hardest things (in my opinion) about translating design to development (in our standard Web Dev Workflow) is creating a system that allows for this translation.

Sizes In Design World

When beginning the wireframe process in Adobe XD, chances are you’ll start with a desktop build. Unless we’ve received specific instructions for a project to start mobile-first (usually informed by Google Analytics data), I assume designers would want to start with a 1920×1080 artboard. Adobe XD comes with a great Layout/Grid feature that can help create a short-hand for designers to design like developers (or vice-versa), but we have to configure it correctly.

A major downfall of Adobe XD is that it doesn’t handle high PPI conversion (i.e. “Retina Display”) well. So, here’s the best config for Adobe XD artboards.

Personally, I like to use the Layout Grid as a single column because it can be a guide for a site’s “max-width” setting. So, with an artboard at an implied 1080p (or, 1920px wide by however-many-pixels-you-want long), the single column should be 1200px wide.

Sizes in Dev Town

Disclaimer: If we were building from scratch, basically none of this article would matter.

When I build a site with Pro Theme / Cornerstone, I’m going to set it up basically the same way every time. So, here’s why 1200px matters in Design World.

Notice the Site Width and Site Max-Width options. Basically, this means our content will never be larger than 1200px (max-width translates to….max width) and if the viewport (aka screen size) width is smaller than 1200px, the site’s size will be the 88% of the total width available.

Let’s Do Some Math

Especially when building with Grids & Rows, this default behavior is good to know. It means that, at most, you’ll be dividing 1200px by some arbitrary number.

• A 2 Column Row would be configured as two columns of 590px wide with a 20px gap between
  • 20px of gap is a row default setting
• A Grid with 2 columns set to 1fr would be similar.

Math is the ambassador between Design World and Dev Town. Even though the numbers are a bit arbitrary, having a similar starting point can help keep designers and developers in-step as we build websites together!

Guidelines, Not Rules

The power of responsive design means that there are no rules, only guidelines. We aren’t building a Wix site, after all! The 1200px / 88% “rule” is the default for any Cornerstone Element that has the Size Options (e.g. Rows, Grids, Containers, Divs, etc.). You can, of course, uncheck the “Global Container” checkbox and make the element any size you want if a design calls for it. Just remember, your designs have to translate well to mobile viewports!