Component States in Adobe XD – Hover & Micro-Interactions

how to scale the animated state

Didn't blink once during the intro. That's exactly the slab of people I expect to celebrate Adobe made UX

That website doesn't work. I needed help for a deadline. I'm so unhappy with you...

Thanks for this tutorial Howard. I used to work with figma but I'm working in a company that only uses Xd. I was creating a lot of screen so show the interactions, this tutorial saves a lot of time. Thank you!!

There is no downloadable file in the link you shared, it redirects to Adobe XD page about your video.

Just need the ability for child elements to trigger a parent state now.

WHY am I the only one who thinks this is EXTREMELY COMPLICATED?.... FFS, so frustrating :(

Wow, that's surreal. Can't wait to learn all these thoroughly.

I wonder why you didn't demonstrated the states on a checkbox or a radiobutton?

Coolllll <3 thankssss

Please do not start a video with your face, it leds me to think that the whole video will be just a face talking over the stuff, expressing his own thoughts.

Hi Howard, first of all thank for all of these videos, you don´t know how much they help. I just wanted to point out one thingy, when clicking the download button on the web, it doesn´t download (on Chrome on Windows) I have to ctrl+click so I can get the files.
Keep up the good work, you are amazing!

This is so amazing!! Super stoked on what this now allows you to do:) Thanks so much for yet another amazing video:)

This literally doesnt work in the latest version of xd. It just applies all your changes from your hover state into the default state. Is it possible they just got rid of this feature? or is it an extreme bug only I have?

Is it possible to have component states work in a exported file? It won't work for me.

I opened up your states example, but the 4 state button and form fields isn't doing anything. Am I missing something?

Hey Howard, thanks for these great explanations! I'd like to know how it works, when I make an accordion, once the first row opens, that the rows underneath slide down automatically, so the content isn't hidden behind the opened first row. I wanted to create one row as one component and duplicate that, but maybe that's the wrong way? Would really appreciate if you could help :)

Can we create a drag trigger into component in one artboard?

Great tutorial. Helped me a lot

What kind of fucking camera is that? ....Fuck..!

Uhm, so how do I link a component state to let's say a page? For instance if I have a dark mode switcher I would like the second state to go the dark page and then back to default when clicked again. That switcher is very dead. You can make it switch from one state to another, but its not possible to link the states to actually show the authentic interaction, as in page link. It's just a pointless switcher with no interaction. I tried to add a link directly to the component switcher when I placed the switcher on the page but that didn't work. I tried to add an interaction link directly to the component as a third state but that didn't work.

Thank You sir

This is a lifesaver. I was about to create all the instances in separate artboards.

Amazing! thankyou

dude, you remind me of the chicken in the Mercedes-Benz MAGIC BODY CONTROL TV commercial, you move your head but not your eyes

Amazing

I needed to go on a jog after watching this

Very helpful video, thank you!

It just doesn't work. When I edit the default state it also affects the hover state and visa versa, unable to edit each state selectively. Unable to add elements as well as that doesn't include in the component. Also its no way to add links to an onclick event, in case of a menu for instance. Can't connect that to an artboard. Can't change text styles like weight etc either when the text is a component.

This is so awesome! Such a timesaver :) Thanks for the video.

This. Is. PERFECT! Thank you for your video and for the downloads provided!

Just one thing I am having trouble finding an answer to. I have a dropdown list that I've made into a component. I've had to expand the artboard height beyond the viewpoint height so i can see the whole list when it's expanded, but when the list is collapsed the there is a lot of white space and the page is still scrollable in preview mode. Is there a way to make is so the artboard changes size relative to the component state?

Why does my Adobe XD not have the same appearance options as you do, about to throw my laptop out the window.

Excelet! Thank you for all the tutorials, are great. One question, how can I use hover state in a mobile app? On presentation or user testing, the hover is inactive.

Don't know if that's a bug or what but to me destination only showing artboard but not states as well.

Is it possible to do a mega menu type of interaction (menu, opens up a mega menu with different hover or clicks to show different sub navs/change images on sub nav) and have other category links to go to different artboards?

How du you animate a dropdown menu inside a dropdown menu? It will only execute the first one in prototype mode. Not the secound one.

I just want to say thank you, this is a such a cool feature of adobe XD. I just starting learning XD about a week ago and it is an amazing product!

I've been sitting on my computer for the past hour looking for "worth watching tutorials". I am learning XD and I want to turn UI & UX Designing into a career.

Your video is amazing Howard. You just got yourself a new Sub.

Hello, anyone know if there is an option to go back to the artboard when you double click the component to edit?

I'm so turned on right now.

I have a Windows and i can't find anywhere that "Component (Master)" :(

This stuff is awesome. You're a national design treasure. Yeah, I said it.

States are awesome, just wondering if there is a way to link multiple components within the artboard?

Dear Howard,


Thank you. This is amazing and it's gonna help me so much within this project I am currently working on.

Awesome prototyping but I couldn't download the UI kit and i don't know why

how do you make search icon to box with smooth morph? any video which explain it?

Thank you so much! The guide you've built is just amazing, I can't stop feeling that "Woooow" thing haha... The only problem is that now there are some examples there that I can't stop looking and trying to figure out how did you make it. haha

Great

wow! such a great video! do useful! THANKS!