Skip to main content
S
stephenm14622013
Known Participant
July 29, 2020
Answered

Button (component) padding & width questions

  • July 29, 2020
  • 1 reply
  • 548 views

Short version: If you set a button (component) in a Master Doc to have horizontally padding. Is it possible to overwrite this on individual instances of the component?

 

If not, I guess I'll just need to have a button (component) without any horizontal padding and just change the width manually on each instance to get the desired affect. I know I could have one component with 30px horizontal padding, another with 60px and another without padding which can be scaled to 100% but this seems a bit OTT and difficult to manage for x3 very similar buttons?

 

As an aside to the above, is it possible to to change how the button component is aligned (left/centred/right) when resized/padding is changed? I noticed when I changed a button's padding it jumped to the right of the prototype when I thought it would align to the left edge when the size changed?

 

Finally, if you change the width of a component and it has various states. You need to update the width on every single state - is that correct? It's a bit of a pain to size a button and then when you hover over it, the width increase to the origin size in the Cloud (master) doc. This seems to be the case ...but I just wanted to check I'm not missing something!

Thanks in advance!

This topic has been closed for replies.
Correct answer Dan Rodney

OK. I thought by resizing you meant to change the width, not the padding. You can change/remove padding in each instance, so you could have a default button padding, which you can change on each instance.

1 reply

Dan Rodney
Community Expert
Dan RodneyCommunity Expert
Community Expert
July 30, 2020

Is it possible to overwrite this on individual instances of the component?

Yes, you can resize it.

 

Finally, if you change the width of a component and it has various states. You need to update the width on every single state - is that correct?

Yes, as far as I know.

Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
S
stephenm14622013Author
Known Participant
July 30, 2020

Thanks Dan!

 

When I said resize, I meant if I had a component with (for example) 60px horizontal padding set in the Master Doc. Then I drag that onto an Artboard in another XD. I don't think I can remove the padding at all? It has to keep the padding specified in the Master Doc - unless I'm missing something I can't see a way to turn off padding/stretch the element.

 

Seems like I may be better no setting padding in the Master Doc and padding it instance by instance in the child documents? Doesn't seem ideal but I have so many different variations I think I might need to do this just for flexibility.

 

Otherwise I'll have a black button with several variants for size, padding, flexible width - which I think will make the Assets panel more difficult to follow / it's a bit OTT?

Dan Rodney
Community Expert
Dan RodneyCommunity ExpertCorrect answer
Community Expert
August 3, 2020

OK. I thought by resizing you meant to change the width, not the padding. You can change/remove padding in each instance, so you could have a default button padding, which you can change on each instance.

Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices