It will be very difficult to create this type of shape in Figma, and more problematic is that we can’t apply the auto layout to this type of shape. So for any of the small changes, we need to change it manually, which is a very time- and effort-consuming process. I suggest allowing for the option to change the space to round or sharp edges in shape radius options
You can assemble complex shapes in an auto layout.
And here you can see and duplicate an example of a button with a complex background: Complex Button variant and properties - #2 by tank666.
But how can I manage the same sharp edges when I collapse and expand height and width?
This is another option where complex shapes work when we have a fixed flat background, so we can apply the background colour to the diamond shape to make it. But as you can see in the result, we face the issue with the stroke option, and it doesn’t work when we have a colourful background and try to build a transparent interface.
Looks like you haven’t looked at my file.
Yes I was not check this file, Can you please share the link?
I am still facing certain issues while creating a button component. I need to setup customization options for the button background where I can set the diamond size and angle. Can you check the file and guide me?
Look at the “Done” frame in your file.
Magic ✨
Can you please share a short video tutorial on this with the same component. I want to fix my mistakes.
I discovered how to accomplish it correctly; we simply need to resize the backdrop to match the font width and height, and then auto layout padding will function properly.
agree, you can always recreate it in another way but the extra effort for a simple shape is absurd.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.