By Matt Rae
D
igital design takes on many forms – from mobile and desktop websites to watch apps, smart assistants, car entertainment systems like CarPlay and Android Auto, and much more. Crafting digital experiences for today’s applications means designing for a variety of screen sizes, layouts, and interaction types. As a designer, your time should be spent on the experience, not on adjusting layouts. Here's how Adobe XD can help expedite your process when working with layout changes and updates.
Alignment and spacing
Grids
Defining a grid system can help you ensure your design stays in alignment and can save valuable time measuring pixels and spacing between elements. Two options exist in Adobe XD to provide guidance when setting up your design: layout and square.
Layout
The layout grid option enables a series of columns and gutters across the artboard, allowing content to be aligned to a number of columns for defining width and spacing. The Layout Grid option is an excellent choice when working with responsive web layouts. Spacing, color, and the width of a layout grid can be easily adjusted in the property inspector.
Square
The square grid provides a grid overlay to your artboards, creating what looks like graph paper so elements can be aligned to the grid both horizontally and vertically. If your layouts work on defined grid sizes (e.g. 8px, 16px, etc.), you can set this manually in the property inspector to ensure your elements can align to the proper grid.
Grids can be used in conjunction with Guides to lay the foundation for creating the blueprint of your design layout. Simply hover to the left or top of an artboard and click and drag to pull out a horizontal or vertical guide anywhere on your artboard.
Content-Aware Layout
As your design evolves changes will be made – everything from button labels to full page layouts. In the past, iterating through a design, especially at higher fidelity stages, could be a chore, but it doesn’t have to be. With Content-Aware Layout features in Adobe XD layouts adapt accordingly whenever content changes or elements are adjusted.
Padding
With padding enabled, modifying text on a button is as easy as changing the text. As the text string gets longer or shorter, the button will adapt and resize based on the padding defined in the Property Inspector. The same is true of groups of content – as elements are moved around within a group the background of the group will adjust accordingly, maintaining the padding as defined on the top, bottom, left, and right of the group.
Stacks
Working alongside padding, a Stack makes rearranging elements in your design as simple as clicking and dragging. Using stacks with a list of elements, a horizontal gallery, or full content sections allows a page to be rearranged in a matter of seconds, all while maintaining proper spacing and alignment.
Repeating elements
From image galleries to product carousels, repeating elements in a design layout are increasingly common. In the past, creating these repeating elements and iterating on layouts within repeating elements, like product cards, has been tedious and time consuming.
Repeat grids
Repeat grids allow elements to be quickly repeated in horizontal and vertical directions, with complete control over the spacing between elements. As layout changes are made to one element in the repeating sequence, those changes are reflected across all elements, making it incredibly easy to create photo grids, product tiles, and more.
Adapting for various screen sizes
Responsive Resize
When it comes time to adjust your layout for larger or smaller screens and devices, Responsive Resize will save you lots of time. Responsive resize analyzes your design and makes smart decisions as to how individual elements should resize, how groups should move, and what points should be anchored. Simply enable Responsive Resize on a group, or your entire artboard, and resize the element to see the magic happen.
Whether you’re working with a strict 8px grid system, designing responsively with a 12 column grid, or need precise guides for configuring your layout, Adobe XD provides several ways to make sure your content stays lined up, and laid out beautifully.
