Resizing rules (hug, fill, fixed) in Figma - Deep Dive

Overview - Resizing rules (hug, fill, fixed)

What is it?

Resizing rules in Figma control how objects change size when their parent frame or container changes. There are three main rules: hug, fill, and fixed. 'Hug' makes the object adjust to fit its content, 'fill' stretches the object to fill available space, and 'fixed' keeps the object size constant. These rules help design responsive layouts that adapt to different screen sizes.

Why it matters

Without resizing rules, designs would be rigid and break when viewed on different devices or screen sizes. Resizing rules solve the problem of making designs flexible and user-friendly. They ensure that elements look good and function well no matter the context, saving time and improving user experience.

Where it fits

Before learning resizing rules, you should understand basic Figma layers, frames, and grouping. After mastering resizing rules, you can learn about auto-layout and responsive design techniques in Figma to build complex, adaptive interfaces.

Mental Model

Core Idea

Resizing rules define how an object behaves when its container changes size, balancing between fitting content, filling space, or staying fixed.

Think of it like...

Imagine a picture frame on a wall: 'hug' is like the frame resizing exactly to the picture inside, 'fill' is like the frame stretching to fill the entire wall space, and 'fixed' is like a frame that stays the same size no matter what happens around it.

Parent Frame Size Change
┌───────────────────────────┐
│                           │
│  ┌───────────────┐        │
│  │  Object       │        │
│  │  (Hug)       ◄─────────┤ adjusts to content size
│  └───────────────┘        │
│                           │
│  ┌─────────────────────┐  │
│  │  Object (Fill)      │  │
│  │  stretches to fill  ◄──┤ fills available space
│  └─────────────────────┘  │
│                           │
│  ┌───────────────┐        │
│  │  Object       │        │
│  │  (Fixed)      │        │
│  │  stays same size       │
│  └───────────────┘        │
└───────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic object sizing

Concept: Objects in Figma have sizes that can be changed manually or by rules.

In Figma, every shape, text, or component has a width and height. You can drag edges to resize or enter numbers. This size determines how much space the object takes on the canvas.

Result

You can control how big or small an object looks on your design.

Knowing that objects have explicit sizes is the base for understanding how resizing rules affect them.

2

Foundation

What is a parent frame or container?

Concept: Objects can be inside frames that act like containers controlling layout.

A frame is like a box that holds other objects. When you resize the frame, the objects inside can change size or position depending on rules. Frames help organize and group design elements.

Result

You see how changing a frame's size can affect its contents.

Understanding frames as containers is key to grasping why resizing rules matter.

3

Intermediate

Resizing rule: Hug contents explained

🤔Before reading on: do you think 'hug' makes an object bigger, smaller, or fixed when content changes? Commit to your answer.

Concept: 'Hug contents' means the object size adjusts exactly to fit its content.

When you set an object to 'hug', it grows or shrinks to fit the text or shapes inside it. For example, a button with text will expand if you add more words, and shrink if you remove words.

Result

Objects with 'hug' always fit their content tightly, no extra space.

Understanding 'hug' helps you create flexible elements that adapt naturally to their content.

4

Intermediate

Resizing rule: Fill container behavior

🤔Before reading on: does 'fill' keep object size fixed or stretch it when the container grows? Commit to your answer.

Concept: 'Fill container' makes the object stretch to fill all available space in its parent frame.

If an object is set to 'fill', it changes size to cover the entire space of its container. For example, an image set to fill will stretch or shrink as the frame changes size, keeping edges aligned.

Result

Objects with 'fill' always cover the container area, adapting to frame size.

Knowing 'fill' lets you design elements that respond to layout changes by stretching.

5

Intermediate

Resizing rule: Fixed size basics

Concept: 'Fixed size' means the object keeps the same width and height no matter what.

When you choose fixed size, the object ignores changes in the parent frame. It stays exactly the size you set, even if the frame grows or shrinks around it.

Result

Objects with fixed size remain constant, preserving design consistency.

Recognizing when to use fixed size prevents unwanted stretching or shrinking.

6

Advanced

Combining resizing rules in layouts

🤔Before reading on: can different objects in the same frame have different resizing rules? Commit to your answer.

Concept: You can mix hug, fill, and fixed rules on different objects inside one frame to create complex responsive layouts.

For example, a header text can hug its content, a background rectangle can fill the frame, and a logo can stay fixed size. This combination ensures each element behaves as needed when the frame resizes.

Result

Layouts become flexible and maintain design intent across screen sizes.

Understanding how to combine rules unlocks powerful responsive design capabilities.

7

Expert

Unexpected behavior with nested frames and resizing

🤔Before reading on: do nested frames always inherit resizing rules from parents? Commit to your answer.

Concept: Nested frames can cause surprising resizing effects because each frame applies its own rules independently.

If a frame inside another frame has 'hug' but the outer frame resizes, the inner frame may not resize as expected. This can cause layout shifts or overflow. Experts carefully plan resizing rules at each nesting level to avoid issues.

