Understanding Frames and Artboards in Figma

1. Frames

Frames in Figma are containers that define the boundaries of your design. Each frame can represent a different screen or section of your design. They act as a viewport, helping you organize and structure your content. Frames can be resized, nested, and even duplicated to create variations of your design.

Example: When designing a mobile app, each screen (e.g., Home, Settings, Profile) would be a separate frame within the canvas.

2. Artboards

Artboards in Figma are similar to frames but are primarily used in the context of traditional print design. They define a specific area within the canvas where your design elements reside. Artboards are often used for creating multiple design variations or for organizing content in a print layout.

Example: If you are designing a poster, each version (e.g., landscape, portrait) would be a separate artboard within the canvas.

Key Differences and Use Cases

While frames and artboards serve similar purposes, their use cases differ based on the type of design project. Frames are more commonly used in digital design projects like websites and apps, where you need to define specific screen sizes or sections. Artboards, on the other hand, are more suited for print design projects where you need to define specific dimensions and layouts.

Example: In a website design project, you would use frames to create different web pages. In a print design project, you would use artboards to create different poster layouts.

Organizing Your Design with Frames and Artboards

Organizing your design with frames and artboards helps in maintaining clarity and structure. By using frames, you can easily manage different screens or sections of your digital design. Artboards help in organizing content for print designs, ensuring that each layout is clearly defined.

Example: In a multi-page brochure design, you would use artboards to define each page layout. In a mobile app design, you would use frames to define each screen's layout.