How to Export @1x and @2x Without Losing the Pair
By Khushi Yadav
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:
xfor multiplier,w/hfor 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):
- Select the frame or component
- In the right sidebar Export, add two rows
PNG1xandPNG2x(orSVGonce, if the icon should be vector and skip the pair)- Export; the desktop app prompts for a location
- 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
- Design at 1× pixel size (or use artboards)
- File > Export > Export As
- Use the size/scale controls Adobe documents for multiple sizes
- Write both files into the same folder with the
@2xsuffix - 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
| Attempt | What happens |
|---|---|
| Copy 1×, then copy 2× | Live clipboard is only 2×; history may have both if each is under 4 MB |
| Pin both bitmaps | No filenames; no guarantee they are the same icon |
| Copy the two files in Explorer | File list pastes in Explorer; Win+V does not store files |
| Copy as PNG from Figma | One 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
- Explorer details: width of
@2xis exactly 2× the 1× width (and height) - Same format, same color profile (sRGB for screen)
- Same crop — open both, they should overlay when the 2× is scaled to 50%
- Both files in the PR
srcsetor 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
- Draw the icon in a 24×24 frame (1× CSS)
- Figma Export: PNG 1x →
icon-bold.png(24×24), PNG 2x →icon-bold@2x.png(48×48) - Confirm Explorer details: 24 and 48 on the width column
- Commit both next to the component
- CSS:
background-imageplus-webkit-min-device-pixel-ratio/image-set, or animgsrcset
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
| Symptom | Cause | Fix |
|---|---|---|
| Both files same pixel size | Export row was 1x twice, or only DPI metadata changed | Re-read Figma's 2x = 144 DPI and doubled pixels |
| 2× missing from PR | Designer pasted one bitmap into Slack | Re-export; attach files |
| Huge file | 3× or 4× on a large photo | Use 2× or a w constraint |
| Print vendor asks for 300 DPI | Wrong category | Make 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
- Working With Print Shops: PDF First, Clipboard Never
- Mood Boards in PureRef vs a Clipboard Shelf
- Best Clipboard Setup for Photoshop Users
- Best Clipboard Habits for Developers in 2026
Sources
- Export formats and settings for static designs (Figma) — official 1x/2x scale, 72 DPI base, 144 DPI at 2x.
- Export static designs from Figma — export UI and Copy as PNG/SVG.
- Copy and paste objects (Figma) — Copy as PNG defaults to 2×.
- Export files in different sizes (Adobe Photoshop) — official multi-size export.
- Using the clipboard (Microsoft Support) — 25 / 4 MB / no files, so pairs cannot live in Win+V.
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 · LinkedInCopy. 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