Result

You avoid layout bugs and create stable, predictable designs.

Knowing how nested frames interact with resizing rules prevents common design breakages in complex projects.

Under the Hood

Figma stores resizing rules as properties on each object. When a parent frame resizes, Figma recalculates each child's size and position based on its rule: 'hug' measures content size, 'fill' calculates available space, and 'fixed' keeps size constant. This recalculation happens in real-time to update the canvas view.

Why designed this way?

These rules were created to simplify responsive design without manual resizing. Alternatives like manual resizing for every change were too slow and error-prone. The three rules cover most common layout needs, balancing flexibility and control.

Parent Frame Resize Event
┌─────────────────────────────┐
│                             │
│  ┌───────────────┐          │
│  │ Child Object  │          │
│  │ Resizing Rule │          │
│  └───────────────┘          │
│          │                  │
│          ▼                  │
│  ┌───────────────────────┐ │
│  │ Figma recalculates    │ │
│  │ size & position based │ │
│  │ on rule (hug/fill/fixed)││
│  └───────────────────────┘ │
│          │                  │
│          ▼                  │
│  ┌───────────────┐          │
│  │ Updated Object│          │
│  │ size & layout │          │
│  └───────────────┘          │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does 'hug contents' always keep an object size fixed? Commit to yes or no.

Common Belief: Hug contents means the object size never changes once set.

Reality: 'Hug contents' means the object size changes dynamically to fit its content, growing or shrinking as content changes.

Why it matters: Believing hug is fixed size leads to confusion when objects resize unexpectedly, causing design frustration.

Quick: Does 'fill container' stretch objects beyond their original aspect ratio? Commit to yes or no.

Common Belief: Fill container always preserves the object's original shape and aspect ratio.

Reality: Fill container stretches the object to fill space, which can distort aspect ratio unless constraints are set.

Why it matters: Ignoring this can cause images or shapes to look stretched or squished, harming design quality.

Quick: Do nested frames automatically inherit resizing rules from their parent frames? Commit to yes or no.

Common Belief: Nested frames always inherit resizing rules from their parents.

Reality: Each frame applies its own resizing rules independently; nested frames do not inherit rules automatically.

Why it matters: Assuming inheritance causes unexpected layout shifts and bugs in complex designs.

Quick: Can fixed size objects move position when their parent frame resizes? Commit to yes or no.

Common Belief: Fixed size means the object never moves or resizes.

Reality: Fixed size keeps size constant but position can change if constraints allow movement.

Why it matters: Misunderstanding this leads to misplaced objects when frames resize, breaking layout.

Expert Zone

1

Objects with 'hug' can cause performance issues if content changes frequently in large designs.

2

Combining 'fill' with padding inside auto-layout frames requires careful constraint settings to avoid clipping.

3

Fixed size objects can still resize if nested inside frames with conflicting constraints, requiring manual overrides.

When NOT to use

Avoid using 'fill' for images where aspect ratio must be preserved; use 'fixed' with constraints instead. Don't rely solely on 'hug' for complex nested components where content size is unpredictable; consider auto-layout. For pixel-perfect designs, fixed size is preferred over flexible rules.

Production Patterns

In production, designers use 'hug' for buttons and labels to keep them tight to content, 'fill' for backgrounds and containers to adapt to screen size, and 'fixed' for icons and logos to maintain consistent branding. Nested frames often combine these rules with auto-layout to build scalable, responsive UI components.

Connections

Responsive Web Design

Resizing rules in Figma build on the same principles as CSS flexbox and grid layouts that control element resizing on web pages.

Understanding Figma resizing rules helps grasp how web layouts adapt to different screen sizes using CSS properties.

Human Perception of Visual Balance

Resizing rules affect how balanced and harmonious a design feels by controlling element sizes and spacing dynamically.

Knowing resizing rules aids in creating designs that feel stable and pleasant to the eye across devices.

Mechanical Engineering Tolerances

Just like resizing rules manage space and fit in design, engineering tolerances control how parts fit and move within machines.

Both fields require precise control of size and flexibility to ensure proper function and aesthetics.

Common Pitfalls

#1 Object set to fixed size but stretches unexpectedly.

Wrong approach:

Object resizing rule: fixed; Parent frame resizes larger; Object width and height change.

Correct approach:

Object resizing rule: fixed; Parent frame resizes; Object width and height remain constant.

Root cause:

Misunderstanding that fixed size only controls size, not position or constraints that can cause stretching.

#2 Using 'fill' on text objects causing unreadable stretched text.

Wrong approach:

Text object resizing rule: fill; Text stretches horizontally and vertically distorting letters.

Correct approach:

Text object resizing rule: hug; Text resizes only to fit content, preserving readability.

Root cause:

Confusing fill with hug for text, ignoring that text needs to maintain shape for legibility.

#3 Nested frame set to hug contents but parent frame resizes causing overflow.

Wrong approach:

