June 2018 Release of Adobe XD: Overlays, Fixed Elements, and More

The June release of Adobe XD is here, and with it comes some major additions that are sure to delight UX designers. At long last, you’ll be able to add fixed elements, like fixed headers and footers, to your designs. This month, we’re also rolling out new support for overlays, allowing you to easily stack content (like a pop-up keyboard or dropdown menu). There are also many productivity enhancements and a new private sharing feature, which allows you to privately share prototypes and design specs with your team members and clients.

Keep reading to see our new features in action, and be sure to tune in to Adobe Live, June 18-20 (from 5 p.m – 1 a.m BST), to see top UX designers using these latest features in Adobe XD.

New to XD: Fixed elements

One of our most requested features, fixed elements, allows you to set design objects to a fixed position on an artboard. You can layer them above or below other design objects, so that headers, footers, menus, etc. travel with the user as they scroll down your artboard. Fixed elements appear not only in Desktop Preview, but also Prototypes and Design Specs live on the web, giving the viewer of your design a much more realistic interaction experience. Janjan Tayson, Digital Creative Director of The New York Times, spent some time with the new feature, and found that “Being able to quickly design an element and having the capability of creating a fixed position with one checkmark click is a smart user experience to meet our team’s rapid prototyping needs. Creating and representing fixed header and footer elements have never been easier!”_ _Click the video below to see fixed elements in action.

In this video, you’ll see how you can use Adobe XD to create an iPad app prototype that has a header, footer, and menu bar that remains fixed during vertical scrolling. To achieve this, simply click the element you’d like to fix, bring it to the front of your design, and select Fixed Position on the menu. Any object or set of objects can be set to a fixed position, meaning you’ll always be able to keep important information and navigation tools easy to access for users.

New to XD: Overlay support

When used effectively, overlays can simulate interactivity within your design and encourage users to take an important action. Adobe XD now allows you to easily stack content on top of another artboard rather than duplicate it on multiple artboards, simulating elements like dropdown menus, slide-up keyboards, or lightbox effects. And overlays, like fixed elements, work beautifully in both the Desktop Preview and live on the web in Prototypes and Design Specs. An earlier adopter of the feature, Cecilia Farooqi, Director of Digital Design, Equinox found that “The new overlay feature in XD gets our team even closer to creating true to end-user experiences while prototyping. In one click I was able to trigger an artboard to appear without having to navigate away from the original artboard. There are so many use cases that this feature will more accurately depict our web and app flows and ultimately allow us to launch better experiences for our members.” Click the video below to see overlay support in action.

In this video, you’ll see how to easily create a slide-up keyboard, which overlays another artboard design when the appropriate object is clicked (in this example, a search box). The great thing about overlay support in Adobe XD is you don’t have to duplicate this overlay content for each artboard; simply link the overlay element and choose the transition you want.

New to XD: Private sharing (beta)

Adobe XD is making access to your prototypes and design specs more secure than ever. You are now able to create a new private link for your prototypes and invite someone to view it by email. You can include a message, and once they’ve received your email, they will be able to view and comment on your design (they’ll need to have an Adobe ID, which they can get for free by following the prompts). Click the video below to see private sharing in action.

Team members can then be removed at any time for the last published prototype or design spec, and shared designs are easier than ever to view, review, and track via a unified web portal, something Maxx Morgan, associate creative director at Perficient Digital, certainly appreciates. “For situations when I need added security when sharing prototypes, Adobe XD now has me covered. The new private sharing feature enables me to send invites to my team and receive comments in just a matter of minutes,” he said.

New to XD: Improved crop and place image fills

In earlier versions of Adobe XD, when you dragged images from the desktop, or dropped image files into a shape or path, you couldn’t crop or reposition the image. That’s all changed with this latest update. Click the video below to see the new ways you can crop and place image fills in Adobe XD.

This new feature is a major timesaver for many designers, such as Jamie Nuzbach, creative director at Ideas Collide. “Seamless is the name of the game with Adobe XD. Being able to edit in a masked shape is so easy, and requires less back-and-forth between other programs to achieve your desired result,” she said.

More new features: Calculations in property fields, Photoshop and Sketch image fill support and Typekit for Mobile

There are continued productivity enhancements and improvements to Adobe XD this month, notably:

• Improved Photoshop** and Sketch image fill support:** Now that we support image fill editability (see above), we can now retain that editability in files converted from Photoshop and Sketch.
• Math calculations in Property Fields: Just as in other Adobe applications like InDesign, Muse, and Illustrator, you can now use simple math to calculate values when designing in Adobe XD.
• Support for Typekit on Mobile: XD documents loaded from Creative Cloud files will automatically find and sync any Typekit fonts used in the document.

Each of these new features can be incredibly useful for working Adobe XD. For math calculations in property fields, you can reduce grouped objects by 80 percent, quickly dividing an artboard area for tile design, or moving an object in an X or Y location by a specific number of pixels. “The new math calculation feature is a real time-saver,” said Daniel O’Neil, experience lead at Sapient Razorfish. “It’s now fast and easy to place elements, and experiment with spatial relationships when composing wireframes.”

UX community

We’d love to continue the dialogue. You can follow our handle @AdobeXD for updates, or reach the team on Twitter using the #AdobeXD. You can also talk to us using Facebook, where we share videos and updates, as well as answer questions during live sessions.

Meet some UX designers who have used Adobe XD. Learn how they got started in UX design and their creative process, check out some of their work, and listen to their favourite tunes.

#MadeWithAdobeXD

While sharing your prototypes on Behance, don’t forget to tag them with #MadeWithAdobeXD and select Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD newsletter.