Adding a device frame in Figma is straightforward and typically involves using the Frame tool to select a preset dimension tailored for specific devices like phones, tablets, or desktops.
To add a device frame, you'll use the Frame tool and choose from a list of predefined sizes optimized for various use cases.
Steps to Add a Device Frame
Follow these steps to add a frame with device-specific dimensions in Figma:
- Select the Frame Tool: Activate the Frame tool from the toolbar (or press the
Fkey on your keyboard). - Create a Frame:
- Click anywhere on the canvas. This creates a default frame with dimensions of 100x100 pixels. You can resize this frame later, but this isn't the primary method for adding a device frame using presets.
- Alternatively, click and drag on the canvas to create a frame with custom dimensions. Again, this is not the method for using device presets directly, but it's a way to start a frame before potentially changing its size via the properties panel.
- Select a Device Preset: This is the most efficient way to add a device-specific frame.
- With the Frame tool active (or after creating a frame), look at the right sidebar in Figma.
- Locate the dropdown menu specifically for Frame presets.
- Click this dropdown and select from categories like Phone, Tablet, Desktop, Presentation, Watch, or Paper.
By selecting a preset from the dropdown in the right sidebar, Figma instantly resizes your frame to the standard dimensions for that chosen device or asset type.
Understanding Frame Presets
Figma provides a variety of built-in presets to quickly set up artboards (frames) for common projects. This saves time and ensures your design begins with appropriate dimensions for its target medium.
Here are some common categories you'll find in the Frame presets dropdown:
- Phone: Includes popular smartphone sizes (e.g., iPhone 14, Android).
- Tablet: Provides dimensions for standard tablet devices (e.g., iPad Mini, Surface Pro).
- Desktop: Offers common screen resolutions for desktop monitors (e.g., MacBook Pro, Desktop HD).
- Presentation: Sizes suitable for presentations (e.g., 16:9, 4:3).
- Watch: Presets for smartwatches.
- Paper: Standard paper sizes (e.g., A4, Letter).
Selecting a preset from these categories automatically sets the frame's width and height, allowing you to immediately start designing within the correct constraints for your intended device or format.
