Creating Frames in Figma

Creating Frames is one of the most important skills in Figma because frames act as containers for design elements such as text, images, shapes, buttons, cards, icons, and other frames. Frames help designers organize interfaces into structured layouts and are commonly used for mobile screens, web pages, dashboards, components, cards, navigation bars, and complete application screens.

Learn more with JustAcademy Figma Training and explore the Register for Figma Course Demo.

1. What is a Frame in Figma?

A Frame in Figma is a container layer used to organize and control other design layers. A frame can contain text, shapes, images, icons, buttons, components, and even other frames. Frames provide a defined width and height and support important layout features such as Auto Layout, Constraints, Layout Guides, Fill, Stroke, Effects, and Prototyping.

Frames are different from simple groups because a frame has its own independent dimensions and can control how its child elements behave.

Frame

├── Header
│   ├── Logo
│   └── Navigation
├── Content
│   ├── Heading
│   ├── Paragraph
│   └── Button
└── Footer

2. Why are Frames Important?

• Frames provide structure to a design.
• Frames organize related layers into a single container.
• Frames allow designers to create complete mobile and web screens.
• Frames support Auto Layout for responsive layouts.
• Frames support Constraints for controlling child-layer behavior during resizing.
• Frames can contain other frames.
• Frames can be used for prototyping between screens.
• Frames make large Figma files easier to organize and maintain.
• Frames provide boundaries for layouts and components.
• Frames make developer handoff and design inspection easier.

3. Frame Tool in Figma

The Frame Tool is used to create frames on the Figma canvas. It is available from the toolbar and can also be activated using keyboard shortcuts.

4. How to Select the Frame Tool

There are multiple ways to activate the Frame Tool.

Method 1: Toolbar

1. Open a Figma Design file.
2. Locate the Frame Tool in the toolbar.
3. Select the Frame Tool.
4. Move the cursor onto the canvas.
5. Click and drag to create a frame.

Method 2: Keyboard Shortcut

Press F or A to activate the Frame Tool quickly.

Keyboard

   ↓
Press F
   ↓
Frame Tool Activated
   ↓
Click / Drag on Canvas
   ↓
Frame Created

5. Creating a Frame by Clicking on the Canvas

After selecting the Frame Tool, you can click directly on the canvas to create a frame. This creates a top-level frame when you click outside another frame.

1. Select the Frame Tool.
2. Move the cursor to an empty area of the canvas.
3. Click once.
4. Figma creates a frame.
5. Set the required width and height from the right properties panel.

This method is useful when you want to create a frame quickly and define its exact dimensions afterward.

6. Creating a Custom-Size Frame

You can create a frame with custom dimensions by clicking and dragging on the canvas.

1. Select the Frame Tool.
2. Click on the canvas.
3. Hold the mouse button.
4. Drag horizontally and vertically.
5. Release the mouse button.
6. A frame with the selected dimensions is created.

Start Point

    ↓
┌──────────────────────────────┐
│                              │
│       Custom Frame           │
│                              │
│                              │
└──────────────────────────────┘
             ↓
       Release Mouse

7. Creating Frames Using Presets

Figma provides predefined frame presets for common device and design sizes. Presets are useful when designing interfaces for specific devices or content formats.

Steps to Use a Preset

1. Select the Frame Tool.
2. Open the frame preset options in the right sidebar.
3. Select the required category.
4. Select the desired preset.
5. Figma creates the frame using the preset dimensions.

8. Creating a Frame Around Existing Layers

You can select existing objects and place them inside a new frame. This is useful when you already created the design elements and later want to organize them.

1. Select the objects you want to contain.
2. Use the Frame Selection command.
3. Figma creates a frame around the selected objects.
4. The selected layers become children of the new frame.

Before:

Text
Button
Image
 
Select All
   ↓
Frame Selection
   ↓
After:
 
Frame
├── Text
├── Button
└── Image

9. Top-Level Frames

A top-level frame is a frame placed directly on the canvas and not inside another frame, group, or object.

Canvas

├── Mobile Screen
├── Login Screen
├── Home Screen
└── Profile Screen

Each screen in a mobile application prototype can commonly be represented by a top-level frame.

10. Nested Frames

A nested frame is a frame placed inside another frame. Nested frames are extremely useful for creating complex interfaces because each part of a design can have its own layout and behavior.

Mobile Screen

├── Header Frame
│   ├── Logo
│   └── Menu Button
├── Content Frame
│   ├── Image
│   ├── Heading
│   └── Description
└── Bottom Navigation Frame
    ├── Home
    ├── Search
    └── Profile

A nested frame can act as both a child of its parent frame and a parent of its own child layers.

11. Parent and Child Relationship

Frames create a parent-child hierarchy. The frame acts as the parent while the layers inside it act as children.

Parent Frame

│
├── Child Layer 1
├── Child Layer 2
├── Child Layer 3
└── Child Frame
    ├── Nested Child 1
    └── Nested Child 2

This hierarchy is important for understanding positioning, constraints, Auto Layout, resizing, component structures, and prototyping.

12. Adding Layers Inside a Frame

There are several ways to add layers to a frame.

• Create a new layer directly inside the frame.
• Drag an existing layer into the frame using the Layers panel.
• Move an object over the frame when creating a design.
• Use Frame Selection to automatically place selected layers inside a frame.

In the Layers panel, child layers appear indented under their parent frame.

13. Frame Dimensions

Frames have independent width and height values. You can change these values from the right properties panel.

Example

Width  = 390 px

Height = 844 px
 
Frame
┌──────────────────────┐
│                      │
│   Mobile Screen      │
│                      │
│                      │
└──────────────────────┘

14. Resizing a Frame

A frame can be resized manually using its handles or by entering exact dimensions in the properties panel.

1. Select the frame.
2. Drag a corner or edge handle to resize it.
3. Alternatively, edit the W and H values.
4. Use the aspect-ratio lock when proportional resizing is required.

When frames contain child layers, their behavior during resizing can depend on properties such as Constraints and Auto Layout.

15. Resize to Fit

Resize to Fit adjusts the frame boundaries so that they fit around the outermost bounds of the child objects.

Before:

 
┌──────────────────────────────┐
│   Text       Button          │
│                              │
│                              │
│                              │
└──────────────────────────────┘
 
After Resize to Fit:
 
┌───────────────────────┐
│ Text        Button    │
└───────────────────────┘

This is useful when the frame contains content and you want its boundaries to match the content area.

16. Frame Fill

A frame can have a fill such as a solid color, gradient, or image. Fill is commonly used to create backgrounds for application screens, cards, sections, and components.

Example

Mobile Frame

┌──────────────────────────┐
│                          │
│       App Content        │
│                          │
│                          │
└──────────────────────────┘
Background = White

17. Corner Radius

Corner Radius controls how rounded the corners of a frame appear.

Corner radius is commonly used for cards, buttons, mobile interfaces, modal windows, and modern UI designs.

18. Clip Content

Clip Content controls whether objects extending outside the frame boundaries are hidden.

Clip Content ON

┌──────────────────────┐
│     Image            │
│  ┌──────────────┐    │
│  │   Visible    │    │
└──┴──────────────┴────┘
 
Content outside frame = Hidden

This feature is useful for image containers, cards, banners, profile images, and other layouts where content should remain inside a defined boundary.

19. Frames and Auto Layout

Frames are closely connected with Auto Layout. Auto Layout allows frame contents to respond dynamically when text, spacing, or child elements change.

To add Auto Layout, select a frame or suitable layers and use Shift + A.

Button Frame

│
├── Text
└── Icon
 
Auto Layout
      ↓
Padding + Gap + Alignment
      ↓
Content changes
      ↓
