← Back to Blog

Design & Creative | Jul 16, 2026 | 6 min read

How to Export @1x and @2x Without Losing the Pair

By Khushi Yadav

How to Export @1x and @2x Without Losing the Pair — Edge Drop Guide

High-density screens need more pixels, not a second trip to the canvas. The industry shorthand is 1× (CSS or layout pixels) and 2× (twice the pixel width and height). Android also uses mdpi / xhdpi / xxhdpi. The failure mode is always the same: one half of the pair ships, the other half is a screenshot in Slack, and Win+V has already forgotten Tuesday's export.

Microsoft's clipboard history stores 25 items, 4 MB each, as text, HTML, or bitmap. A 2× PNG of a 1200-pixel hero is often larger than 4 MB and will not join history. Two related files are not a first-class object. Keep the pair on disk, named, together.

What 1× and 2× actually mean

Figma's official export settings article:

  • Default image exports are 72 DPI
  • Scale multiplies that: 2× → 144 DPI, 3× → 216 DPI
  • Suffixes: x for multiplier, w / h for a fixed edge
  • Figma may display a 2× image at half size when re-imported, because it assumes 144 DPI is a high-density asset

Copy as PNG in Figma (official copy/paste help) defaults to a 2× image. That is a paste convenience. It is not a 1×+2× pair.

Adobe Photoshop documents Export files in different sizes and Export As / Quick Export. Use Export As when one layer or artboard must write multiple sizes in one dialog. Do not Copy Merged twice at different zoom levels — a 200% view screenshot is not a 2× asset, it is a picture of a zoomed window.

CSS/HTML typical pattern:

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

Or a single 2× image displayed at half size. Engineering should choose. Design should still produce a known 1× size so the layout does not drift.

Name the pair so it cannot separate

Pick one convention and do not mix it in a folder:

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

or

icon-search-1x.png
icon-search-2x.png

or Android-style folders:

drawable-mdpi/icon_search.png
drawable-xhdpi/icon_search.png

Never:

search.png
search-retina-FINAL.png
Screenshot 2026-08-18 ...

How to Hand Assets to a Developer Without Slack Soup is the delivery path. The pair should enter the repo in one commit.

Figma: one export preset, two scales

Official steps (paraphrased from Figma export help):

  1. Select the frame or component
  2. In the right sidebar Export, add two rows
  3. PNG 1x and PNG 2x (or SVG once, if the icon should be vector and skip the pair)
  4. Export; the desktop app prompts for a location
  5. Confirm both files landed and both names match

Use SVG for simple icons instead of a raster pair. A vector is density-independent. Figma Copy as SVG exists for tool-to-tool hops; the handoff is still a file in the repo.

If the asset is a photograph inside a 375-wide frame, 2× means 750 pixels wide, not "export and then enlarge in Photoshop." Enlarge-from-1× is a different, worse picture.

Figma resizes pasted images over 4096 px. Do not paste a 4× marketing still into the file and re-export; place the correctly sized source. Figma Desktop vs Figma Web: Paste Behavior Differs.

Photoshop: Export As, not zoom-and-snip

  1. Design at 1× pixel size (or use artboards)
  2. File > Export > Export As
  3. Use the size/scale controls Adobe documents for multiple sizes
  4. Write both files into the same folder with the @2x suffix
  5. Quick Export is fine when the preset is already "this project's 1× PNG"; it is the wrong dialog for a pair unless the preset writes both

Best Clipboard Setup for Photoshop Users and How to Move an Export From Photoshop to a Browser Mock.

Affinity: export the two sizes from the export options available in that version; do not rely on New from Clipboard twice. Affinity Photo and Designer on Windows: Paste Notes.

Canva and "resize magic"

Canva resize is a document resize, not a guaranteed 1×/2× pair for engineering. Download the size the design was built at, or use official resize, then verify pixel dimensions in Explorer details. Do not assume a Magic Resize 1080×1080 is the 2× of a 540×540 post unless the pixels say so. Canva Desktop vs Canva Web Clipboard Limits.

Why a clipboard stack is a bad pair

AttemptWhat happens
Copy 1×, then copy 2×Live clipboard is only 2×; history may have both if each is under 4 MB
Pin both bitmapsNo filenames; no guarantee they are the same icon
Copy the two files in ExplorerFile list pastes in Explorer; Win+V does not store files
Copy as PNG from FigmaOne 2× bitmap, not a pair

A local shelf that groups two files as one stack is the only clipboard-shaped object that matches the job. Optional tools such as Edge-Drop can keep a bundle for the drop into the repo folder. That is staging, not export. The exporter still has to write both names.

If the pair is a dark and light treatment, that is a theme pair, not a density pair — keep both concepts. How to Keep a Dark-Mode and Light-Mode Pair. Density × theme can be four files. Name all four. Do not keep four anonymous bitmaps in history.

Print is not 2×

300 DPI print is not @2x. A 2× screen PNG is still RGB, still 144-ish effective metadata, still the wrong object for a press. Working With Print Shops: PDF First, Clipboard Never. Color Palettes: Hex Lists vs Visual Swatches if the "pair" was actually two color ramps.

QA the pair in five minutes

  1. Explorer details: width of @2x is exactly 2× the 1× width (and height)
  2. Same format, same color profile (sRGB for screen)
  3. Same crop — open both, they should overlay when the 2× is scaled to 50%
  4. Both files in the PR
  5. srcset or the platform's density bucket references both names

If a 2× is 2× *file size* but the same pixel dimensions, the export only changed compression or DPI metadata. Figma's article explains DPI scaling; pixel dimensions should still increase with 2x for a normal raster export. If they did not, the export row was wrong.

Social crops are a different triple

1:1, 4:5, and 16:9 are aspect variants, not density variants. They can each have 1×/2× if needed, but most social schedulers want one final pixel size per network. Social Crop Sizes: Stage 1:1, 4:5, and 16:9 Exports.

Keep density pairs for product UI. Keep aspect sets for distribution. Do not store either set only in Win+V.

Worked example: a 24-pixel toolbar icon

  1. Draw the icon in a 24×24 frame (1× CSS)
  2. Figma Export: PNG 1x → icon-bold.png (24×24), PNG 2x → icon-bold@2x.png (48×48)
  3. Confirm Explorer details: 24 and 48 on the width column
  4. Commit both next to the component
  5. CSS: background-image plus -webkit-min-device-pixel-ratio / image-set, or an img srcset

If someone only Copy as PNG, the result is a 48×48 image (2× default) with no 24×24 sibling. Either add the 1× export or document that the app always displays the 2× at 24 CSS pixels.

Troubleshooting

SymptomCauseFix
Both files same pixel sizeExport row was 1x twice, or only DPI metadata changedRe-read Figma's 2x = 144 DPI and doubled pixels
2× missing from PRDesigner pasted one bitmap into SlackRe-export; attach files
Huge file3× or 4× on a large photoUse 2× or a w constraint
Print vendor asks for 300 DPIWrong categoryMake a print PDF

The pair is two files with a naming contract. Figma and Photoshop both export that contract when asked. The Windows clipboard cannot. Export once, keep the names glued together, and hand the folder to git.

Related reading

Sources

Khushi Yadav
Written by Khushi Yadav · Author & Content Writer

Khushi Yadav is a B.Tech Computer Science Engineering student interested in technology, software, and exploring practical applications of computer science. She enjoys learning new concepts and contributing to technology-focused projects.

GitHub · LinkedIn

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

Free · Lightweight · Privacy First
Find us on CodeHype