Button (component) padding & width questions

Explorer ,
Jul 29, 2020 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!

TOPICS
Design, How to, Missing feature, Prototyping

Views

126

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
community guidelines

correct answers 1 Correct Answer

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

Likes

Translate

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


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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
community guidelines
Explorer ,
Jul 30, 2020 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
community guidelines
Adobe Community Professional ,
Aug 02, 2020 Aug 02, 2020

Copy link to clipboard

Copied

LATEST

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

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
community guidelines