Buttons and Auto Layout

Creating buttons in Figma is simple and utilizes the Auto Layout feature for responsiveness:

• Select multiple elements (e.g., an icon and text), right-click, and choose Add Auto Layout, or use the shortcut Shift + A. Or alternatively, click the Auto Layout icon in the Design panel under Layout;
• The frame icon in the Layers panel will change to indicate it's an Auto Layout frame;
• Auto Layout adds dynamic frames that adjust to their child objects. A frame becomes a "parent" only when it contains objects (children);
• You can adjust the frame's fill, corner radius, dimensions horizontally or vertically, you can set resizing options, like hug contents, to make the frame shrink to fit its text;
• You can change the layout direction (horizontal, vertical, or wrap), horizontal gap between elements or add padding (negative space around elements);
• Buttons created with Auto Layout expand or shrink as text is typed, maintaining responsiveness;
• You can also stack elements on top of each other, then apply Auto Layout to group them;
• Auto Layout settings include adjusting the behavior of strokes in regards to the auto layout frame, and modify the stacking behavior which allow objects to stack on top of each other.

All in all, auto Layout enables you to create buttons and other designs that adapt seamlessly to content and layout changes.