Creating and resizing frames in Figma - Mechanics & Internals

Overview - Creating and resizing frames

What is it?

Creating and resizing frames in Figma means making containers that hold your design elements and adjusting their size to fit your needs. Frames help organize your design by grouping objects together and controlling layout. Resizing changes the frame's width and height, affecting how content inside behaves. This is essential for building clear, flexible designs.

Why it matters

Without frames, designs become messy and hard to manage, especially when working with many elements or responsive layouts. Resizing frames lets you adapt designs for different screens or purposes quickly. This saves time and reduces errors, making your work look professional and easy to update.

Where it fits

Before learning frames, you should understand basic shapes and layers in Figma. After mastering frames, you can explore auto-layout and constraints to create dynamic, responsive designs. Frames are a foundation for organizing and structuring your entire project.

Mental Model

Core Idea

Frames are like invisible boxes that hold and organize your design pieces, and resizing them changes the size of these boxes to fit your content or layout needs.

Think of it like...

Imagine packing items into a suitcase (frame). You can choose the suitcase size and rearrange items inside. If you get a bigger suitcase, you can fit more or larger items comfortably.

┌───────────────┐
│   Frame Box   │
│ ┌─────────┐   │
│ │ Content │   │
│ └─────────┘   │
└───────────────┘
Resize frame → changes outer box size
Content inside can stay same or adjust

Build-Up - 7 Steps

1

Foundation

What is a Frame in Figma

Concept: Frames are containers that group design elements and control layout.

In Figma, a frame is like a folder or a box that holds shapes, text, and images. You create a frame by selecting the Frame tool or pressing 'F' and drawing on the canvas. Frames help keep your design organized and allow you to move or resize multiple items together.

Result

You get a new frame on the canvas that can hold other objects.

Understanding frames as containers helps you organize your design logically and manage multiple elements easily.

2

Foundation

How to Create a Frame

Concept: Creating frames involves using the Frame tool or converting existing objects into frames.

To create a frame, press 'F' and drag on the canvas to draw a rectangle. You can also select existing objects and press Ctrl+Alt+G (Cmd+Option+G on Mac) to wrap them in a frame. Frames can be nested inside other frames for complex layouts.

Result

A frame appears with your selected or new content inside.

Knowing multiple ways to create frames gives flexibility in organizing your design quickly.

3

Intermediate

Resizing Frames Manually

🤔Before reading on: Do you think resizing a frame always changes the size of its content? Commit to your answer.

Concept: You can resize frames by dragging edges or corners, which may or may not affect the content inside depending on settings.

Click a frame to select it. Drag the handles on the sides or corners to resize. If content inside has fixed size, it stays the same; if set to scale or stretch, it changes with the frame. You can also enter exact width and height values in the properties panel.

Result

The frame changes size; content inside may resize or stay fixed based on constraints.

Understanding how resizing affects content helps you control layout behavior and avoid unexpected design shifts.

4

Intermediate

Using Constraints to Control Content Resize

🤔Before reading on: Do you think constraints only affect resizing frames or also repositioning content? Commit to your answer.

Concept: Constraints define how objects inside a frame behave when the frame resizes, controlling position and size changes.

Select an object inside a frame. In the right panel, set constraints like Left, Right, Top, Bottom, Center, or Scale. These tell Figma how to move or resize the object when the frame changes size. For example, 'Left and Right' makes the object stretch horizontally with the frame.

Result

Objects inside frames resize or move predictably when the frame size changes.

Knowing constraints lets you build flexible designs that adapt smoothly to different frame sizes.

5

Intermediate

Resizing Frames with Auto Layout

🤔Before reading on: Will resizing a frame with auto layout always resize its content? Commit to your answer.

Concept: Auto Layout frames automatically adjust size based on their content and spacing rules.

When a frame has Auto Layout enabled, resizing the frame changes how space is distributed among its children. You can add padding, spacing, and alignment rules. The frame can grow or shrink depending on content size or fixed dimensions you set.

Result

Frames with Auto Layout resize dynamically, keeping consistent spacing and alignment.

Using Auto Layout with resizing frames creates responsive designs that adapt to content changes without manual adjustments.

6

Advanced

Nested Frames and Complex Resizing

🤔Before reading on: Do you think resizing a parent frame always resizes nested frames inside? Commit to your answer.

Concept: Frames can be inside other frames, and resizing behavior depends on constraints and layout settings at each level.

When you resize a parent frame, nested frames inside may resize or stay fixed based on their constraints and Auto Layout settings. This allows building complex, multi-level responsive designs. You can mix fixed and flexible sizes for precise control.

Result

Nested frames resize in coordinated ways, enabling complex layouts.

Understanding nested frame resizing is key to mastering advanced, scalable design systems.

7

Expert

Performance and Best Practices for Frames

🤔Before reading on: Does having many nested frames always improve design performance? Commit to your answer.