Inner frame resizing: hug; Outer frame resizes smaller; Inner frame content overflows outside outer frame.

Correct approach:

Inner frame resizing: fill or fixed with constraints; Outer frame resizes; Inner frame adapts or clips properly.

Root cause:

Not accounting for independent resizing rules of nested frames leading to layout breakage.

Key Takeaways

Resizing rules in Figma control how objects respond when their containers change size, enabling flexible and responsive designs.

'Hug' makes objects fit their content tightly, 'fill' stretches objects to fill available space, and 'fixed' keeps objects at a constant size.

Combining different resizing rules within frames allows designers to build complex layouts that adapt smoothly to different screen sizes.

Nested frames apply resizing rules independently, so careful planning is needed to avoid unexpected layout issues.

Understanding resizing rules bridges design and development concepts, improving collaboration and the quality of user interfaces.

Practice

1. Which resizing rule in Figma makes a frame adjust its size exactly to fit its content?

easy

A. Fixed size

B. Fill container

C. Auto layout

D. Hug contents

Solution

1. Step 1: Understand resizing rules

   Hug contents means the frame changes size to fit the content inside exactly.

2. Step 2: Compare with other rules

   Fill stretches to fill the container, Fixed keeps size constant, Auto layout arranges items but does not define resizing rule itself.

3. Final Answer:

   Hug contents -> Option D

4. Quick Check:

   Hug contents = fits content exactly [OK]

Hint: Hug means frame hugs content tightly [OK]

Common Mistakes:

• Confusing Fill with Hug
• Thinking Fixed resizes with content
• Mixing Auto layout with resizing rules

2. Which of the following is the correct way to set a frame's resizing rule to fill its parent container in Figma?

easy

A. Set resizing to Fill container

B. Set resizing to Fixed size

C. Set resizing to Hug contents

D. Set resizing to Auto layout

Solution

1. Step 1: Identify the fill resizing rule

   Fill container means the frame stretches to fill the available space of its parent container.

2. Step 2: Confirm correct option

   Only Set resizing to Fill container correctly names this resizing rule as Fill container.

3. Final Answer:

   Set resizing to Fill container -> Option A

4. Quick Check:

   Fill container = stretches to parent [OK]

Hint: Fill means stretch to parent container [OK]

Common Mistakes:

• Choosing Fixed size instead of Fill
• Confusing Hug with Fill
• Using Auto layout as resizing rule

3. Consider a frame with a fixed width of 200px inside a parent frame of 400px width. If the child frame's horizontal resizing is set to Fill, what will be its width when the parent frame resizes to 600px?

medium

A. 200px

B. 600px

C. 400px

D. It will stay fixed at 200px

Solution

1. Step 1: Understand Fill resizing behavior

   Fill resizing makes the child frame stretch to fill the parent's width.

2. Step 2: Calculate new width

   When parent resizes to 600px, child frame with Fill will also resize to 600px width.

3. Final Answer:

   600px -> Option B

4. Quick Check:

   Fill resizing stretches child to parent's width [OK]

Hint: Fill means child matches parent size [OK]

Common Mistakes:

• Assuming fixed width stays constant
• Choosing original 200px width
• Confusing Fill with Hug

4. You set a frame's resizing to Fixed size, but when you resize the parent frame, the child frame also resizes unexpectedly. What is the most likely cause?

medium

A. The child frame has Hug contents resizing

B. The parent frame has Auto layout enabled

C. The child frame's resizing is actually set to Fill, not Fixed

D. The child frame is locked

Solution

1. Step 1: Analyze resizing behavior

   If child resizes with parent, it is likely set to Fill, not Fixed.

2. Step 2: Check settings

   Verify child's resizing rule; if set to Fill, it will stretch with parent.

3. Final Answer:

   The child frame's resizing is actually set to Fill, not Fixed -> Option C

4. Quick Check:

   Fixed resizing means no size change [OK]

Hint: Check child's resizing rule if size changes unexpectedly [OK]

Common Mistakes:

• Blaming Auto layout instead of resizing rule
• Assuming locked frames resize
• Confusing Hug with Fixed

5. You want a button inside a resizable panel to always fit its text content width but also stretch vertically to fill the panel height. Which resizing rules should you apply to the button's width and height respectively?

hard

A. Width: Hug contents, Height: Fill container

B. Width: Fill container, Height: Hug contents

C. Width: Fixed size, Height: Fixed size

D. Width: Fill container, Height: Fixed size

Solution

1. Step 1: Determine width resizing

   To fit text exactly, width should be Hug contents.

2. Step 2: Determine height resizing

   To stretch vertically to fill panel, height should be Fill container.

3. Final Answer:

   Width: Hug contents, Height: Fill container -> Option A

4. Quick Check:

   Hug width fits text, Fill height stretches vertically [OK]

Hint: Hug width fits content, Fill height stretches to parent [OK]

Common Mistakes:

• Using Fixed size for width or height
• Swapping Hug and Fill rules
• Setting both dimensions to Fill