January 2020 Release of Adobe XD: Content-Aware Layout, New Plugin APIs, and More
A new year. A new decade. And a new release of Adobe XD!
Our team has been busy since our major XD release at Adobe MAX, where we introduced several new features including Co-editing, Document History, Component States, Share mode, and so much more, and our December release focused on fixing bugs, addressing reported issues, and improving XD’s performance. Now, as we kick off the new year, we’ve got some exciting updates in this release including Content-Aware Layout, enhanced XD Plugin APIs, and more.
Let’s dive into everything that’s new in the January release!
A faster way to design with Content-Aware Layout
As designs change, designers spend too much time making minor, manual adjustments, and this means they often spend less time on design work that matters. Whether resizing call-to-action buttons as the text labels change, adjusting dropdown menus as menu items are added or removed, or tweaking notification banners, like in a privacy disclaimer on a website, as business requirements evolve, each second spent adjusting designs for every minor edit adds up!
That’s why we’re excited to introduce a new way to quickly create layouts in Adobe XD — Content-Aware Layout puts smart layout controls at your fingertips to help you design UI elements without any of the tedious or manual work that slows you down. Content-Aware Layout understands the relationships between layers on your canvas and automatically adjusts these layers as your designs change. In this initial release, Content-Aware Layout lets you control the padding values of a group and maintain those values as the group’s layers change, such as when you’re adding a new layer to the group or editing a text layer.
Content-Aware Layout is available to any XD user — just download or update to the latest version of Adobe XD to start using it. You can learn about Content-Aware Layout in our announcement post and explore free tutorials and demo files on Let’s XD.
Drag-and-drop XD Plugin APIs
In August 2019, we introduced the Plugins Panel — a new surface in XD where you can launch and use your favourite plugins without having to leave your design canvas. The Plugins Panel puts the power of hundreds of XD Plugins at your fingertips to extend XD’s capabilities and connect XD to other apps.
One of the most common ways designers use XD plugins is to bring assets from other sources, such as icon libraries or stock photo collections, into their designs. These asset plugins help you create richer designs faster without having to scour the internet to find and download different resources.
Alongside the new release of XD, we’ve updated the XD plugin APIs to support drag-and-drop interactions, such as dragging an icon from a plugin onto the canvas. If you want to build an XD plugin or have an existing XD plugin you want to update, you can check out this sample code for adding drag-and-drop functionality to your plugin here.
Create star shapes with the Star Ratio
Some of the most important parts of a user experience involve stars — rating a restaurant in a review app, bookmarking an email or document as important, or saving a place on a map in a transportation or trip planning app. In most tools, adding stars to your UI designs requires strange and tedious workarounds.
Now, with the latest release of Adobe XD, you can control the “Star Ratio” for any polygon you draw using XD’s Polygon Tool. The Star Ratio controls vector points in the middle of each side of the polygon, drawing them closer or further away from the centre of the shape on a scale of 0% to 100%. With a polygon selected, you can adjust the Star Ratio in the Property Inspector or by hovering over the polygon and grabbing the selection handle right on the canvas and adjusting manually.
Stay tuned for more updates from XD and as always, please share your thoughts and feedback with our team!