Frame adjusts automatically

Example

Before:

┌──────────────┐
│ Submit       │
└──────────────┘
 
Text becomes:
Submit Form
 
Auto Layout:
┌────────────────────┐
│ Submit Form        │
└────────────────────┘

20. Frames and Constraints

Constraints define how child objects respond when their parent frame changes size.

21. Frames and Layout Guides

Layout Guides help designers create consistent spacing and alignment inside frames. They are especially useful for websites, dashboards, mobile screens, and responsive layouts.

Desktop Frame

┌──────────────────────────────────────┐
│ |        Content Area        |       │
│ |                            |       │
│ |       Main Content         |       │
│ |                            |       │
└──────────────────────────────────────┘
   ↑                            ↑
 Guide                         Guide

22. Frames and Prototyping

Frames can represent screens in interactive prototypes. For example, a login screen can connect to a home screen, and a product screen can connect to a checkout screen.

Login Frame

    │
    │ Click Login
    ↓
Home Frame
    │
    │ Click Product
    ↓
Product Frame
    │
    │ Click Buy
    ↓
Checkout Frame

This makes frames an important foundation for creating clickable application and website prototypes.

23. Frames vs Groups

Use Groups when you simply need to organize related layers temporarily. Use Frames when you need a structured container with dimensions, layout behavior, constraints, Auto Layout, and other frame-specific capabilities.

24. Frame vs Rectangle

25. Practical Example: Creating a Mobile Login Screen

Let's create a basic mobile login screen using frames.

Step 1: Create the Main Frame

1. Select the Frame Tool.
2. Select a Phone preset or create a custom mobile frame.
3. Name the frame Login Screen.

Step 2: Create Header Frame

1. Create a nested frame at the top.
2. Add the application logo.
3. Add a welcome heading.

Step 3: Create Form Frame

1. Create a nested frame for the login form.
2. Add an email field.
3. Add a password field.
4. Add a Login button.

Step 4: Add Auto Layout

1. Select the form frame.
2. Press Shift + A.
3. Choose the appropriate layout direction.
4. Set spacing and padding.

Login Screen

│
├── Header Frame
│   ├── Logo
│   └── Welcome Text
│
├── Form Frame
│   ├── Email Input
│   ├── Password Input
│   └── Login Button
│
└── Footer Frame
    └── Sign Up Link

26. Practical Example: Website Landing Page

A website landing page can be divided into multiple frames.

Website Frame

│
├── Navigation Frame
│   ├── Logo
│   ├── Menu
│   └── CTA Button
│
├── Hero Frame
│   ├── Heading
│   ├── Description
│   └── CTA
│
├── Features Frame
│   ├── Feature Card
│   ├── Feature Card
│   └── Feature Card
│
├── Testimonials Frame
│   └── Testimonial Cards
│
└── Footer Frame
    ├── Links
    └── Copyright

27. Practical Example: Card Design

Frames are useful for designing reusable cards.

Product Card

┌────────────────────────┐
│       Product Image    │
├────────────────────────┤
│ Product Name           │
│ Product Description    │
│ ₹1,999                 │
│ [ Add to Cart ]        │
└────────────────────────┘

The complete card can be created as a frame, while image, text, price, and button can be nested layers.

28. Naming Frames Properly

Good naming makes a Figma file easier to understand and maintain.

Use descriptive names that explain the purpose of the frame instead of leaving generic names such as Frame 1, Frame 2, or Frame 3.

29. Best Practices for Creating Frames

• Create a main frame for every major screen or page.
• Use nested frames to divide complex interfaces into logical sections.
• Use meaningful frame names.
• Use device presets when designing for known device formats.
• Use Auto Layout for content that needs to adapt dynamically.
• Use Constraints when child elements need controlled resizing behavior.
• Use consistent spacing and padding.
• Keep related elements inside the same logical frame.
• Avoid creating unnecessary nested frames.
• Use components for reusable UI elements where appropriate.
• Keep the Layers panel organized.
• Use frames consistently throughout large projects.

