Create Without Complexity: Introducing Content-Aware Layout in Adobe XD

Adobe XD now has a new way to quickly create layouts, thanks to the new Content-Aware Layout feature. Content-Aware Layout puts smart layout controls at your fingertips to help you design and edit UI elements without any of the tedious or manual work that may have slowed you down in the past.

As designers, we’ve all gone through the painstaking process: you create designs for a mobile app or a website, only to receive last-minute copy changes or items to add to a dropdown menu that requires dozens of manual tweaks, which will take hours to complete. Now, with Content-Aware Layout in XD, you can dramatically speed up the process, allowing you to spend more time creating impact through your design work rather than manually adjusting UI elements.

Content-Aware Layout understands the relationships between objects on your canvas and automatically makes layout adjustments as soon as your designs change. Now, when you group objects together, you’ll see new layout controls in the Property Inspector that let you define and change these relationships. In its initial release, Content-Aware Layout automatically detects the background and lets you control the padding of a group. As soon as design elements inside the group change, XD will preserve the padding values and adjust the background. In order to keep you in the creative flow, all the controls in the PI are available directly on canvas too, accessible by holding the tilde (~) key and hovering your cursor over the group.

With Content-Aware Layout, you can add icons or change the text of a button and the button’s background will automatically resize to fit, while preserving the padding values. You can create also menus that resize as you add or remove menu items. And you can design modals, like a notification banner or a sign-in form, that resize as you change text or add new layers to the group. Content-Aware Layout helps you design these elements faster, without any manual resizing or having to reposition layers as you make content edits.

Content-Aware Layout flexibly adapts many different types of backgrounds including shapes, images, paths, masks, and groups, and works with any kind of content edits like changing text, adding a new object, or moving or resizing an object.

In addition to regular groups, you can use Content-Aware Layout with components and component states if you’re working with a component library or a design system. When you add a new component instance or create a component state, you can use the same controls to quickly modify the layout of the instance or state with overrides. If you modify the layout of the master component, the changes automatically propagate to each instance with the same ease.

Like every feature in XD, we carefully considered Content-Aware Layout — working hands-on with designers and diving into our own design team’s challenges — to make Content-Aware Layout flexible, intuitive, and built for scale. We’ll be introducing more controls into XD’s Content-Aware Layout in upcoming releases, like the ability to set and maintain the spacing between multiple objects in a layout while making content edits. Content-Aware Layout works the same as the Content-Aware features in other Creative Cloud applications, like Content-Aware Fill in Photoshop and After Effects.

Content-Aware Layout is available to any XD user — simply download XD or update to the latest version of XD to start using Content-Aware Layout. You can also explore tutorials and demo files on Let’s XD to understand how you can use Content-Aware Layout in your design process.

Stay tuned for more updates from XD and please share your thoughts and feedback with our team on Twitter and UserVoice!