Tap/Hover Effect
Need Little bit tapping/hover effect on list/buttons/links during presentation to client. Its give an actual working product feel and help to make decision.
rollover, mouseover
Tap & Hover functionality is now available in XD 24!
https://theblog.adobe.com/xd-november-2019-update-coediting-more/
-
James commented
Very buggy
-
Anonymous commented
If I share it to developer as a link.. How can they see the css codes of the hover (for example dropdowns)
-
Stefan Dickerson commented
If you want hover to be a trigger for artboard navigation (tooltips, mega-menus, data viz simulations, so many possibilities!) not just button states, head on over to https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38972416-hover-triggers-to-all-elements-to-trigger-artboard and vote there.
-
Arthur Shen commented
What do I do if I want object B to have the effect as well when object A is hovered?
-
Luigi commented
It's just me, or there are a lot of conflicts on hovered elements? When multiples hover effects are close each others, only 1 will work. In particular, this happens when an element has animated elements appearing on rollover. For exemple, I have three close buttons on a line, but the one on the middle don't show his interaction state, or, for better say, not all the time. Sometimes you'll get it, sometimes not. And you have to move your mouse in an empty hover zone of your prototype. Not the mention the rapidity of hover effect while moving the pointer over different elements. I'm seriously think about to move on and start using others tools. It's just painful!
-
Tor Gundersen commented
@Luigi - is this what you're trying to accomplish?
-
Tor Gundersen commented
@Flavio - I was able to get this test to work. Are you still having issues?
-
Tor Gundersen commented
@Theunis is this what you're looking for? It's not perfect but seems pretty close
-
Theunis commented
I'm seeing a lot of people saying where is the Tap function and others then relying with 'its set-up via the prototyping panel'. Like @danielle asked [November 26 2019, 20:48] - "...we also need to be able to apply a tap interaction to an element..."
I think people are asking for something like a tap animation that plays like on Material Themes. See the attached animation.
It's a very specific instance though because Material buttons make use of multiple layers to make this look possible.
I might be wrong in my interpretation of this request, but that's what I'm reading and getting.
I read/watched the blog post again to make sure but didn't really see a specific instance apart from auto-animation.
-
Vnz commented
@danielle You can add tap interaction on an over state...
-
DBL commented
One step forward two steps back. Happy to have hover effects finally but we also need to be able to apply a tap interaction to an element in hover mode. It should not be this difficult to make a dropdown menu.
-
Flavio Mauri commented
Have somewhat the opposite of Luigi's problem: I have a box that responds to hover and want a clickable button in it. I can't click the button if is in this box.
I can only make the dialog (overlay) work on a box that is not contained in the box that hovers.Seems deffo a limitation of XD rather than some mistake in designing the document.
It's ridiculous tbh.
-
Luigi commented
2 hover effects in the same elements block won't work.
Maybe it's just me, but it seems impossible to get a "double" hover effect in XD.I'm working on a single artboard, multiple components and elements groups.
Here my issue:
I need to show a sidebar menu by rollover on burger menu icon and until this step everything works very fine.
Unfortunately, when I want to get an hover effect on the sidebar menu elements, hover effect symply won't work and I need to use a click action to show up the interaction.I don't know if it's just me or it's a bug/limitation of the software.
-
Eddie commented
Finally, thanks! I agree that an option to make a transition to an artboard with overlay effect on hover instead of click would be nice too. Next upgrade perhaps? ;-)
-
P commented
Having a hover state to a component is nice.
But it still doesn't solve the issue of needing to transition to another artboard when something is hovered. It is BADLY needed.
Adobe, isn't this an incremental add over the triggers you already support?
-
Val commented
Very disappointed. They are a zillion other tools that make the "hover effect" a very easy process. You draw a shape/text .. convert to a hover button and give the new state. 2-3 clicks ... to create separate states of each interaction is an useless work.
I was hoping more from mighty Adobe... Back to my AXURE drawing... I was really hoping that I would finally make use of the Adobe XD... but probably not for another 8-12 months... sad...
-
Dee commented
This is really awesome feature I've been waiting for!!
After playing around with it, 1 thing I noticed that is pretty annoying is the states are not reflected even after I click update asset on the asset panel.
-So, I have a separated file for all assets and my actual project, so what I usually do is call the assets file from clouds (this is so my other team member able to use the same assets when they working on other pages).
So with the new state feature where I can add hover and other states to my buttons, I change some of my buttons in the master assets file (the one i save on clouds) and then I click update assets on my project file.
The default state is updated but not the other states (hover, inactive, etc..) Whatever changes I made to the other states in the master component file it doesn't reflect on my actual project. I need to copy-paste the master component to my project every time I make changes to the states. Imagine I have 20 buttons across 10 pages I need to copy-paste all 20 buttons to make sure the states are reflected.
Here is what I did to the button (so you guys can visualized it):
Default state: green rounded btn with purple text and arrow
Hover state: green rounded btn with white text and arrow
Inactive state: green rounded btn with grey text and arrowThe client replied and ask for this change:
Default state: green rounded btn with blue text and arrow
Hover state: green rounded btn with red text and arrow
Inactive state: green rounded btn with white text and arrowWhat happened after I click update on the assets panel:
Default state: green rounded btn with blue text and arrow
Hover state: green rounded btn with white text and arrow
Inactive state: green rounded btn with grey text and arrowBasically the default state changed but not the other states.
Does anyone encounters the same?
-
Anna commented
This is an awesome start! So much better than the weird workarounds I had to use in Sketch / InVision. Would really love if you could specify the state of another component on the screen when clicking a component though. My particular use case for this is sorting a data grid. Being able to change the state of one of the other headers to flip the sort arrow when clicking would be really handy. But seriously, this is so helpful for links, buttons, all kinds of things. Thank you!!!
-
Thomas O commented
CSS specs for HOVER seem to be missing when sharing for development. This is very annoying. First of all, it's already annoying that you have to set a tap-thru interaction in order to get all the artboards to show up in Share mode, and the CCS gives specs for the tap-thru which are irrelevant. What we need are CSS specs for actual states and transitions like hover and other custom states. Am i missing something??
-
Armando commented
Thank You Adobe!!!!