By Dani Beaumont
In addition to being able to access overlapping objects in the design canvas and Adobe XD 23 you can also access these overlapping objects or hidden objects as part of the developer handoff and design specs.
I'm here in a design spec that I just created that includes some examples of blend modes applied t0 layers within a group. As is usually the case with Adobe XD, the team delivers these capabilities not only the design application, but when you preview your work in a desktop player app and a mobile browser, in prototypes and of course in design specs that you'll hand off to your developer. As I look at this individual page, I want to start to examine some of the specifications. To do that, I'll come here to the right side and click on the spec icon. I can now come in and look at not only what's visible on the surface here, but all of the hierarchical layers related to the design on this artboard. So if I hover over the word Yosemite let's say, notice that as I highlight that, I can bring up the right menu, which shows me the hierarchical structure for this object. So I see that, I've got hero text behind that there's a hero image and underneath that there's the header.
If I come to the logo above here and right click on it notice as I travel in the hierarchy the selection changes to show me which area which object I have selected on that canvas. If I click off again and scroll down towards the bottom earlier on I was working with some blend modes and I'd like to take a look at those. If I come to for example this Firefall tile and right click on it, I can see the hierarchy. There's the background card, the overall Firefall card the background image and then the overall background for that artboard. If I go ahead and select card large fire fall and release on it, notice that here in the properties I can see that a blend mode was applied to that layer and it's a hard light blend mode.
Well now that I have this ability to navigate through the hierarchy of the design, I'm really not sure how I did without it in the past. Something tells me you're going to feel the same.
Design files can involve many layers of content from background images, and text layers to images and masks. XD makes it easy to select these layers in both the canvas, and in the web, based on the Design Spec view. In this tutorial, learn how to show layers in Adobe XD when they're concealed by others using hot keys and a right-click menu. This makes it possible for development teams to find a specific layer for inspection.
