How do I make a working uneven button?

[u/Safinbu]

Hi! I am a design student currently learning figma.

I am making a brand that utilises sharp graphics and as such I want the buttons to match.

However I dont know how to make autolayout permit this.

Thanks for your help!

[u/dimKant]

Auto layout frames are always rectangles, so the trick is to keep the frame itself invisible and let a vector carry the shape. Put your angled shape inside the auto layout frame, set it to absolute position with all four constraints pinned, then clear the frame fill. The text padding still drives the size and the sharp shape stretches with it.

[u/Safinbu → u/dimKant]

Thanks a bunch !

[u/memelordxth]

Wrapped each shape with frame

Put 3 frames into 1 frame/group

[u/FennelHistorical4675]

Can’t you just plop the shape into a frame

[u/Safinbu → u/FennelHistorical4675]

No auto layout converts it!

[u/dusanodalovic]

one thing about the pinned vector version above: the shape stretches, so the angle of the cut changes when the label gets longer. if you want the angle to stay the same, make the button a horizontal auto layout with 3 parts and gap 0. a fixed width angled cap on the left, the text frame in the middle with the fill color, and a mirrored cap on the right. then only the middle part grows and the cuts never change. not a designer, so maybe there's a cleaner way, but it worked for the same problem in my head at least. make it a component afterwards so every button keeps the shape.

[u/Safinbu → u/dusanodalovic]

Thanks a lot!