Figma Image Sizes: Export Dimensions and Canvas Specs (2026)

Figma frame presets: web, mobile, and social

The preset list saves you from guessing a canvas, but it is not a spec sheet — Figma publishes the nine categories and no numbers, and the social presets in particular drift out of date. Figma’s Instagram post preset is still the 1080 x 1080 square, while the size Instagram feeds actually favour is the 1080 x 1350 portrait. A preset tells you what Figma shipped; the destination platform tells you what to design.

• Design device frames at 1x, export at 2x or 3x. A 393 x 852 phone frame is points, not pixels — the export multiplier is where the retina resolution comes from, not the canvas.
• Web: 1440 x 1024 for the desktop frame. It is the common design width with a viewport-height frame; drop a 1920-wide frame beside it only if you are checking how the layout stretches.
• Mobile: 393 x 852 covers most current iPhones, 360 x 800 covers Android. Both are the narrow end of the range you have to support, which is the useful end to design at.
• Tablet: 834 x 1194 (iPad Pro 11″). Tablet is where a phone layout stops working and a desktop layout hasn’t started, so it needs its own frame rather than a scaled one.
• Social: build the artboard from the platform’s current spec. Set a custom size in the width and height fields instead of trusting the preset — the platforms change their specs far more often than Figma updates the list.
• Presentation frames are 16:9. 1920 x 1080 matches what slide software expects, so a deck exported from Figma drops into Google Slides without letterboxing.

Resize an image to any of these → Pick a platform, pick the preset, download.

Figma export settings: PNG, JPG, and quality

The size field takes more than a multiplier, and that is the part most people miss. Type 2x for a multiplier, 512w to force a fixed width, or 100hto force a fixed height — so you can hit an exact upload spec from a frame that isn’t that size, without touching the design. SVG and PDF ignore all of it and export at 1x.

• JPG already exports at High quality. Figma’s image quality dropdown covers JPG and PDF only, and JPGs default to High while PDFs default to Medium — so if a PDF looks soft, that dropdown is the first thing to change.
• Image resampling changes what a downscale looks like. Detailed is the bicubic default and is right for photos, gradients, and drop shadows; Basic is nearest neighbour and is what keeps icons, pixel art, and hard 1px lines from going fuzzy.
• 2x is the safe default for anything on a screen. A 1x PNG of a 393-point phone frame is 393 pixels wide, and every retina display will upscale it.
• Set the colour profile deliberately. Exports offer Same as file, sRGB, or Display P3 — pick sRGB for anything going to the web or a social platform, or the vivid P3 colours you picked will shift once they land.
• “Ignore overlapping layers” exports just the selection. Anything intersecting the frame stops bleeding into the export, which is the fix for a stray shape appearing in an icon.
• Suffix your scales. Add @2x or @3x in the suffix field and one export produces correctly named iOS asset files instead of three overwritten downloads.

Already exported at the wrong size? Resize it → Runs in your browser — no upload, no account.

Figma file thumbnail and component cover size

Left alone, a file’s thumbnail is whatever happens to be on page one — usually a zoomed-out smear of frames that tells a teammate nothing. Setting one is a right-click, and the 16:9 frame is the whole spec: Figma recommends 1920 x 1080 specifically “to make sure your thumbnails aren’t awkwardly cropped”. Only frames qualify, so if Set as thumbnail is missing from the menu, wrap the layers in a frame and try again.

• Treat it as a label, not a screenshot. A file name in large type plus a status word does more in a file browser than a shrunken copy of the design.
• Keep a Cover page as page one. Park the 1920 x 1080 frame there and the default and the custom thumbnail become the same thing, which survives someone forgetting to re-set it.
• Component thumbnails are not the same feature. The Assets panel draws its previews from the components themselves — there is no separate upload — so what makes a library scannable is consistent component frame sizes and naming, not a cover image.
• Detach an instance before using it. A component instance can’t be set as a thumbnail; the fix is to detach it, or nest it inside a plain frame and set that.
• You need edit access. Anyone with “can edit” on the file can change the thumbnail — and it changes for everyone who can see the file.

Resize an image to 1920x1080 → Pick Figma, then the File Thumbnail / Cover preset.

Figma Community file cover image size

Community cover art is the only image on this page with a click-through riding on it. It is shown in a grid next to hundreds of others, at a fraction of 1920 pixels wide, and it is the entire basis on which someone decides whether to open your file. Use the Plugin / file cover preset under Figma Community to get the frame at the right size, then design for the small render.

• Big type, few words. At grid size a cover is roughly a business card. A three-word title reads; a feature list does not.
• Say what the file is, not how it looks. “Dashboard UI Kit — 60 components” earns a click that an abstract gradient doesn’t.
• Use the other nine slots. The carousel takes a thumbnail plus up to nine more images — that is where the screenshots, variants, and component close-ups go, at the same 1920 x 1080.
• Don’t reuse a 2:1 cover. An old 1920 x 960 file dropped into a 16:9 slot gets bars or a crop. Resize the frame, then re-export.
• Check it at 25%. Zoom the cover frame out until it’s thumbnail-sized on your screen. Whatever is unreadable there is unreadable in Community.

Resize an image to 1920x1080 → Pick Figma, then Community Cover Art.

Prototype frame sizes and device settings

Device settings are cosmetic — they wrap the prototype in a phone or laptop shell — but they are gated by your frame size. Match a real device’s dimensions and you get that device’s container; invent a canvas and your only options are a custom size or no frame at all. This is the one place where an arbitrary frame width costs you something concrete.

• Start the flow from a device-sized frame. 393 x 852 for a current iPhone, 360 x 800 for Android, 834 x 1194 for an iPad Pro 11-inch, 1440 x 1024 for desktop.
• Every frame in a flow should be the same size. Mixed heights make the prototype jump between screens, which reads as a transition bug rather than a size mismatch.
• Watch and paper presets exist too. They are in the same list, and a watch frame is the fastest way to find out that your type scale doesn’t survive a small screen.
• Frames are what prototype; groups don’t. Prototyping, constraints, layout grids, and auto layout are all frame-only features — a group can’t hold a connection.
• Screenshotting a prototype isn’t exporting one. Export the frame at 2x from the export panel; a screen capture gives you your own monitor’s pixel density and the device shell along with it.

The 4096px import ceiling

This is the answer to “why does my export look soft when the source was huge”. The moment a 6000-pixel photo lands in Figma it is downscaled to 4096 on its longest side, and every export after that is drawn from the smaller version — exporting the frame at 3x cannot bring back pixels the file no longer has. Crop or resize the photo to the size you actually need before you place it, rather than importing the original and scaling it down on the canvas.

Resize a photo before importing it → Pick Figma, then Max Image Fill for the 4096 ceiling.