Last updated: October 21, 2026
Key Takeaways
- Start with a clear frame, component, or nested frame set before adding Auto Layout.
- Set direction, spacing, padding, and alignment in that order.
- Use Hug contents for labels, badges, and icon containers that need their own size.
- Slightly more horizontal than vertical padding is common for readable buttons.
Figma Auto Layout for Responsive UI Components is how you make UI pieces grow, shrink, and stay aligned without hand-tweaking every copy change or screen size. It suits button groups, cards, form rows, nav items, and any component that needs clean spacing when text, icons, or content length changes. It is less useful for freeform artboards where exact absolute placement matters more than responsive behavior. Figma Auto Layout for Responsive UI Components also gives you a repeatable way to build consistent components in Figma.
What Auto Layout needs before you start
Auto Layout for Responsive UI Components works best when you begin with a frame, a component, or a nested set of frames that already has a clear job. If you start with loose layers, the result often feels random because Figma is trying to preserve spacing that was never structured in the first place.
First, identify the thing you want to resize cleanly: a button, a card, a list row, or a field with label and helper text. Then decide the main flow: horizontal or vertical. A horizontal flow handles text plus icon, pills, or toolbar items. A vertical flow handles cards, stacks of text, and content blocks.
You also need to know three terms before touching the controls: padding, item spacing, and resizing. Padding is the space inside the container. Item spacing is the gap between children. Resizing is how the frame and its contents react when the text changes or the parent gets wider. Those three settings do more work than any style effect.
One honest limit: Auto Layout is not a magic replacement for constraints. If the design depends on a child sticking to a corner while another child stretches, you still need to think in terms of frames, constraints, and nesting rather than assuming a single Auto Layout pass will solve it. Figma’s own Auto Layout guidance covers these behaviors in the product docs. (Source: Figma Help Center)
How do I set up Auto Layout in Figma?
Figma Auto Layout for Responsive UI Components is set up by wrapping selected layers in a frame, then defining direction, spacing, padding, and alignment in the right order.
-
Select the layers that belong together, such as text and icon inside a button.
Use Shift-click or drag to select the group. When it works, the layers are ready to move as one unit rather than separately. -
Apply Auto Layout to the selection.
In Figma, use the Auto Layout control or the shortcut for your platform. The selected layers should snap into a container frame with visible spacing between items. -
Set the direction to horizontal or vertical.
Horizontal is the default for most button-like components; vertical fits stacked content. When it works, the children line up on one axis instead of floating freely. -
Set padding on all sides.
Use a value that matches the visual rhythm of the component, such as 12 px or 16 px, depending on the UI system you are building. The result should be an even inner margin around the contents. -
Set item spacing between children.
This controls the gap between elements inside the container. If the text and icon look too far apart or too tight, this is usually the setting to change first. -
Choose alignment for the cross axis.
Center alignment keeps text and icons visually balanced in a button; top alignment helps with multi-line content. If the setting is right, the contents stay anchored instead of drifting when copy changes. -
Inspect the frame’s resize behavior.
Switch the frame and its children between Hug contents, Fill container, and fixed sizing as needed. A working setup changes width or height without collapsing the structure.
The most common mistake here is applying Auto Layout to the wrong layer, usually a group with messy nesting underneath. That costs time later because padding and spacing behave inconsistently. The fix is to rebuild the component from clean frames, not to keep stacking controls on top of a tangled layer tree.
Which resizing mode should each child use?
Each child should use the resizing mode that matches its job: Hug contents for intrinsic size, Fill container for flexible width, and fixed size only when the design truly needs a locked dimension.
Use Hug contents for text labels, badges, and icon containers that should expand to fit content. A button label set to Hug will grow when the copy gets longer, which is exactly what you want for responsive UI components. If the label is fixed, longer text may clip or force awkward wrapping.
Use Fill container for elements that must share available space. A search field inside a toolbar, for example, usually needs to expand across leftover width. In a 1200 px desktop frame, that field can absorb extra space while buttons stay at their natural width. When it works, the row feels balanced instead of lopsided.
Use fixed size sparingly for objects with a real physical or design limit, such as a 24 px icon or a 32 px avatar. Fixed sizing is not wrong; it is just blunt. If everything is fixed, the component may look fine in one frame and fail in a smaller one.
This is where many generic tutorials go wrong: they treat Fill container as the default answer. It is not. If every child fills space, the component loses hierarchy and can look stretched. A good responsive component usually mixes modes: text hugs, a field fills, and an icon stays fixed. If that balance is unclear, consult a product designer or design systems specialist before standardizing the pattern.
A practical test is simple. Change the parent width by 200 px and watch what changes first. If the wrong item stretches, switch its resizing mode before changing spacing or padding. Resizing mode usually causes the problem; spacing only reveals it.
How should padding and spacing work in real components?
Padding should frame the content, and spacing should define the rhythm between repeated items, not just make the box “feel right.”
For a button, start with equal vertical and horizontal padding so the click target stays clean. A common pattern is a little more horizontal padding than vertical, because text needs room to breathe on the sides. If you add an icon, keep the gap between icon and label smaller than the outer padding so the label still reads as the center of the component.
For a card, think in layers. Outer padding protects the whole content block from the card edge. Inner spacing separates title, body copy, metadata, and actions. If the card contains several pieces of content, use Auto Layout inside the card and then another Auto Layout wrapper around the full card. That nested structure gives you independent control over the spaces that matter.
Alignment matters as much as the numbers. Left-aligned text inside a vertical card usually reads better than centered text, especially when content length varies. Center alignment works better for compact chips, icons, and short CTA buttons. The wrong alignment can make a perfectly sized component still look off.
Avoid the temptation to use large spacing values to fix a layout that is really missing hierarchy. A 24 px gap between items may hide a problem for one design size, but it often breaks density on smaller screens. If a component feels too airy, reduce padding first, then spacing, then inspect line-height and text wrap.
The trade-off is straightforward: more padding improves readability and touch comfort, but it also increases component footprint. That matters in dense dashboards, where a 16 px choice instead of an 8 px choice can change how many rows fit on screen.
How do nested frames and components behave inside Auto Layout?
Nested frames let you control each part of a component separately, and nested components let you keep that structure reusable without flattening the design.
A common example is a notification row. The outer frame is horizontal Auto Layout. Inside it sits an icon on the left, a text stack in the middle, and an action on the right. The middle text stack is itself vertical Auto Layout, so the title and description keep their own spacing. This is the cleanest way to make the row responsive without making every child fight every other child.
When a component is nested, Figma respects the child’s own Auto Layout rules first, then the parent’s rules. That means the parent can control overall spacing and width distribution, while the child controls internal spacing. If a title wraps to two lines, the text stack should grow vertically while the icon keeps its size. That behavior is exactly why nested frames are worth the setup cost.
This is also where component variants come in. A button can have default, hover, disabled, and icon-left versions as variants, while each variant still uses the same inner Auto Layout rules. That keeps the spacing consistent across states. If each variant is rebuilt by hand, tiny spacing differences creep in fast.
The mistake to avoid is nesting too deep without a reason. Three or four layers are normal in a serious component. Six or more layers often means the structure is compensating for a poor layout decision. Deep nesting costs clarity: you spend more time selecting the right frame than designing the component.
If a child frame refuses to behave, check whether it is set to fixed size, whether the parent is constraining it, and whether the nested frame itself contains padding that makes it appear larger than expected. The problem is often one layer deeper than the visible symptom.
What should I check before turning a frame into a component variant?
You should check that the base frame already behaves correctly at two widths and one text change before you duplicate it into variants.
Start with the default state. Put the button, card, or row inside a clean Auto Layout frame and test one longer label, one shorter label, and one small width change. If the baseline component fails here, variants will only multiply the problem. A variant is not a repair tool; it is a state management tool.
Then define what actually changes across variants. Often the variant changes color, icon presence, disabled state, or emphasis, but not the structural spacing. If the padding changes across variants for no reason, the component becomes hard to maintain. The point of variants is to preserve structure while changing state.
Use constraints alongside Auto Layout when a variant contains elements that must anchor within a changing parent. For example, a badge inside a card header may need to stay at the top-right while the title text grows. Auto Layout handles the flow; constraints help with anchoring inside the frame boundaries. The two features are not substitutes.
One useful rule: if a state does not change how the component is built, it probably belongs in a variant. If it changes the actual layout logic, it may need a separate component. That distinction keeps the file readable later.
The maintenance-versus-flexibility choice is real here. Variants are great for small state changes, but they become messy if every state has different spacing, different wrapping, and different child structure. At that point, the component may be too many things at once.
What breaks responsive UI components most often?
Responsive UI components usually break because the structure is right but one sizing choice is wrong.
The first failure is fixed width on text containers. If a label or description cannot grow, the component will either clip text or force ugly overflow when copy changes. In a multilingual product, that can become visible fast because one 12-character phrase in English may become much longer elsewhere. The fix is usually Hug contents for the text node and Fill container for the surrounding field.
The second failure is using centered alignment everywhere. Centering works for compact controls, but in long text blocks it can make content hard to scan and expose awkward line breaks. Left alignment is often better for cards, forms, and notifications.
The third failure is inconsistent nesting. A component that looks fine in the main frame may fail when reused because one nested frame still has manual positioning. If the parent is responsive but the child is not, the component only appears responsive until the content changes.
The fourth failure is overusing Auto Layout on decorative elements that should stay freeform. A background flourish, an overlapping badge, or a layered illustration may not need Auto Layout at all. Forcing every layer into the same system makes the file heavier and the structure harder to understand.
A practical habit helps: after building the component, resize the parent by 25%, 50%, and then a much smaller width. That quick sequence shows whether padding holds, whether text wraps cleanly, and whether any child is behaving like a fixed object when it should not. A component that survives those checks is usually worth keeping. Figma’s component and Auto Layout docs both support this test-and-adjust approach. (Source: Figma Help Center)
Figma Auto Layout for Responsive UI Components is strongest when the component has repeated structure, clear spacing rules, and content that changes length. It is weaker for intentionally irregular compositions. That is the honest line: use it for the parts of the interface that need consistency, not for every visual decision in the file. For broader automation patterns, the hub on Figma Workflow Automation belongs next.
What does auto layout do in figma?
Auto Layout in Figma arranges layers in a structured row or column so spacing, padding, and resizing behave predictably. It is useful when content changes length or when a component needs to resize cleanly across different frames. The first thing it gives you is control over flow instead of manual positioning. Figma’s help center describes Auto Layout as a frame-based system for arranging and resizing objects consistently. (Source: Figma Help Center)
When should I use auto layout instead of manual positioning?
Use Auto Layout when the component contains repeated content, needs consistent spacing, or must adapt to different text lengths. Manual positioning still fits overlays, decorative art, and layouts where exact absolute placement matters more than responsiveness. The choice depends on whether structure or visual freedom matters more. For a broader design-system reference, see Material Design.
How do I make a component responsive in figma?
Make the component responsive by combining Auto Layout, the right resizing mode, and sensible nesting. Text usually hugs contents, flexible fields usually fill the parent, and icons usually stay fixed. Then test the component at a few widths, such as a small, medium, and wide frame, to see whether the layout still holds. The same pattern aligns with Figma Help Center and Nielsen Norman Group.
Drafted with AI; not yet reviewed by a person.
