Hey everyone, my name is Howard Pinsky, Senior XD Evangelist here at Adobe and in this video, we're going to take a quick look at improvements we've made to nested components to further streamline your workflow and enable nested hover. Let's take a look.
Components can be incredibly helpful during your design process, especially when you need to make changes across all instances. But, the process got a little bit murky once components were nested within other components. Thankfully, the team has been working hard to address many of your pain points on this design.
I've created several components for the various elements that will be used across multiple screens and within these components. I have smaller elements which are also components, but if you look at the top left, you'll notice that these are instances of the main which is now the default behaviour when working with nested components.
However, what happens when you want to make changes to this particular element across all of the components, it's sitting within? Before today's update you would have to edit it's main component even if it's not present in any of the larger ones. This was not only a touch confusing, but sometimes cause problems if you're working with elements like buttons and only want to change the ones within specific components.
As of XD 34, you can still edit the main component if you need true global changes, but you also have the option of editing the instance that sitting within the larger main component. And you'll notice that the change is pushed across the project as you would expect. Of course, you still have the ability to make overrides to any of the other instances while still maintaining a link back to the original.
One of the other big benefits of the latest components update is that it enables nested hover. Here's an element you may have seen on various social media websites. In this component contains a hover state that reveals the various emojis on mouse-over. However, inside of the state there are several nested components, each of which are also wired up with a hover effect that enlarges the individual emojis.
In previous versions of XD, only one level of hover was supported meaning that when the Emoji picker was revealed, none of the components nested within it could be triggered.
Now not only does the hover state on the parent component trigger, but the hover states on the nested components trigger as well.