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.