What Is Frame in Figma: Definition and Usage Explained

In Figma, a frame is a container that holds and organizes design elements like shapes, text, and images. It acts like a digital canvas or a group that helps you structure your design and control layout and positioning.

How It Works

A frame in Figma works like a box or a container where you can place other design items. Imagine it as a photo frame that holds pictures, but in this case, it holds shapes, text, and other objects. Frames help keep your design tidy and organized.

Frames also control how elements inside them behave when you resize or move the frame. For example, if you resize a frame, the items inside can adjust their size or position based on rules you set. This makes it easier to create responsive designs that adapt to different screen sizes.

Frames can be nested inside other frames, like folders inside folders, which helps you build complex layouts step-by-step. They also define boundaries for scrolling areas or export regions.

Example

This example shows how to create a frame and add a rectangle and text inside it using Figma's plugin API (JavaScript). It demonstrates the frame as a container holding other elements.

javascript

const frame = figma.createFrame();
frame.resize(300, 200);
frame.fills = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];

const rect = figma.createRectangle();
rect.resize(100, 100);
rect.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 0.8 } }];
rect.x = 20;
rect.y = 20;

const text = figma.createText();
await figma.loadFontAsync({ family: "Roboto", style: "Regular" });
text.characters = "Hello Frame!";
text.x = 140;
text.y = 80;

frame.appendChild(rect);
frame.appendChild(text);
figma.currentPage.appendChild(frame);

Output

A 300x200 light gray frame appears on the canvas containing a blue rectangle on the left and the text 'Hello Frame!' on the right.

When to Use

Use frames in Figma whenever you want to group and organize design elements logically. They are essential for creating layouts like buttons, cards, or entire screens.

Frames help manage responsive designs by controlling how child elements resize or move when the frame changes size. For example, use frames to design mobile app screens or website sections that adapt to different devices.

They also define export areas, so if you want to export a specific part of your design, putting it inside a frame makes it easy to select and export.

Key Points

• Frames are containers that hold and organize design elements.
• They control layout and resizing of their child elements.
• Frames can be nested to build complex designs.
• Use frames to define export areas and scrolling regions.
• Frames help create responsive designs that adapt to screen sizes.

Key Takeaways

A frame in Figma is a container that organizes and holds design elements.

Frames control how child elements resize and move within them.

Use frames to build layouts, manage responsiveness, and define export areas.

Frames can be nested to create complex and structured designs.

Frames help keep your design organized and adaptable to different screens.