Figma Frame Sizes: Which Preset to Pick and How to Change It

When the Frame tool is active, the right sidebar shows presets grouped into nine categories: Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media, Figma Community and Archive. Figma's help center names the categories but not every size inside them, and the list changes as devices come and go, so open the category in the app to see the current sizes.

Frames in Figma do the job artboards do in other tools. If you're looking for "add artboard", the Frame tool is it. A frame has a fixed size you set, which is the main thing that separates it from a group, whose bounds follow its children.

The most-viewed how-to thread on Figma's community forum is about screen resolutions, and the confusion is always the same. A phone's screen has far more physical pixels than the browser or app uses for layout. Content is laid out in CSS pixels (the viewport), which is a much smaller number. Your Figma frame should match the viewport, because that's the number developers build to.

• Mobile: 375px wide is the common starting width in community practice. Pick a Phone preset close to your target devices.
• Desktop: 1440px wide is the common starting width.
• Tablet: pick the Tablet preset for the device family you support, in portrait or landscape.
• Print and PDFs: use the Paper category. See the section below for US Letter.

These widths come from designers on the Figma forum, not from Figma's documentation. They're safe defaults when nobody has given you a spec. If your team ships a web app, ask the developers which breakpoints the CSS uses and make one frame per breakpoint.

Select the frame and use the frame field in the Properties panel to swap to another preset. For a custom size, type values into W and H. To swap orientation from portrait to landscape, swap the width and height values.

Resizing a frame this way changes the frame, not its contents. Children stay where they are unless their constraints tell them to move or stretch. If you want everything inside to scale with the frame, use the Scale tool (K), which resizes the frame and its children in proportion, including strokes and blurs.

Look in the Paper category first. If you set the size by hand, remember Figma works in pixels. Figma exports at 72 DPI at 1x, so a US Letter page (8.5 × 11 in) is 612 × 792 px. Export it at a higher scale when you need a print-quality image: roughly 4.17x gives 300 DPI. Figma documents only pixel units, so there's no inch or centimetre setting to switch to.

For multi-page documents and print output, how to export a PDF from Figma and exporting at 300 DPI cover the details.

Type the width and height that give the ratio you want: 1080 × 1080 for square, 1080 × 1350 for 4:5, 1920 × 1080 for 16:9. The Social Media and Presentation categories hold ready-made sizes for common formats. To keep an existing ratio while making the frame bigger or smaller, use the Scale tool (K) and type a multiplier.

Add a column grid so content lines up the same way across frames: how to add layout guides in Figma walks through columns, margins and gutters. If you want the frame to grow with its content instead of staying fixed, auto layout is the next step, and frames vs groups explains when a group is the better container.