This document aims to help Korean users who are learning Framer but face difficulties due to the lack of Korean resources. We've translated content from the official blog and added practical information. We hope this can be of some help to Framer users.

How is a website's layout structured?
No matter how fancy the design or complex the UI, if you look closely enough, it's all made up of rectangles. In Framer, these rectangles are called Frames, and almost every element is built upon them.

In this article, we will take a detailed look at what exactly a Frame is in Framer and how to use it effectively.

What is a Frame?

In Framer, a Frame is the basic container for content, serving as the core unit for structure, alignment, and layout. It can 'contain' other elements, which helps create hierarchical structures.

As you work with frames, you'll encounter some common terms. If you have experience with Figma or web development, these concepts may feel familiar. It's important to understand this hierarchy in Framer as it is essential for layout design, so it's good to familiarize yourself with these terms early on.

• Nested: A layer placed inside a frame

• Child: A layer inside a frame

• Parent: A frame enclosing a layer

• Siblings: Layers under the same parent frame

What Frames Do

In Framer, Frames do more than just 'wrap' elements; they perform a variety of roles.

• Grouping or aligning elements

• Auto-generating Stack or Grid structures

• Flexible sizing and positioning

• Visual styling like backgrounds, shadows, borders, etc.

• Used simply for drawing rectangles

For example, when you look at the 'Feature section' in the Insert panel, Frames are used as follows:

• Entire area → Large Frame

• Each Feature → Individual Frame

• Image → Image Frame

• Text → Text Frame

• Button → Button Frame

Once you know that all components are composed of Frames, you can easily analyze and understand any structure on a frame-by-frame basis.

Frames Might Not Be Visible

Some frames appear as visually styled rectangles,
while others might be completely transparent containers.

Note: The border, background color, shadow, and transformation effects of Frames can be specified in the right property panel.

How to Create a Frame

1. Select the Frame tool from the Layout menu in the top toolbar

2. Or switch to the Frame tool by pressing the F key

3. Click and drag on the canvas to create a frame at the desired location

Note: Initially, you may draw approximately, then adjust the precise size or position in the right property panel.

Shortcut Keys While Dragging

• Shift → Draw a square

• Alt / Option → Draw from center outward

• Space → Move the position while dragging

How to Nest Elements in a Frame

Simply drag and drop any layer into the frame to automatically make it a child element.
When a blue outline appears around the frame, you've succeeded.

• This feature is called auto Nesting.

• If you want to prevent Nesting, hold the Spacebar while dragging.

Wrapping Existing Elements in a Frame

If you want to wrap multiple existing elements into a single frame, do the following:

1. Select the layers you want to wrap

2. Right-click > Select ‘Add Frame’

3. Or use Cmd + Enter (Mac) / Ctrl + Enter (Windows)

A new parent frame that includes the selected elements will be created.
Conversely, if you want to delete the frame and leave just its children:

• Mac: Cmd + Delete

• Windows: Ctrl + Delete

Press these keys.

Conclusion

In summary, here’s what we covered:

• Almost everything in Framer is made up of Frames.

• A Frame is not just a rectangle that wraps content but a core unit that handles both style and structure.

• Understanding the hierarchy (Nesting) and parent-child concepts can help you easily design complex layouts.

This content was translated and adapted based on the Framer official YouTube's ‘Thinking in Frames (Fundamentals Lesson 4)’.