How to Create a Responsive Button in Figma

TL;DR

Create a responsive Figma button by applying auto layout to a text label, styling the resulting frame, and setting its resizing behavior to hug contents. Use semibold 18-pixel text, white lettering, a black frame fill, an 8-pixel corner radius, and 16-pixel horizontal padding, then convert the finished frame into a main component for reuse.

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 a text layer for the button label, format it, and select it before pressing Shift+A to apply auto layout. Figma creates an auto layout frame around the text. Give the label a white fill, add a black fill to the frame, set the corner radius to 8, use 16-pixel horizontal padding, and leave resizing set to hug contents.

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

A rectangle, text layer, and surrounding frame can look correct initially, but that construction does not automatically respond when the label changes. Auto layout places the text inside a flexible frame that also acts as the button surface. With hug contents enabled, the frame grows or shrinks as the label changes, reducing the need for manual resizing.

Q: What do Figma auto layout properties control?

Auto layout properties determine how a frame and its child layers interact. Resizing controls how the frame's height and width respond to content changes. Direction controls how children flow, gap defines spacing between children, alignment positions them within the frame, and padding controls the space between the frame boundary and its child layers.

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

Hug contents makes a frame expand or shrink according to the size or amount of content inside it. Fill container makes a nested object stretch across the full width or height of its parent as that parent resizes. Fixed sizing preserves a chosen dimension, such as a parent frame matching one device's resolution or a notification maintaining a consistent width.

Q: How should the text and colors be styled for this Figma button?

Set the label's font weight to semibold, its font size to 18, its line height to auto, and its alignment to center. Leave the demonstrated font family unchanged. Enter F in the text fill field to produce pure white, then select the button frame and enter zero in its fill field to produce black.

Q: How does padding affect an auto layout button in Figma?

Padding controls the space between the auto layout frame's boundary and the text layer inside it. Figma initially sets the padding to 10 because the big nudge preference is 10 and no surrounding layers indicate another spacing value. Change the horizontal padding to 16 so the button's width becomes slightly longer than its height.

Q: Why should a button frame use hug contents?

Hug contents allows the frame to resize automatically whenever the button label grows or shrinks. Changing the label from button to continue or next demonstrates the behavior. It is especially useful when one button element will appear in different contexts or when its text is translated, because designers do not need to resize the frame manually.

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

Finish styling the button and configuring its auto layout properties, then select the entire button frame. Click Create component in the right sidebar or use the available keyboard shortcut. Figma places the button inside a purple bounding box and changes its layer icon to four diamonds, indicating that it is now a main component for 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.