Figma Support Forum

Autolayout with complex background

Hi there! I am kind a newbie so please be gentle :slight_smile:
I want to create an autolayout button with complex background, it is not a simple rectangle as you see below:

And i simply can’t do it with this shape, I can’t place it as a background under the label

Could you please help me?

You can’t do that because that shape is a simple vector object. And it will look very bad if you stretch it. I recommend creating two separate sides to create the shape and placing the rectangular auto layout in the middle. I just added an example into this file I created and you can find other useful examples there too:


Thanks mate, I will play with it!

@Gleb one more tricky part, how to do it with outlined button state? Any ideas?

Easy: instead of coloring the central rectangle autolayout, put two horizontal lines in it. And turn sides into strokes, removing two vertical lines from them.