Hug Contents is one of the most important resizing behaviors in Figma Auto Layout. It allows an Auto Layout frame to automatically resize itself according to the size of its child content while maintaining the defined padding and spacing.
In simple words, Hug Contents means the container becomes only as large as necessary to contain its content. If the content becomes wider, taller, or changes in size, the Auto Layout frame can automatically grow or shrink to fit it.
Hug Contents is especially useful for buttons, badges, chips, tags, labels, navigation items, cards, notifications, dialogs, and reusable components whose dimensions should respond to their content.
In Figma, Hug Contents can be applied to Auto Layout frames. Width and height can use different resizing behaviors, so a component can have Fixed Width + Hug Height, Hug Width + Fixed Height, or Hug Width + Hug Height depending on the design requirement.
For professional Figma and UI/UX training, explore JustAcademy Figma Training and Register for Figma Course Demo.
Hug Contents is an Auto Layout resizing property that makes a frame resize around its child layers. The frame uses the smallest practical dimensions required to contain its content while respecting padding and spacing.
Content Changes
↓
Auto Layout Frame
↓
Hug Contents
↓
Frame Resizes Around Content
For example, if a button contains the text "Save", its width can be small enough to fit that text and its horizontal padding. If the text changes to "Save and Continue", the button can automatically become wider.
Short Text
+----------------+
| Save |
+----------------+
Long Text
+----------------------------+
| Save and Continue |
+----------------------------+
Hug Contents: A Figma Auto Layout resizing behavior that makes a frame automatically adjust its dimensions according to the size of its child content while respecting padding and spacing.
Hug Contents
=
Size the frame around its content
Content grows
↓
Frame grows
Content shrinks
↓
Frame shrinks
Modern interfaces contain many components whose dimensions depend on their content. Manually resizing these components every time the text or content changes is inefficient.
Hug Contents is part of Figma's Auto Layout resizing system. Auto Layout automatically arranges child layers according to flow, spacing, padding, alignment, and resizing settings.
Auto Layout
|
+-- Flow
| +-- Horizontal
| +-- Vertical
| +-- Grid
|
+-- Padding
|
+-- Gap
|
+-- Alignment
|
+-- Resizing
|
+-- Hug Contents
+-- Fill Container
+-- Fixed
+-- Minimum
+-- Maximum
Auto Layout can be added by selecting layers and pressing Shift + A. Once Auto Layout is applied, width and height resizing can be configured independently.
Hug Contents calculates the required size of the Auto Layout frame based on its child layers and the spacing around them.
Child Content
+
Padding
+
Gap / Spacing
↓
Required Frame Size
↓
Hug Contents
For example, if a text layer is 60px wide and the frame has 16px left padding and 16px right padding, the frame needs approximately 92px of width before considering other children or layout requirements.
Text Width = 60px
Left Padding = 16px
Right Padding = 16px
Frame Width
= 16 + 60 + 16
= 92px
Hug Width means the Auto Layout frame automatically adjusts its width according to its child content.
Width = Hug Contents
Height = Fixed
Content becomes wider
↓
Frame becomes wider
Content becomes narrower
↓
Frame becomes narrower
This is commonly used for buttons, badges, chips, tags, and compact navigation elements.
Hug Height means the Auto Layout frame automatically adjusts its height according to its child content.
Width = Fixed
Height = Hug Contents
Content becomes taller
↓
Frame becomes taller
This is particularly useful for cards, notifications, descriptions, messages, and content panels.
An Auto Layout frame can use Hug Contents on both axes.
Width = Hug Contents
Height = Hug Contents
In this configuration, the frame can adapt both horizontally and vertically according to its content.
Content Changes
↓
Width Changes
+
Height Changes
↓
Container Adapts
This is useful for compact content-driven components such as badges, tags, labels, small cards, and notification bubbles.
This combination allows the width to respond to content while the height remains controlled.
Button
Width = Hug Contents
Height = Fixed 48px
This is one of the most common button patterns in professional UI design.
Short Label
+----------------+
| Save |
+----------------+
Long Label
+------------------------------+
| Save and Continue |
+------------------------------+
Height remains 48px.
This pattern is useful when a component needs a controlled width but its vertical size should respond to content.
Notification
Width = Fixed 360px
Height = Hug Contents
If the message becomes longer and wraps onto additional lines, the notification can grow vertically while maintaining its defined width.
Hug Contents and Fixed have opposite purposes. Hug allows the container to adapt to its content, while Fixed maintains a defined dimension.
| Hug Contents | Fixed |
|---|---|
| Adapts to child content | Maintains a defined dimension |
| Content influences size | Designer controls size |
| Useful for dynamic components | Useful for stable dimensions |
| Common for buttons and badges | Common for icons and avatars |
| Can grow or shrink | Does not automatically change its defined dimension |
Hug Contents makes an Auto Layout frame fit its content, while Fill Container makes a child layer occupy available space inside its Auto Layout parent.
Hug Contents
Content
↓
Container sizes around content
Fill Container
Parent Space
↓
Child fills available space
| Property | Behavior | Common Example |
|---|---|---|
| Hug Contents | Sizes around content | Button |
| Fill Container | Uses available parent space | Input |
| Fixed | Maintains defined dimension | Icon |
Hug Contents determines the size based on child content, while minimum dimensions establish a lower boundary for resizing.
Hug:
Content determines size
Minimum:
Content can resize
but cannot become smaller
than the minimum value
Minimum dimensions can be combined with other resizing properties to prevent an element from becoming too small.
Maximum dimensions establish an upper boundary. Hug Contents can allow content-driven growth, while a maximum dimension can limit how far the component grows.
Content grows
↓
Hug Contents
↓
Maximum Width
↓
Growth stops at maximum
This pattern is useful for text-heavy cards, dialogs, content containers, and responsive sections.
Padding is an important part of Hug Contents. The frame does not simply match the child dimensions; it also respects the padding defined around the child content.
+--------------------------+
| Padding |
| +------------------+ |
| | Content | |
| +------------------+ |
| Padding |
+--------------------------+
If content becomes larger, the frame grows while maintaining the defined padding.
Horizontal padding adds space to the left and right sides of the content.
Text Width = 100px
Left Padding = 20px
Right Padding = 20px
Hug Width
= 20 + 100 + 20
= 140px
This is particularly useful for buttons and badges where consistent horizontal spacing is required.
Vertical padding adds space above and below the content.
Text Height = 20px
Top Padding = 12px
Bottom Padding = 12px
Hug Height
= 12 + 20 + 12
= 44px
This allows components to maintain comfortable internal spacing while adapting to their content.
Gap controls the space between multiple child layers inside an Auto Layout frame. Hug Contents includes the required space occupied by those children and their gaps.
Child A
↓
Gap = 12px
↓
Child B
↓
Gap = 12px
↓
Child C
If a child changes size, the Hug Contents frame can update its overall dimensions while preserving the defined gaps.
A frame containing multiple children can use Hug Contents to calculate its required size around all of those children.
Card
|
+-- Icon
|
+-- Title
|
+-- Description
|
+-- Button
Height = Hug Contents
If the description becomes taller, the overall card can grow to accommodate it.
Buttons are one of the most important use cases for Hug Contents. A button label can change without requiring manual width adjustment.
Button
Width = Hug Contents
Height = Fixed 48px
Label:
"Save"
After changing the label:
Button
Width = Hug Contents
Height = Fixed 48px
Label:
"Save and Continue"
The button width can expand to accommodate the longer label while retaining the defined height.
Buttons containing both an icon and text can use Hug Contents to accommodate both elements.
Button
|
+-- Icon → Fixed 20px
|
+-- Gap → 8px
|
+-- Label → Hug
|
Frame Width → Hug Contents
Frame Height → Fixed
This creates a flexible button that maintains consistent internal spacing.
Badges often need to grow according to their label.
Badge
Width = Hug Contents
Height = Fixed 24px
"New"
↓
"New Feature"
The width changes according to the label while the height remains controlled.
Tags and category labels are ideal candidates for Hug Contents.
Tag
|
+-- Label
|
+-- Padding
|
Width = Hug Contents
Height = Hug / Fixed
Longer category names can automatically produce wider tags.
Chips can combine an icon, text, and close button while allowing the overall component to adapt to its content.
Chip
+--------------------------------+
| Icon | Text Label | Close |
+--------------------------------+
Width = Hug Contents
This is useful for filters, selected categories, search tokens, and interactive controls.
Navigation items can use Hug Contents when their width should be determined by the label and icon.
Navigation Item
|
+-- Icon
+-- Gap
+-- Label
Width = Hug Contents
This allows different labels to occupy different widths without manually resizing each item.
Cards can use Hug Height when the content length varies.
Card
Width = Fixed 320px
Height = Hug Contents
|
+-- Title
+-- Description
+-- Actions
When the description becomes longer, the card can grow vertically while preserving its width.
Notifications are another excellent use case because message lengths can vary.
Notification
Width = Fixed 360px
Height = Hug Contents
Message:
"Your profile has been updated."
If the message becomes longer, the notification can increase in height to accommodate the additional lines.
Dialog content can use Hug Height so the dialog grows according to the amount of content.
Dialog
Width = Fixed 480px
Height = Hug Contents
|
+-- Title
+-- Description
+-- Form
+-- Actions
This avoids unnecessary empty vertical space when the content is short.
Tooltips are often content-driven components. Their width can hug the text while padding maintains readable spacing.
Tooltip
Width = Hug Contents
Height = Hug Contents
Text:
"Click to edit"
Longer tooltip messages can create a wider or taller tooltip depending on the text resizing configuration.
Dropdown items can use Hug Contents when their dimensions depend on the label and optional icons.
Dropdown Item
|
+-- Icon
+-- Label
+-- Optional Shortcut
Width = Hug Contents
Form sections can use Hug Height when their number of fields or content changes.
Form Section
Width = Fill / Fixed
Height = Hug Contents
|
+-- Heading
+-- Email
+-- Password
+-- Checkbox
+-- Button
If another field is added, the section can grow automatically.
Vertical Auto Layout is commonly used for content stacks such as forms, cards, lists, and sections. Hug Height allows the frame to grow as children are added or resized.
Vertical Auto Layout
|
+-- Heading
|
+-- Description
|
+-- Input
|
+-- Button
Height = Hug Contents
Horizontal Auto Layout is useful for rows of buttons, navigation items, toolbars, and compact components.
Horizontal Auto Layout
|
+-- Icon
+-- Label
+-- Action
Width = Hug Contents
The frame can adapt to the combined width of its children and the defined spacing.
Hug Contents can also be used with grid Auto Layout. A grid frame or track can use content-driven sizing where appropriate.
Grid
+----------+----------+
| Content | Content |
+----------+----------+
| Content | Content |
+----------+----------+
Hug sizing
↓
Content influences size
For grid layouts, always consider whether a content-driven dimension or a controlled track size is more appropriate.
Select Auto Layout Frame
↓
Open Design Panel
↓
Find Width / Height
↓
Select Hug Contents
↓
Change Content
↓
Frame Resizes Automatically
Figma also provides a convenient canvas interaction for setting Hug Contents. Double-clicking the horizontal or vertical edge of an Auto Layout object's bounding box can set that axis to Hug Contents.
Auto Layout Frame
↓
Double-click Edge
↓
Hug Contents
Sometimes only width should respond to content.
Width = Hug Contents
Height = Fixed 40px
This is useful for labels, badges, chips, and buttons.
Sometimes only height should respond to content.
Width = Fixed 320px
Height = Hug Contents
This is useful for notifications, cards, descriptions, and content sections.
When both dimensions should respond to content, use Hug Contents on both axes.
Width = Hug Contents
Height = Hug Contents
This works well for small content-driven components such as tooltips, tags, badges, and compact labels.
Text is one of the most common reasons an Auto Layout frame needs Hug Contents.
Frame
|
+-- Text
Text changes
↓
Text dimensions change
↓
Hug frame responds
For example, changing "Login" to "Continue with Google" can increase the width of a Hug button.
Hug Contents should be used carefully with text that can wrap. A text layer's resizing behavior affects how its parent responds.
Short Text
↓
One Line
↓
Small Height
Long Text
↓
Multiple Lines
↓
Greater Height
↓
Hug Parent
This makes Hug Height particularly useful for text-heavy cards and messages.
Long text should be tested to make sure the component grows in the intended direction.
Short Description
↓
Small Card
Long Description
↓
More Lines
↓
Hug Height
↓
Taller Card
Always check the text resizing mode and the parent's width before deciding how Hug Contents should behave.
Changing padding changes the size of a Hug Contents frame because the frame must include both content and padding.
Content = 100px
Padding = 16px each side
Before:
100 + 16 + 16 = 132px
Increase Padding:
100 + 24 + 24 = 148px
The content did not change, but the Hug frame became larger because its padding changed.
When a frame contains multiple children, changing the gap can change the overall size of the Hug Contents frame.
Child A = 80px
Gap = 16px
Child B = 100px
Total Width
= 80 + 16 + 100
= 196px
Increasing the gap to 24px increases the required width accordingly.
Alignment controls how child layers are positioned inside the Auto Layout frame. Hug Contents can reduce the amount of extra space available, but alignment still matters when other dimensions or children create available space.
Alignment
|
+-- Start
+-- Center
+-- End
+-- Stretch
Choose alignment based on the intended visual behavior of the component.
Nested Auto Layout is one of the most powerful ways to use Hug Contents.
Page
|
+-- Card
|
+-- Header
| |
| +-- Icon
| +-- Title
|
+-- Content
| |
| +-- Description
|
+-- Actions
|
+-- Button
Each nested frame can have its own resizing behavior, allowing complex components to respond correctly to content changes.
A parent and child can both use Hug Contents when the entire component should adapt naturally to its content.
Parent
Width = Hug
Height = Hug
↓
Child
Width = Hug
Height = Hug
This is useful for compact components where no specific fixed dimension is required.
A parent using Hug Contents generally needs to be considered carefully when a child uses Fill Container. Fill requires available parent space, while Hug attempts to size the parent around its contents.
Parent = Hug
↓
Child = Fill
↓
Potential sizing conflict
In particular, Figma notes that if a child inside an Auto Layout frame is set to Fill Container on an axis, the parent can no longer Hug on that axis and becomes Fixed for that axis.
A parent can Hug around a child with a fixed dimension.
Parent
Width = Hug
Child
Width = Fixed 200px
Result:
Parent sizes around the 200px child
plus padding.
A parent can contain several content-driven children.
Toolbar
|
+-- Icon → Fixed
+-- Search → Hug
+-- Button → Hug
+-- Profile → Fixed
Parent Width = Hug
The overall width can respond to the combined requirements of its children and spacing.
Toolbars often contain icons, labels, and actions. Hug Contents can make compact toolbars adapt to the content they contain.
Toolbar
|
+-- Icon
+-- Label
+-- Action
Width = Hug Contents
Height = Fixed
A compact search control can use Hug Contents when its width is intended to be content-driven.
Search Control
|
+-- Search Icon
+-- Search Text
+-- Clear Icon
Width = Hug Contents
For full-width search bars, Fill Container is generally more appropriate.
Profile controls containing an avatar and username can use Hug Contents when the control should grow with the username.
Profile
|
+-- Avatar → Fixed 40px
+-- Name → Hug
+-- Chevron → Fixed 16px
Container Width = Hug
Breadcrumbs are naturally content-driven because different pages can have different label lengths.
Home
/
Products
/
Electronics
/
Laptops
Breadcrumb Width = Hug Contents
This allows the breadcrumb component to adapt to its labels.
Individual tabs can use Hug Contents when each tab should size itself around its label.
Tabs
|
+-- Overview → Hug
+-- Reviews → Hug
+-- Specifications → Hug
+-- Pricing → Hug
Padding can be used to create consistent visual spacing around each label.
Pagination buttons can use Hug Contents when the controls contain different labels or icons.
Pagination
|
+-- Previous → Hug
+-- 1 → Fixed / Hug
+-- 2 → Fixed / Hug
+-- Next → Hug
Status labels such as Active, Pending, Completed, and Failed can use Hug Contents.
Status Badge
Width = Hug Contents
Height = Fixed 28px
"Active"
"Pending"
"Completed"
Each label can have a different width while maintaining the same height.
Price components can use Hug Contents when the displayed price varies in length.
Price
|
+-- Currency
+-- Amount
+-- Optional Period
Width = Hug Contents
Product information sections can use Hug Height when descriptions, specifications, or labels change.
Product Info
Width = Fill / Fixed
Height = Hug Contents
|
+-- Product Name
+-- Rating
+-- Description
+-- Price
+-- Availability
Social media cards are frequently content-driven. A post can grow vertically as the text, comments, or metadata changes.
Social Post
Width = Fill Container
Height = Hug Contents
|
+-- Profile
+-- Text
+-- Image
+-- Actions
+-- Comments
This creates a flexible structure for dynamic content.
Comment components can use Hug Height to accommodate different message lengths.
Comment
Width = Fill Container
Height = Hug Contents
|
+-- Avatar
+-- Username
+-- Message
+-- Actions
Chat bubbles are a classic example of content-driven sizing.
Chat Bubble
Width = Hug Contents
Height = Hug Contents
"Hello!"
↓
"Hello! How are you doing today?"
The bubble can adapt to the message while maintaining its internal padding.
Error messages often vary in length and therefore benefit from Hug Height.
Error Container
Width = Fill / Fixed
Height = Hug Contents
Message:
"Please enter a valid email address."
Success notifications can similarly use content-driven height.
Success Message
Width = Fixed / Fill
Height = Hug Contents
Icon + Message
A dropdown menu can use Hug Height when the number of menu items changes.
Dropdown
Width = Fixed / Hug
Height = Hug Contents
|
+-- Item
+-- Item
+-- Item
+-- Item
Adding another item can increase the menu height automatically.
Lists are often created using vertical Auto Layout with Hug Height.
List
Width = Fill Container
Height = Hug Contents
|
+-- Item 1
+-- Item 2
+-- Item 3
+-- Item 4
Adding or removing list items changes the overall height of the list.
A form container can use Hug Height to grow as fields are added.
Form
Width = Fill / Fixed
Height = Hug Contents
|
+-- Name
+-- Email
+-- Password
+-- Confirm Password
+-- Submit
Accordion content can use Hug Height because opening a section adds content vertically.
Accordion
|
+-- Question
+-- Answer
Closed:
Height = Small
Opened:
Height = Hug Contents
This is useful for FAQs, settings, documentation, and help sections.
FAQ items can use vertical Auto Layout and Hug Height so that answers of different lengths are accommodated automatically.
FAQ Item
Width = Fill Container
Height = Hug Contents
|
+-- Question
+-- Answer
Hug Contents is highly valuable in design systems because components often need to support different labels while maintaining consistent padding, typography, and spacing.
Design System
|
+-- Button → Hug Width
+-- Badge → Hug Width
+-- Chip → Hug Width
+-- Tooltip → Hug Width + Height
+-- Card → Hug Height
+-- Notification → Hug Height
Component variants can share the same Hug behavior while changing text, icon, size, or state.
| Variant | Width | Height |
|---|---|---|
| Small Button | Hug | Fixed 36px |
| Medium Button | Hug | Fixed 44px |
| Large Button | Hug | Fixed 52px |
| Badge | Hug | Fixed |
| Tooltip | Hug | Hug |
Hug Contents does not mean that the entire interface becomes fixed or non-responsive. It is one part of a responsive sizing strategy.
Responsive Component
|
+-- Icon → Fixed
+-- Label → Hug
+-- Search → Fill
+-- Button → Hug
+-- Container → Fill / Hug
Professional interfaces usually combine different resizing behaviors rather than using one property everywhere.
Fixed and Hug can be combined on different axes.
Notification
Width = Fixed 360px
Height = Hug Contents
This creates a stable width while allowing the component to grow vertically according to its message.
Hug and Fill can be used together in nested layouts.
Header
|
+-- Logo → Fixed
+-- Navigation → Fill
+-- Profile → Hug
The flexible navigation area uses available space while the profile control sizes itself around its content.
A component may need to hug its content while also maintaining a minimum usable width.
Button
Width = Hug Contents
Minimum Width = 100px
This prevents very short labels from creating an excessively small button.
Maximum dimensions can limit how far a content-driven component grows.
Card
Width = Hug Contents
Maximum Width = 400px
This can be useful when content should adapt naturally but should not create an excessively wide component.
Hug Contents works particularly well with a consistent spacing system.
Spacing Tokens
4px
8px
12px
16px
24px
32px
Component
Padding = 16px
Gap = 8px
Width = Hug Contents
Using consistent spacing creates predictable and reusable components.
A common mistake is manually setting a button width when the button should actually adapt to its label.
Incorrect:
Button Width = Fixed 100px
Label:
"Save and Continue"
Problem:
Text may require more space.
A better solution may be:
Button
Width = Hug Contents
Height = Fixed
Sometimes only one axis needs to respond to content.
Requirement:
Width should remain controlled
Height should grow
Correct:
Width = Fixed
Height = Hug
Do not automatically apply Hug to both dimensions without considering the intended layout.
When a Hug component looks larger than expected, check its padding before changing the width manually.
Unexpected Width
↓
Check Content
↓
Check Left Padding
↓
Check Right Padding
↓
Check Gap
↓
Check Result
Very large padding can make a Hug component unnecessarily large.
Content = 100px
Padding = 40px + 40px
Total = 180px
If the component looks too large, adjust the spacing rather than converting the frame to Fixed without understanding the cause.
Hug is usually not the best choice when an element is expected to occupy all available parent space.
Requirement:
Input should fill screen width
Better:
Width = Fill Container
Height = Fixed
Using Hug in this situation may make the input only as wide as its content.
If a Hug parent does not grow as expected, inspect the text layer's resizing behavior.
Parent = Hug
↓
Text Layer
↓
Check Text Resizing
↓
Check Width
↓
Check Height
↓
Test Long Content
Hug and Fill serve different purposes. Hug wants the container to fit its content, while Fill requires available parent space.
Hug
Content → Container
Fill
Parent Space → Child
When the two are combined incorrectly, the layout can behave differently than expected. Check the parent-child relationship and the axis being used.
| Component | Recommended Hug Usage |
|---|---|
| Button | Hug Width + Fixed Height |
| Badge | Hug Width + Fixed Height |
| Chip | Hug Width |
| Tooltip | Hug Width / Hug Height |
| Notification | Fixed Width + Hug Height |
| Card | Fixed/Fill Width + Hug Height |
| List | Fill Width + Hug Height |
| Form | Fill Width + Hug Height |
| Navigation Item | Hug Width |
| Chat Bubble | Hug Width + Hug Height |
Should the element fit its content?
|
Yes
↓
Use Hug Contents
Should the element maintain a defined size?
|
Yes
↓
Use Fixed
Should the child use all available parent space?
|
Yes
↓
Use Fill Container
Should the element adapt but stay within limits?
|
Yes
↓
Use Hug + Min/Max
Create a reusable button that automatically adapts to different labels.
Button
|
+-- Text
|
Width = Hug Contents
Height = Fixed 48px
Padding Left = 20px
Padding Right = 20px
Test these labels:
Save
Save Changes
Save and Continue
Continue to Checkout
The button should grow horizontally while maintaining its intended height and padding.
Status Badge
|
+-- Status Dot
+-- Label
Width = Hug Contents
Height = Fixed 28px
Gap = 8px
Test labels such as Active, Pending, Completed, and In Progress.
Notification
Width = Fixed 360px
Height = Hug Contents
|
+-- Icon → Fixed
+-- Content → Fill
| +-- Title
| +-- Message
|
+-- Close → Fixed
Change the message length and verify that the notification grows vertically.
Product Card
Width = Fixed 280px
Height = Hug Contents
|
+-- Image → Fixed / Ratio
+-- Product Name → Fill
+-- Description → Hug
+-- Price → Hug
+-- Button → Fill / Hug
Add a longer description and verify that the card height adjusts automatically.
Profile
|
+-- Avatar → Fixed 40px
+-- Name → Hug
+-- Role → Hug
Container
Width = Hug Contents
Height = Hug Contents
Test the component with short and long names.
Chat Bubble
Width = Hug Contents
Height = Hug Contents
Padding = 12px
Short:
"Hi!"
Long:
"Hi! How are you doing today?"
Test multiple messages and verify that the bubble adapts without unnecessary empty space.
FAQ
Width = Fill Container
Height = Hug Contents
|
+-- Question
+-- Answer
Expand and collapse the answer content and observe how the parent frame changes height.
If Hug Contents is not behaving as expected, inspect the following properties.
Frame Not Resizing
↓
Is Auto Layout Enabled?
|
Yes
↓
Check Width Resizing
↓
Check Height Resizing
↓
Is Axis Set to Hug?
|
Yes
↓
Check Child Size
↓
Check Text Resizing
↓
Check Padding
↓
Check Gap
↓
Check Fill Children
↓
Check Min / Max
↓
Test Again
Hug Contents communicates an important design intention to developers: the component should generally size itself around its content rather than relying on an arbitrary fixed dimension.
Figma
Width = Hug Contents
↓
Content-driven component
↓
Developer implementation
↓
Flexible component sizing
For example, a button that hugs its content can often be implemented using CSS with intrinsic sizing rather than a hard-coded width.
.button {
display: inline-flex;
width: fit-content;
}
The exact implementation depends on the application's layout system and responsive requirements.
On the web, Hug Contents is conceptually similar to intrinsic sizing, where an element takes the space required by its content.
.button {
width: fit-content;
padding: 12px 20px;
}
This is conceptually similar to a Figma button using Hug Width with padding.
Responsive interfaces frequently combine content-driven sizing with flexible sizing.
.button {
width: fit-content;
}
.input {
width: 100%;
height: 48px;
}
.card {
width: 100%;
max-width: 400px;
}
The Figma equivalents can involve Hug, Fill Container, Fixed, and Maximum dimensions depending on the design.
Design systems benefit greatly from Hug Contents because reusable components must support different labels and content lengths without requiring manual resizing.
Design System
|
+-- Buttons → Hug Width
+-- Badges → Hug Width
+-- Chips → Hug Width
+-- Tooltips → Hug
+-- Cards → Hug Height
+-- Notifications → Hug Height
+-- Navigation Items → Hug Width
Internationalization is an important reason to use content-driven sizing. The same label can be significantly longer in another language.
English:
"Save"
Longer Language:
"Save Changes"
Another Language:
Longer Text
↓
Hug Width
↓
Component adapts
Testing longer labels helps prevent text clipping and layout problems.
Content-driven sizing can support accessibility by allowing components to accommodate longer labels and text. Designers should still test larger text settings, long content, and different interaction states.
Accessible Content
↓
Longer Text
↓
Hug / Responsive Layout
↓
Better Space Adaptation
When designing multilingual applications, test labels that are substantially longer than the original content.
Normal Label
↓
Long Label
↓
Translated Label
↓
Check Hug Behavior
↓
Check Parent Layout
↓
Check Overflow
Different component states can have different content lengths.
Button States
Default:
"Submit"
Loading:
"Submitting..."
Success:
"Submitted Successfully"
Width = Hug Contents
Hug Width allows each state to accommodate its label when the design requires content-driven width.
Icons can remain fixed while the surrounding component hugs the combined content.
Button
|
+-- Icon → Fixed 20px
+-- Gap → 8px
+-- Text → Hug
Button Width = Hug Contents
This is a common professional component pattern.
Chips, alerts, notifications, and tags can include a fixed close icon while the outer frame hugs the total content.
Chip
|
+-- Label → Hug
+-- Gap → 8px
+-- Close Icon → Fixed 16px
Outer Frame = Hug Contents
Auto spacing can distribute available space in some Auto Layout configurations. When Hug Contents removes excess space on an axis, the visible effect of alignment and auto gap can differ from a fixed-size container.
Auto Layout
|
+-- Child
+-- Auto Gap
+-- Child
Hug
↓
Container fits content
↓
Less extra space available
Use a specific gap when predictable spacing between children is required.
Objects using absolute positioning inside an Auto Layout frame do not participate in the normal Auto Layout flow in the same way as regular children. This can affect how sizing relationships behave.
Auto Layout Parent
|
+-- Normal Child → Participates
|
+-- Absolute Child → Ignores Flow
If a Hug component behaves unexpectedly, check whether any child is positioned absolutely.
Reusable components can contain multiple levels of Auto Layout, with each level using the resizing behavior appropriate to its role.
Button Component
|
+-- Outer Frame → Hug
|
+-- Icon → Fixed
|
+-- Content → Hug
|
+-- Label → Hug
This creates a component that can respond naturally to changes in its label and optional content.
| Feature | Hug Contents | Fixed | Fill Container |
|---|---|---|---|
| Content-driven size | Yes | No | No |
| Defined dimension | Not necessarily | Yes | No |
| Uses available parent space | No | No | Yes |
| Good for buttons | Yes | Sometimes | Sometimes |
| Good for badges | Yes | Sometimes | No |
| Good for icons | No | Yes | No |
| Good for full-width inputs | No | Sometimes | Yes |
| Good for dynamic cards | Yes | Sometimes | Yes |
| Requirement | Best Choice |
|---|---|
| Keep exact icon size | Fixed |
| Button grows with label | Hug |
| Input fills parent width | Fill Container |
| Notification grows vertically | Hug Height |
| Sidebar remains 280px | Fixed Width |
| Full-width button | Fill Width + Fixed Height |
| Dynamic badge | Hug Width |
| Content card with variable text | Hug Height |
Hug Contents is an Auto Layout resizing behavior that allows a frame to resize around its child content while respecting padding and spacing.
Hug Contents is a resizing property for Auto Layout frames. It is not the same as simply assigning a fixed size to a regular layer.
Hug Width allows an Auto Layout frame to adjust its width according to its child content.
Hug Height allows an Auto Layout frame to adjust its height according to its child content.
Yes. Width and height are independent. For example, Width can be Hug while Height is Fixed.
Hug adapts to content, while Fixed maintains a defined dimension.
Hug sizes a frame around its content, while Fill Container allows a child layer to occupy available space inside its Auto Layout parent.
It allows button width to adapt automatically when the label changes.
Yes. For example, a button can use Hug Width and Fixed Height.
Yes, different nested elements can use different resizing behaviors. The exact behavior depends on their parent-child Auto Layout relationship.
Padding contributes to the frame's required size, so increasing padding increases the Hug frame dimensions.
Gap contributes to the total space required between child layers and therefore can affect the overall size of a Hug frame.
Possible causes include incorrect child resizing, text settings, padding, gap, Fill Container children, minimum or maximum dimensions, or absolute positioning.
Yes. It is commonly combined with Fixed and Fill Container to create responsive and content-aware components.
| Concept | Quick Meaning |
|---|---|
| Hug Contents | Frame adapts to child content |
| Hug Width | Width adapts to content |
| Hug Height | Height adapts to content |
| Fixed | Maintains defined dimension |
| Fill Container | Uses available parent space |
| Padding | Space between content and parent edges |
| Gap | Space between Auto Layout children |
| Auto Layout | Automatically arranges and resizes layout elements |
| Minimum | Lower size boundary |
| Maximum | Upper size boundary |
Hug Contents is a fundamental Figma Auto Layout concept that allows frames and components to adapt naturally to their content. Instead of manually changing dimensions every time a label, message, description, or child element changes, Hug Contents allows the container to resize around its content while maintaining its defined padding and spacing.
Hug Contents is especially useful for buttons, badges, chips, tags, tooltips, navigation items, notifications, cards, forms, chat bubbles, dialogs, and reusable design-system components. It becomes even more powerful when combined with Fixed and Fill Container resizing behaviors.
The most important concept to remember is: Hug Contents makes an Auto Layout frame adapt to its content, Fixed keeps a dimension controlled, and Fill Container allows a child to use the available space provided by its parent.
For professional Figma and UI/UX training, visit JustAcademy Figma Training and Register for Figma Course Demo.
