👀 I see that weird border. From the images you provided it looks to me like you have an extra rectangle in your button group. You can refer to this example figma file for a reference of how buttons must be structured. I can't speak for the bezels without more information. I'm not a designer, just holding down the fort.

@jvendegna
Thanks for your response.
I just ran tkinter-designer on the example figma file you sent me.

Here's the output:

Here's the expected result:

Fair enough, I appreciate your input and response. Let's see what, if anything I can do. Parth is out for about another month. The expected result would not include the text for 'Frame 1' but I understand your sentiment. It could be my example is making a similar mistake. I'll start digging and get back to you asap.

Awesome, thanks. Looking forward to your response.
The 'Frame 1' text wasn't intended, just accidentally included it in the screenshot.

I got it. I actually stopped half way through reading the element guide in the instructions... Always read the docs.

I added a rectangle layer without rounded corners underneath the rounded rectangle in the button group, then set the background color to the same as the frame background color. Results look a lot better.

The method I suggest is to simply copy the existing rounded rectangle, paste, remove the rounding from the corners, set the bg color. This way you can be sure they are perfectly aligned.

Now I think I understand your question better. My design also makes that weird white border when I click the buttons. Must be a glitchy animation or something. I'll keep digging.

Awesome thanks.
I just checked the gui from this repository since it's apparently made with Figma & Tkinter-Designer.
It seems to have the same issue:

Much less noticeable due to the white background, but very visible on a dark background.

Okay, I have a workaround for you. In your resulting build/gui.py file you'll find a line near the top with:
window.configure(bg = <hex_color>)

Copy that, or if you know your hex color just modify the gui.py file where you have buttons, like so:
For example, change this:

button_1 = Button(
    image=button_image_1,
    borderwidth=0,
    highlightthickness=0,
    command=lambda: print("button_1 clicked"),
    relief="flat"
)

to

button_1 = Button(
    image=button_image_1,
    borderwidth=0,
    highlightthickness=0,
    activebackground="<your hex color with the # symbol>",
    command=lambda: print("button_1 clicked"),
    relief="flat"
)

I'll push up a fix to the generator. But it'll be a while before it gets merged. Feel free to clone the branch. You'll see it tagged here.

The fix works well! 👍
Just need to make some alterations in the pull request, and the Figma Window needs to have it's fill colour set for it to work.

As for the bottom rectangle not having the bezels, the solution was to set the name to 'Image' instead of 'Rectangle' in Figma.

Thanks a lot for your help!

QQ: I see your edited comments. I am curious, your solution seems to work on my end - adding self.frame = frame to the init method. What went wrong for you, if anything, because of this?

Hey @Rulerofzeworld & @jvendegna the bezels on the button when clicked are indicators that the button is clicked and it's something that is implemented by tkinter to make sure that the user understands that the button has been clicked.

Also how does adding active background property improves the result. I read the comments but didn't seem to understand it quite well.

Also when testing new Pull requests or features try using this file -
https://www.figma.com/file/WVLnulVsI177tvnxSdqOUZ/Untitled

it has all the elements necessary.

@ParthJadhav the animation on a button click remains, so the user does receive visual feedback on-click, however the bezel adopts the color of the background with my changes. I think it's more visually appealing is all. It could be an optional arg with a default value. But I think this may be a fix for eliminating the need for a second rectangle in the background of a rounded-corner button as well. Making the overall user-experience more uniform.

Thanks for the link to the test-file. I'll add a script to the makefile for generating that UI.

Let's try this out. I'll be testing it soon.