button with icon + number

Community Beginner ,
Apr 25, 2022 Apr 25, 2022

Copy link to clipboard

Copied

I'm trying to create a component that looks like this:

salvuchi_0-1650880462271.png

 

I don't know how to achieve this alignment:

- If the number is smaller or bigger, I want the circle moving next to the number and still be in the center of the grey rectangle

 

Any ideas? Thanks!

Views

276

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 ,
May 07, 2022 May 07, 2022

Copy link to clipboard

Copied

Hmm I'd do it this way, if I'm not missing something, I think that's the best way to keep the left and right padding of the button same regardless of the length of the number:
1- Group the circle and the number
2- Center the group to the button background and decide the empty space you need, adjust the button bg size if necessary and center align the group again.

3- After deciding that the padding the button has is enough, group the button bg and the group we already have (circle and the text) or better, make them a component.

4- Tick the padding option in the right sidebar. That way the component/button would keep the padding same. 
You can check this video if you're not familiar with the padding in XD: https://www.youtube.com/watch?v=_YGskIKPAPg
Hope this helps!

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
Community Beginner ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

thanks for your answer. this option works fine and I didn't know much about padding so I learned something new.

unfortunately I didn't explain myself properly, this option is not really ideal for me, because I need the button width to stay locked, and just make the circle + number move inside according to the size, so it's always positioned in the center. my rectangle is big enough to allow for certain amount of numbers, but the numbers should be able to be changed and stay in the center. my button in my layout cannot change the width because it's located in a locked area with things around.
I guess what I need is not possible to do in XD at the moment, right?

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 ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

Hmmm I see, centering both circle and the number, that doesn't look possible to me, maybe there's a way that I can't think of. I guess the only option is just selecting the circle and the number, grouping and centering manually each time number changes. One other option might be, typing a circle with a font that has that character (you can check here https://www.alt-codes.net/circle-symbols and copy-paste into your text), setting its size and horizontal space seperately but in the same text box, and then switching to the body text font & styling, centering that single text element to the button. That's the only way I can think of now, hope this helps!

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
Community Beginner ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

LATEST

actually that is a nice idea and it should do the trick for now! thank you

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