The Frame Tool is one of the most essential features in Figma. It acts as both a canvas and a container, making it a core building block for designing layouts, organizing components, and preparing responsive screens. Whether you’re mocking up mobile interfaces or structuring design systems, understanding how to use the Frame Tool will elevate your workflow.
What Is a Frame in Figma?
A frame in Figma is more than just a visual boundary. It behaves like both an artboard and a layout container. You can place elements inside it, apply constraints, use auto layout, and export it as a design asset. Frames are used to:
- Create screens (mobile, tablet, desktop)
- Structure sections of a UI (headers, cards, modals)
- Nest elements to manage hierarchy
- Set up layout grids, constraints, and responsive behavior
How to Create a Frame in Figma
Option 1: Use the Frame Tool
- Press F on your keyboard or select the Frame Tool from the top toolbar.
- Click and drag on the canvas to draw a frame of any size.
- Alternatively, choose a preset device size (e.g., iPhone 13, Desktop HD) from the right sidebar after selecting the Frame Tool.
Option 2: Convert a Shape or Selection
You can also right-click on any shape or group and choose Frame selection to wrap it inside a new frame.
How to Resize and Move Frames
- Resizing: Click and drag the edges or corners of the frame. Use Shift to constrain proportions.
- Moving: Select the frame and drag it to a new location on the canvas.
How to Use Frames as Layout Containers
Frames allow you to nest content and apply layout settings:
- Auto Layout: Add Auto Layout to a frame from the right-hand panel to align and space its children.
- Constraints: Set how child elements behave when the frame resizes (top, center, left/right, scale).
- Layout Grids: Apply grids or columns for precise spacing, especially useful in web and app design.
Best Practices for Using Frames
- Use frames instead of groups when building components or sections of a design.
- Combine frames with Auto Layout for flexible, responsive UI.
- Name frames clearly to stay organized (e.g., “Header”, “Sidebar”, “Card Container”).
- Don’t confuse frames with shapes—frames act as containers, while shapes are purely visual elements.
Frames vs. Groups: Key Differences
| Feature | Frame | Group |
|---|---|---|
| Acts as container | ✅ Yes | ❌ No |
| Supports layout | ✅ Auto Layout, Constraints, Grids | ❌ Limited |
| Exportable unit | ✅ Yes | ✅ Yes |
| Nested behavior | ✅ Smart | ❌ Basic |
When to Use Frames
✅ Use frames when you:
- Create screen sizes and responsive layouts
- Build reusable components
- Apply auto layout or constraints
- Organize sections of a design
❌ Avoid using them for:
- Simple shapes or icons (use vector tools or groups instead)
Conclusion
The Frame Tool in Figma isn’t just about drawing rectangles—it’s a structural powerhouse that supports everything from design systems to device previews. Mastering it early sets the foundation for clean, scalable, and collaborative UI design.
Designilo 