How to Create a Responsive Button in Figma, Figma Design for Beginners [6 of 13]

TL;DR

Create a responsive Figma button by applying auto layout to a text label, setting the frame to hug contents, and converting it into a main component. Style the label with semibold 18-pixel text, use a black frame with an 8-pixel corner radius, and set horizontal padding to 16 pixels. Read on for the exact steps and an explanation of the key auto layout settings.

Transcript

In this lesson, we'll use auto layout to build a responsive button element that automatically grows and shrinks as its label changes. We'll then turn the button into a main component so we can reuse it in other designs. Here's the button we're going to use to recreate this design. It seems like we could use a rectangle for the background, a text la... Read More

Key Insights

• Auto layout is a Figma feature that makes frames responsive and adaptable by automatically adjusting their dimensions and organization as content changes. It can reduce manual layout work when labels change, child layers are inserted, or a design needs to accommodate different amounts of content.
• The resizing properties determine how a frame's width and height respond to its child layers. Hug contents makes a frame grow or shrink with its content, fill container stretches a nested object across its parent, and fixed dimensions preserve a consistent width or height.
• The direction property determines how child layers flow inside an auto layout frame. A horizontal direction keeps an image and label side by side, while a vertical direction allows a parent frame to expand downward as additional list items are inserted.
• The gap, alignment, and padding properties control distinct kinds of spacing and positioning. Gap establishes consistent space among child layers, alignment places those layers within the frame, and padding defines the space between the frame boundary and its children.
• A responsive button can be created by selecting its text label and pressing Shift+A. Figma then creates a frame around the selected text and applies auto layout, allowing the frame to serve as the button surface without requiring a separate background rectangle.
• The button label is styled with semibold weight, an 18-pixel font size, automatic line height, centered alignment, and a white fill. The surrounding frame receives a black fill and an 8-pixel corner radius, producing the demonstrated button appearance.
• Hug contents is useful for reusable buttons because the frame automatically resizes when a label changes from button to continue or next. The same behavior also helps the button accommodate labels translated into another language without requiring manual width adjustments.
• A main component provides a reusable source for button instances in other designs. After selecting the finished button frame and choosing Create component, Figma displays a purple bounding box and changes the layer icon to four diamonds to identify the main component.

Questions & Answers

Q: How do you create a responsive button in Figma?

Create and format a text label, select it, and press Shift+A to apply auto layout. Give the label a white fill, add a black fill and an 8-pixel corner radius to the generated frame, set horizontal padding to 16 pixels, and leave the frame set to hug contents.

Q: Why use auto layout instead of a rectangle for a Figma button?

A separate rectangle and text layer may look correct, but the background will not automatically respond when the label changes. Auto layout creates a flexible frame around the text that can act as the button surface and grow or shrink with its contents.

Q: What do Figma auto layout properties control?

Resizing controls how a frame’s width and height respond when its child layers change, while direction determines how those layers flow. Gap sets spacing between child layers, alignment positions them within the frame, and padding controls the space between the frame boundary and its children.

Q: What is the difference between hug contents, fill container, and fixed sizing?

Hug contents makes a frame expand or shrink with its content, while fill container stretches a nested object across its parent as the parent resizes. Fixed sizing preserves a chosen width or height, such as a parent frame matching a device’s dimensions.

Q: How should the button label and frame be styled?

Set the label to semibold weight, an 18-pixel font size, automatic line height, centered alignment, and a white fill. Give the surrounding frame a black fill and set its corner radius to 8 pixels.

Q: How does padding affect an auto layout button?

Padding determines the space between the frame boundary and the text label inside it. For the demonstrated button, set the horizontal padding to 16 pixels to create the intended proportions.

Q: Why should a Figma button use hug contents?

Hug contents automatically resizes the frame when the label grows or shrinks. The lesson demonstrates this by changing the label to “continue” or “next,” and the same behavior helps when the button is reused in different contexts or translated.

Q: How do you turn the finished Figma button into a reusable component?

Select the completed button frame and choose Create component in the right sidebar or use the available keyboard shortcut. Figma then shows a purple bounding box and changes the layer icon to four diamonds, identifying it as a main component that can provide reusable instances.

Summary & Key Takeaways

• Auto layout turns a frame into a flexible container whose size and organization can respond automatically when its child layers change. Its properties control resizing, content direction, gaps, alignment, and padding. These controls support simple horizontal list items, vertically expanding lists, fixed device frames, and layouts that adapt to multiple screen sizes.

• To build the button, create a text layer labeled button and format it with semibold weight, an 18-pixel font size, automatic line height, and centered alignment. Apply auto layout with Shift+A, rename the generated frame button, make the label white, give the frame a black fill, and set an 8-pixel corner radius.

• Set the button frame to hug contents so its width automatically follows labels such as continue or next. Keep the generated padding behavior in mind, then change the horizontal padding to 16 for the intended proportions. Finally, convert the completed frame into a main component so reusable instances can be added to other designs.