Introduction

Components solve a repetition problem in interface design. A button, text field, badge, navigation item, or product card may appear many times, but each copy still needs the same spacing, typography, alignment, and visual states. A main component stores these design decisions; its instances are reusable copies placed in screens. When the main component changes, instances can inherit the update while retaining permitted content or property changes.

Auto Layout gives these components rules for arranging their children. Instead of drawing a button at one fixed width and repairing it whenever the label changes, you define padding, gap, alignment, and resizing behavior so the structure responds to its content. The goal is to make reusable objects behave predictably when text, icons, states, and surrounding widths change.

Auto Layout Foundations

Start with a frame that contains the layers belonging together. Select the frame and add Auto Layout with Shift + A. Choose a horizontal direction for a button row or an input field with an icon. Choose a vertical direction for a card, a form group, or a stack of navigation items. Nested Auto Layout frames let each part have a clear responsibility instead of forcing every layer into one flat structure.

Padding controls the space between the frame boundary and its children. Gap controls the space between neighboring children. Alignment controls how children sit on the opposite axis. For example, a button may use horizontal padding of 16 pixels, vertical padding of 10 pixels, an 8-pixel icon-to-label gap, and centered alignment. These values are examples, not universal rules; the important principle is to use a deliberate spacing scale and apply it consistently.

Resizing modes determine how an element reacts to content or available space. Fixed keeps a defined dimension. Hug contents makes a frame expand or contract around its children. Fill container makes a child use the available space in its parent. A button label can hug its text, a button can hug its width, and a form field can fill the width of its column. Test long labels and larger text sizes before approving the structure, because a layout that works only for short sample content is not truly reusable.

Building a Reusable Button

Build a button from the inside out. Create the label with the intended text style, then place an optional icon and label inside a horizontal Auto Layout frame. Align them on the same visual center line and set a clear gap. Check that the icon has a stable size and that the label has enough line height for comfortable reading. Avoid adding an icon merely to fill empty space; it should clarify the action or match an established interface pattern.

Convert the prepared frame into a main component using Figma's Create component command. Give it a meaningful name that describes its role and organize it with related components. Place instances of the component in a realistic screen rather than duplicating ordinary frames. Edit the label through the instance when appropriate, so the component remains connected to its source. Detaching an instance should be an exceptional decision, not the normal way to handle variation.

Test the button with a short label such as Save and a longer label such as Continue to checkout. Also test the icon hidden, a different icon, and each visual state. A well-structured button expands without clipping, keeps equal internal padding, preserves the label's hierarchy, and maintains a stable height. Default, hover, pressed, focus, and disabled states should be visually intentional, with color and contrast checked against the product's accessibility requirements.

Inputs and Cards with Nested Structures

An input is usually a compound component rather than one rectangle. Use a vertical Auto Layout frame for the label, field surface, and helper or error message. Use a horizontal Auto Layout frame inside the field surface for the leading icon, placeholder or value, and trailing control. The field surface can have a minimum height, internal padding, border, and background color. In a form column, the outer input should usually fill the available width while its text remains readable when the content changes.

Cards demonstrate why nested structures matter. A card can use a vertical Auto Layout frame containing a fixed-ratio image, a vertical text group, and an action row. The title and description should use appropriate text resizing so longer content can occupy additional lines without overlapping the actions. The action row can use a horizontal layout with consistent gaps, while the card itself uses fixed padding and a deliberate spacing scale.

Consider the difference between a manually assembled card and an Auto Layout card. In the manual version, a longer title may collide with the button, a helper message may overlap the next field, and each copy may receive slightly different spacing. In the structured version, content pushes later elements downward, shared padding remains stable, and the same component can be placed in wider or narrower containers. If equal-height cards are required in a grid, define that requirement deliberately instead of relying on accidental stretching.

Variants and Responsive Testing

Variants represent designed alternatives within one component set. Useful properties include State with values such as Default, Focused, and Disabled; Size with values such as Small, Medium, and Large; or Style with values such as Primary and Secondary. Keep the underlying layer structure and alignment consistent where possible, so switching a variant changes the intended visual behavior without causing surprising jumps in spacing or dimensions.

Component properties provide controlled customization for instances. A text property can expose a button label, a boolean property can control whether an optional icon is visible, and an instance swap property can allow a nested icon to be replaced. These properties are different from visual variants: variants describe a designed state or style, while component properties let a user safely change content, visibility, or a nested instance without detaching the component.

Test every component in context. Replace short labels with long labels, make descriptions wrap to two or three lines, hide optional icons, change states, and resize the parent frame. Check for clipping, overlap, unexpected alignment shifts, inconsistent padding, weak contrast, and controls that become too small to use. Inspect several instances after editing the main component to confirm that updates are inherited as expected and that meaningful overrides remain intact.

Summary

A reliable Figma component combines a clear visual structure with explicit layout behavior. Use Auto Layout to define direction, padding, gap, alignment, and resizing. Use components for repeated interface elements, variants for intentional visual alternatives, and component properties for controlled instance customization. Buttons, inputs, and cards become more robust when their internal frames are nested according to the content they contain.

Evaluate the result through behavior, not appearance alone. Change the text, icon, state, and available width. A strong component keeps its hierarchy, spacing, color relationships, and readability without manual repair. If an instance clips content, shifts unexpectedly, or requires detaching for a normal use case, return to the structure and improve the component rather than patching the copy.