Highlighted

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

New Here ,
Jun 03, 2020

Copy link to clipboard

Copied

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!

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.  

Topics

Design, How to, Missing feature, Prototyping

Views

234

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jun 03, 2020

Copy link to clipboard

Copied

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!

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.  

Topics

Design, How to, Missing feature, Prototyping

Views

235

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 03, 2020 0
Adobe Employee ,
Jun 03, 2020

Copy link to clipboard

Copied

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.  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2020 0
Community Beginner ,
Jun 26, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2020 0
Adobe Community Professional ,
Jun 26, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2020 0
MR A LATEST
Community Beginner ,
Jun 30, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 30, 2020 0