Highlighted

Button (component) padding & width questions

New Here ,
Jul 29, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Dan_Rodney | Adobe Community Professional

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.

Topics

Design, How to, Missing feature, Prototyping

Views

68

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

Button (component) padding & width questions

New Here ,
Jul 29, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Dan_Rodney | Adobe Community Professional

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.

Topics

Design, How to, Missing feature, Prototyping

Views

69

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
Adobe Community Professional ,
Jul 29, 2020

Copy link to clipboard

Copied

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.

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...
New Here ,
Jul 30, 2020

Copy link to clipboard

Copied

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?

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...
Adobe Community Professional ,
Aug 02, 2020

Copy link to clipboard

Copied

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.

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...