Skip to main content
J
JodieeWardd
Participant
June 3, 2020
Answered

How do I add the same hover state to all of my buttons on Adobe XD?

  • June 3, 2020
  • 2 replies
  • 2929 views
I have several buttons throughout my document that say different things, such as 'contact us' and 'add to basket'. I initially made a 'button' a component to keep padding etc consistent, so I could drag the button onto the canvas and override each button when I change the text. However, when I add a hover state to the master component, applying to all buttons, the button that says 'contact us' for example will then say 'button' when I hover over it, due to my master component saying 'button'.
I have been in a google search all morning but cannot find a solution, do I have to individually add states to each button that has different text? So for example the 'contact us button' and 'add to basket' buttons be treated as their own components with their own hover states added? Sorry if this doesnt make sense, i'm new to XD this week and really struggling to put this one into words!
This topic has been closed for replies.
Correct answer Jagriti_Kashyap

Hi Jodiiejode,

 

My understanding of your issue is  you want to have a hover state in each of your overriden instance but the hover state should have the text of the overidden instance. If my understanding of your issue is correct you can try the given steps to achieve it.

  1. create a component with text (button in urs case)
  2. create instances of it and override the text as per choice
  3. go back to master component, create a hover state with the desired text (say text2)
  4. In the overidden instances, go to hover state, text2 will be seen. If you want any different text even in the hover state you need to overide the text2 in the hover state of the overiden instances.  

2 replies

M
MR A
Participant
June 26, 2020

this is a bit of a shame i think;  would be nice if this was somehow integrated directly and automatically

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
June 26, 2020

Yeah, welcome to the club of disappointed Xd users 🙂

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38973007-allow-component-instance-overrides-to-be-inherited

    M
    MR A
    Participant
    June 30, 2020

    yes... but i discovered that all this is for naught, bc i cant even convert an xd file into an html file without a third party.  so i am going to give up on xd and go back to twiddling in dreamweaver.  what a shame

    J
    Community Manager
    Jagriti_KashyapCommunity ManagerCorrect answer
    Community Manager
    June 3, 2020

    Hi Jodiiejode,

     

    My understanding of your issue is  you want to have a hover state in each of your overriden instance but the hover state should have the text of the overidden instance. If my understanding of your issue is correct you can try the given steps to achieve it.

    1. create a component with text (button in urs case)
    2. create instances of it and override the text as per choice
    3. go back to master component, create a hover state with the desired text (say text2)
    4. In the overidden instances, go to hover state, text2 will be seen. If you want any different text even in the hover state you need to overide the text2 in the hover state of the overiden instances.  
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices