By Howard Pinsky
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 behavior 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.
Components in Adobe XD save designers time when building elements that appear many times across a design. A great way to use components is to create a single menu element that can be reused across many art boards and screens of the design. Rather than re-creating the menu every time, simply use an instance of the component, and get access to all the interactive states.
In this Adobe XD tutorial, Senior XD Evangelist Howard Pinsky demonstrates how to leverage Components and Component States to create a reusable menu navigation component complete with interactive hover states nested within the component. Using Adobe XD’s powerful Auto-Animate functionality with the power of component states, this menu component can simulate a realistic user experience when navigating a website.
Nested components are components grouped within a larger component. In this scenario there are many smaller components used within the menu group that contain their own hover and interaction states. Once contained within a larger component, these nested components maintain their interactivity allowing users to hover over each menu item and interact with the menu component. Each nested component is created as an instance of the original main component, allowing each one to include overrides, but be rest to the main component at anytime. To edit a nested component, right click on the component and select Edit main component.
A popular application of nested components is the reaction button on select social media websites, where hovering on a trigger such as a thumbs up or like button will trigger another element to appear. This overlay element contains a series of emojis which themselves also include actions such as hover and tap actions. Each emoji is nested within the larger reaction component allowing it to be reused across multiple posts and pages. Learn about nested components and more with Howard Pinsky in this Adobe XD nested components tutorial.
