How to Export @1x and @2x Images in Figma and Photoshop

Export both sizes in one pass. In Figma, add two export settings to the same layer, 1x and 2x, and give the 2x row the suffix @2x. In Photoshop, use File > Export > Export As, add a 2x size with the suffix @2x, and export. Name the files so the pair sorts together (icon.png and icon@2x.png), check that the 2x file is exactly double in both width and height, and hand both over at the same time.

What 1x and 2x mean

1x is the asset at the pixel size you designed it, which is the size it occupies in the layout (a 24×24 icon). 2x has twice the width and twice the height (48×48), so it stays sharp on high-density screens where one layout pixel is drawn with more than one device pixel.

Figma also records resolution metadata: exports default to 72 DPI, so 2x is 144 DPI and 3x is 216 DPI. Figma treats 2x exports as high-density assets, which is why a 2x PNG placed back into Figma appears at half its pixel size instead of looking twice as big.

How to export a 1x and 2x pair in Figma

1. Select the frame, component or layer.
2. In the right sidebar, find Export near the bottom and click + to add an export setting.
3. Set the first row to 1x and PNG.
4. Click + again, set the second row to 2x and PNG, and type @2x in that row's Suffix field.
5. Click Export. The desktop app asks where to save; the browser saves to your downloads folder.

Figma adds whatever you type in the Suffix field to the file name, so the second row produces icon@2x.png next to icon.png. To export many icons at once with the same settings, select them all before exporting, or use File > Export (Ctrl+Shift+E) for a bulk export.

For simple flat icons, consider one SVG instead of a raster pair. Figma exports SVG only at 1x, but a vector doesn't need a density pair. SVG or PNG: which survives the clipboard? covers the trade-offs.

How to export a 1x and 2x pair in Photoshop

1. Design at 1x pixel size, using artboards if you have several assets.
2. Select the layers or artboards to export.
3. Choose File > Export > Export As.
4. In the scale list on the left, select 1x for the first size.
5. Click + to add another size, choose 2x, and enter @2x as its suffix.
6. Set format and quality (for PNG, keep Transparency on if the asset needs it).
7. Click Export. Photoshop writes every size for every selected layer or artboard.

Check the 2x file at 100% zoom before you hand it over. If a placed photo or bitmap in the design is only 1x resolution, the 2x export can only enlarge its pixels; place raster images at 2x resolution so the larger export has real detail. To use the exports in a web prototype, move them from Photoshop into the browser mock as files rather than pasting.

Naming conventions that keep the pair together

Pick one convention per project and stick to it:

icon-search.png
icon-search@2x.png

hero-home.png
hero-home@2x.png

The @2x suffix sorts the larger file directly after the smaller one and matches how many web and app teams reference density variants. On the web, an img element can point at both with a srcset density descriptor:

<img src="icon-search.png" srcset="icon-search.png 1x, icon-search@2x.png 2x" alt="Search">

If you also ship light and dark versions, the theme goes in the name too, giving four files: logo-light.png, logo-light@2x.png, logo-dark.png, logo-dark@2x.png. How to manage light and dark mode assets in Figma covers the theme side.

Check the pair before you ship it

1. Open both files and compare pixel dimensions. The 2x file must be exactly double in width and height (24×24 and 48×48), not just larger in file size.
2. Overlay them: the 2x image scaled to 50% should line up with the 1x image with the same crop.
3. Check transparency on both. A PNG that gained a white background in one export breaks the pair; how to keep transparent PNGs transparent lists the usual causes.
4. Commit or upload both files together, with the code that references them.

If both files have the same pixel dimensions, one export row was set to the wrong scale. Fix the row and export again; don't resize the 1x file up to fake a 2x.

Why copy-paste can't produce a pair

Copying is a single-image operation. Figma's Copy as PNG (Ctrl+Shift+C) always copies one image at 2x, with no 1x sibling and no file name. Windows clipboard history (Win+V) stores bitmaps without names and doesn't store files at all, so two exports copied one after the other become two unrelated images. Export to files, then move the files.

Once both files exist, Edge Drop can keep them together as one stack on the edge of the screen: copy both in Explorer and they're captured as a single file bundle you can drag into the repo folder, a ticket or a chat in one move.

FAQ

Do I need a 3x export too?

Only if your target platform uses it. Figma accepts any multiplier, so add a 3x row with an @3x suffix if the developers ask for one.

Why does my 2x image look half size when I put it back into Figma?

Figma treats 2x exports as high-density assets and scales them down on import so they match the original layout size. The pixels are all still there.

Is changing the DPI the same as exporting 2x?

No. DPI is metadata. A 2x export has twice the pixel width and height; a 1x image with a higher DPI value has the same pixels as before.

Related reading

• How to Hand Off Design Assets to Developers (Checklist)
• How to Copy and Paste SVG as Vectors, Not Pixels
• How to Keep Transparent PNGs Transparent Through Paste
• How to Drag and Drop Multiple Files at Once in Windows

Sources

• Export formats and settings for static designs (Figma Help) — scale suffixes, 72 DPI base, 2x = 144 DPI, Suffix field, SVG at 1x only, 2x assets scaled down on import.
• Export static designs from Figma (Figma Help) — Export section, multiple export settings, bulk export shortcut.
• Copy and paste objects (Figma Help) — Copy as PNG defaults to 2x.
• Export files in different sizes (Adobe Photoshop) — Export As with multiple sizes and suffixes.
• Export settings and export location preferences (Adobe Photoshop) — Scale All size and suffix options, PNG transparency.
• The Image Embed element (MDN) — srcset density descriptors.
• Using the clipboard (Microsoft Support) — clipboard history formats.

Copy. Stack. Drop.

Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.

Download for Windows Get from Microsoft Store

How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge Drop vs Win+V · Support