Concept: Using frames efficiently affects design performance and collaboration in large projects.

Too many nested frames or unnecessary resizing can slow down Figma and confuse collaborators. Experts use frames to balance organization and simplicity. They use naming conventions, limit nesting depth, and apply constraints thoughtfully to keep designs fast and clear.

Result

Well-structured frames improve team workflow and design maintainability.

Knowing when and how to use frames prevents performance issues and keeps projects manageable at scale.

Under the Hood

Frames in Figma are objects that hold references to child elements and store layout properties like size, position, and constraints. When resizing a frame, Figma recalculates the position and size of children based on constraints and Auto Layout rules. This happens in real-time, updating the canvas instantly.

Why designed this way?

Frames were designed to mimic real-world containers and support responsive design workflows. The constraint system allows flexible layouts without manual repositioning. Alternatives like fixed grouping lacked dynamic resizing, so frames provide a powerful, scalable solution.

┌───────────────┐
│   Frame       │
│ ┌─────────┐   │
│ │ Child 1 │   │
│ ├─────────┤   │
│ │ Child 2 │   │
│ └─────────┘   │
└───────────────┘
Resize Frame →
Apply Constraints →
Update Child Positions/Sizes

Myth Busters - 4 Common Misconceptions

Quick: Does resizing a frame always resize its content inside? Commit yes or no.

Common Belief: Resizing a frame always changes the size of everything inside it.

Reality: Content inside resizes only if constraints or Auto Layout settings allow it; otherwise, content size stays fixed.

Why it matters: Assuming content always resizes leads to broken layouts or unexpected overlaps.

Quick: Can you create a frame only by using the Frame tool? Commit yes or no.

Common Belief: Frames can only be created by drawing with the Frame tool.

Reality: You can also convert existing objects into frames by grouping or using shortcuts.

Why it matters: Knowing multiple creation methods speeds up workflow and flexibility.

Quick: Does nesting many frames always improve design clarity? Commit yes or no.

Common Belief: More nested frames always make designs better organized.

Reality: Excessive nesting can confuse collaborators and slow down performance.

Why it matters: Over-nesting leads to harder maintenance and slower design files.

Quick: Are constraints only about resizing, not repositioning? Commit yes or no.

Common Belief: Constraints only control how objects resize inside frames.

Reality: Constraints also control how objects move when frames resize.

Why it matters: Ignoring repositioning causes misaligned layouts after resizing.

Expert Zone

1

Frames with Auto Layout can have mixed fixed and flexible child sizes, enabling complex responsive designs.

2

Constraints can combine in subtle ways; for example, setting both Left and Right stretches width, but combining Center with Scale behaves differently.

3

Naming frames consistently and limiting nesting depth improves collaboration and reduces confusion in large projects.

When NOT to use

Avoid using frames for very simple, single elements where grouping suffices. For highly dynamic content, consider components with variants or plugins that handle responsiveness better.

Production Patterns

Professionals use frames to build design systems with reusable components, applying constraints and Auto Layout to create responsive UI kits that adapt to multiple screen sizes seamlessly.

Connections

Responsive Web Design

Frames with constraints and Auto Layout in Figma mimic CSS box models and flexbox/grid layouts.

Understanding frames helps grasp how web layouts adapt to screen sizes, bridging design and development.

Project Management

Organizing design elements into frames parallels structuring tasks into groups or phases.

Good frame organization improves team communication and project clarity, just like clear task grouping.

Photography Framing

Just as photographers frame a scene to focus attention, designers use frames to focus and organize content.

Recognizing framing as a way to guide viewer focus helps create clearer, more effective designs.

Common Pitfalls

#1 Resizing a frame expecting all content to scale automatically.

Wrong approach:

Select frame → drag corner to resize → content stays fixed causing overlap or gaps.

Correct approach:

Set constraints or enable Auto Layout on content before resizing frame to ensure proper scaling.

Root cause:

Misunderstanding that content resizing depends on constraints, not just frame size.

#2 Creating too many nested frames without clear naming.

Wrong approach:

Frame1 inside Frame2 inside Frame3 with default names and no structure.

Correct approach:

Name frames descriptively and limit nesting depth to keep design manageable.

Root cause:

Lack of planning and awareness of collaboration impact.

#3 Using frames for single elements instead of groups or components.

Wrong approach:

Wrapping a single icon in a frame unnecessarily.

Correct approach:

Use groups or components for single elements; reserve frames for layout and organization.

Root cause:

Confusing frames with grouping or component purposes.

Key Takeaways

Frames are containers that organize and control layout of design elements in Figma.

Resizing frames affects content only if constraints or Auto Layout settings allow it.

Constraints define how objects inside frames move or resize when the frame changes size.

Using frames wisely improves design clarity, responsiveness, and team collaboration.

Avoid over-nesting frames and always plan naming and structure for maintainable designs.