Create auto layout button with combine shapes

Hello all!

I was wondering if it’s possible to create a 3D button with auto layout? I can’t seem to figure this out. Any help would be much appreciated. Thanks in advance.

Screenshot 2021-02-13 at 14.09.43

It’s not a simple task but it’s possible. You just need a bunch of shapes and auto layouts. I just added an example of such button to my Auto Layout Tips & Hacks file on Figma Community: https://figma.fun/nlzApu

1 Like

AMAZING! Thank you very much @Gleb. You’re definitely right in saying it’s not a simple task. Even after inspecting what you had done, It still took me a bit of time to understand it. I wonder if there is a way to stretch the button and make all the elements resize perfectly. The only way I can do it is by going in the ‘middle’ layer and changing the padding in the auto layout setting.

1 Like

If the answer solved your problem, feel free to mark it as a solution. :slight_smile:

Yes, you can make it manually resizable, but for that you’ll need to change the frames called “middle” and “horizontal” to fill container. Maybe you can avoid that somehow but I haven’t found a way. I just added an example to the file, you’ll need to duplicate it again to get the updated version.