Creative Connection

October 11, 2019 /Update /UX/UI Design /

October 2019 Release of Adobe XD: Blend Modes, New Keyboard Shortcuts, Updated Collaboration Integrations, and More 

This month’s release of Adobe XD includes some exciting new keyboard shortcuts and UI changes that are sure to speed up your workflow, along with the introduction of much-requested blend modes. Blend modes let you create more visually appealing images and graphics in XD with predefined settings like Lighten or Multiply that combine images with other layers in your designs to create interesting and unique effects, using the same functionality you can access when blending in Photoshop and Illustrator. 

Also included in this release are new features that make it easier to work with covered or overlapping or hidden layers in both Design Specs and right on the design canvas in the XD Windows and Mac applications. You’ll also find new keyboard shortcuts that help you easily nudge and resize objects.  

We’re excited to roll out these new features, but they’re just a taste of what’s to come next month during Adobe MAX. Read on to get more details on the October release of XD, along with a little look ahead as to what we have in store at the start of November (yay for Coediting!). 

Blend modes: Create stunning effects for images and graphics 

Blend modes in XD will allow you to use preset algorithms, like Lighten or Multiply, to blend a layer with the background or another layer on the design canvas. You could use blend modes to, for example, create a duotone effect for images that incorporates your brand’s colors.  

To use this feature, just click on the objects or objects and backgrounds you want to blend. You’ll see a new dropdown menu in the Properties Inspector where you’ll be able to select from a number of different blend modes, for example light or dark variations. 

If you’ve used Blend modes in other Adobe tools, like Photoshop or Illustrator, you’ll see that the functionality is very similar. This also means it’s easy to bring blend modes that you’ve defined in these tools (and Sketch) into XD, thanks to the import features. These imported blends will not only convert over into XD, but will also remain fully editable. Blend modes remain non-destructive at all times, and when it comes time to hand off your design as a design spec for your developers, they will be able to review the blend mode attributes as they develop the finished product.  

Easily move and resize objects with new keyboard shortcuts 

Keyboard shortcuts considerably speed up your workflow, and if you’re a fan of them you’re going to love these new shortcuts for adjusting the size and position of objects on the design canvas. 

While you’ve always been able to move objects in 1-pixel increments using the arrow keys, now you can: 

  • Press Shift + Arrow Keys to move the selection in 10-pixel increments 
  • Press Command (Mac) or Alt (Windows) + Arrow Keys to increase or decrease the size in 1-pixel increments 
  • Press Shift + Command (Mac) or Alt (Windows) + Arrow Keys to increase or decrease the size in 10-pixel increments 

You can also use these existing and new shortcuts to make it easier to snap objects to layout grids. By turning on a grid, and using the shortcuts mentioned above, you can quickly move an object to the next grid line. This same behavior also works for resizing objects — with grid enabled, you can resize an object to the next grid line, and tweak further with additional clicks of the arrow keys. 

Deeper collaboration on prototypes using Microsoft Teams and Slack

Design teams around the world use tools like Microsoft Teams and Slack to collaborate on designs with others and get work done. With the Adobe Creative Cloud integration for Microsoft Teams and the Adobe Creative Cloud integration for Slack, thousands of teams share Creative Cloud files, get notified about changes and updates, and can update permissions on files directly from their favorite tools.  

We’re excited to share an update to these integrations to help you easily collaborate around XD prototypes and Design Specs directly from whatever communication platform your team uses. The updated integrations enable you to see and add comments on shared artifacts directly from Teams or Slack, so you can keep all your communication centralized in one platform while collaborating with others. When a comment is posted to your XD prototype or Design Spec, you’ll receive a notification in Teams or Slack via the Creative Cloud app. Now, you can simply start a thread and reply to post comments to your XD prototype. Additionally, if you are an owner or collaborator, you’ll receive notifications when somebody @mentions you in a comment on your XD prototype link, bringing only the most relevant comments to your attention. 

The Creative Cloud integration for Slack is available today on the Slack App Directory and the updated Microsoft Teams integration is coming soon. You can also learn more about app integrations for Adobe XD on our website.  

Easily access hidden or overlapping layers on the design canvas and in Design Specs 

Oftentimes, designers add overlapping layers to their designs when creating overlays, using blend modes, or using one of the Boolean operators available in XD like Intersect, Add, or Subtract. Doing so means layers are buried beneath one another, which makes it difficult to directly select layers. 

This latest release of Adobe XD enables you to sift through layers and select overlapping objects, both on the design canvas and in Design Specs. Now, if layers are concealing each other on the design canvas, you use the Cmd (Mac) or Ctrl (Windows) + click shortcut to cycle through a stack of overlapped layers. 

This saves you from having to find the object you’re looking for in the layers panel. Once you have clicked through and selected the object you’re after, you can manipulate it using the Properties Inspector, or right-click it to select options that way. This new feature works for overlapping groups, as well, making it easy to cycle through groups of elements.   

We’ve also made it easier to access overlapping objects in Design Specs. For example, in the video below, you’ll see that there are a series of blend modes applied to different layers within the group. Now, developers will be able to right-click and access a menu that allows them to view overlapping layers in Design Specs. 

Thanks to this easy-to-access layering order, you’ll be able to see all the objects in any one area, which should alleviate any frustrations around accessing objects that overlap each other. 

Exciting developments on the horizon: Live Coediting and more 

While we’re very excited to share everything new in this October 2019 release of Adobe XD, there are some awesome developments on the horizon. Last month, XD’s Senior Director of Product Management Andrew Shorten shared this roadmap post (which is full of ‘sneaks’ of upcoming features). One of the biggest things to come is the introduction of live Coediting, which will allow multiple designers to have the same XD document open at the same time and edit designs together, in real time.    

Alongside Coediting, we’ll also be adding support for document history, and other features that will enhance your productivity and make it even more enjoyable to design, prototype, and collaborate in Adobe XD. Stay tuned for more developments at Adobe MAX, Adobe’s creativity conference taking place November 4-6, 2019, and watch this space for the latest news on future updates.  

Update, UX/UI Design

Join the discussion