30. Common Mistakes When Creating Frames

Mistake 1: Using Groups Everywhere

Groups are useful, but using them instead of frames can make responsive layout work harder. Use frames when you need layout control.

Mistake 2: Poor Frame Naming

Generic names make large design files difficult to understand.

Mistake 3: Unnecessary Nested Frames

Too many nested containers can make the layer hierarchy complicated. Create nested frames only when they provide useful structure or behavior.

Mistake 4: Ignoring Auto Layout

Manually positioning every element can make a design difficult to maintain when content changes. Auto Layout can handle many dynamic layouts more efficiently.

Mistake 5: Ignoring Constraints

When a parent frame is resized, child elements may not behave as expected if appropriate constraints have not been configured.

Mistake 6: Mixing Unrelated Elements

Keep logically related elements together. A navigation frame should contain navigation elements rather than unrelated content.

31. Professional Frame Structure

A professional UI file can use a hierarchy similar to the following:

Project

│
├── Desktop
│   ├── Home Page
│   │   ├── Navbar
│   │   ├── Hero
│   │   ├── Features
│   │   └── Footer
│   └── About Page
│
├── Mobile
│   ├── Home Screen
│   ├── Product Screen
│   └── Checkout Screen
│
└── Components
    ├── Buttons
    ├── Cards
    └── Navigation

32. Creating a Frame Workflow

Open Figma File

      ↓
Select Frame Tool
      ↓
Choose Preset or Custom Size
      ↓
Create Frame
      ↓
Rename Frame
      ↓
Add Design Elements
      ↓
Create Nested Frames
      ↓
Configure Layout
      ↓
Add Auto Layout / Constraints
      ↓
Review Alignment and Spacing
      ↓
Create Prototype
      ↓
Test Design

33. Frame Creation Checklist

• ☐ Select the correct Frame Tool.
• ☐ Choose the correct frame size.
• ☐ Give the frame a meaningful name.
• ☐ Add the required child elements.
• ☐ Organize elements into logical nested frames.
• ☐ Check width and height.
• ☐ Configure fill and corner radius if required.
• ☐ Enable Clip Content when needed.
• ☐ Configure Constraints when required.
• ☐ Add Auto Layout for dynamic layouts.
• ☐ Check spacing and alignment.
• ☐ Review the Layers panel.
• ☐ Test the frame in prototype mode when appropriate.

34. Interview Questions

1. What is a Frame in Figma?
2. Why are frames important in UI design?
3. How do you create a frame in Figma?
4. What is the shortcut for the Frame Tool?
5. What is a top-level frame?
6. What is a nested frame?
7. What is the difference between a frame and a group?
8. What is the difference between a frame and a rectangle?
9. How do you create a frame around existing layers?
10. What are frame presets?
11. How can you resize a frame?
12. What is Resize to Fit?
13. What is Clip Content?
14. How does Auto Layout work with frames?
15. What are Constraints in Figma?
16. Why are nested frames useful?
17. How are frames used in prototyping?
18. How can you organize a large Figma project using frames?
19. Why is meaningful frame naming important?
20. What are common mistakes when creating frames?

35. Quick Revision

36. Conclusion

Creating Frames is a fundamental Figma skill because frames provide the structure required for professional interface design. They allow designers to organize layers, create mobile and desktop screens, build nested layouts, apply Auto Layout and Constraints, control dimensions, and connect screens during prototyping.

A strong Figma workflow usually starts by creating correctly sized frames, naming them clearly, organizing content into logical nested frames, and then applying layout features such as Auto Layout and Constraints where required. Once you understand frames properly, creating responsive interfaces, components, cards, dashboards, websites, and application screens becomes much easier.

For structured Figma learning, visit JustAcademy Figma Training and Register for Figma Course Demo.