QUICK NOTE
For some reason it doesn't work in the community preview here but works just fine in the external preview. Might be due to the embed.
Introduction
Ever needed to grab a section of your design as an image and found yourself exporting, downloading, finding the file, then re-uploading it? Framer doesn’t have Figma’s “copy as PNG” — so this component fills that gap.
The pain it solves
Framer can’t copy a frame straight to your clipboard as a PNG. That means every time you want an image of a section, you’re stuck in the export → save → re-import shuffle. This component skips all of it: drop the button into a frame, open the preview, click it, and the frame is on your clipboard as a PNG — ready to paste anywhere.
A slightly unconventional approach (that just works)
Most components add something to your published site. This one is really a designer’s utility wearing a component’s clothes — it uses the on-canvas component system to give you a clipboard tool Framer doesn’t ship natively. It’s a pragmatic, temporary fix rather than a “proper” feature, but it does the job cleanly today.
Good to know
Works when the frame can be opened in the preview and the button is clicked there.
The copied PNG does not include the button itself — you get a clean capture of the frame around it.
Use cases
Post to socials, fast — grab a section of your site as an image and paste it straight into a post, no exporting.
Reuse frames as masks — copy any frame and paste it back into Framer to use as a mask, without the export/import round-trip.
Quick handoffs — drop a section into Slack, docs, or DMs in seconds.
…and plenty more, anywhere you’d reach for “copy as image.”
A small tool that removes a surprisingly annoying friction. Until Framer supports this natively, it’s the shortcut your workflow has been missing.
QUICK NOTE
For some reason it doesn't work in the community preview here but works just fine in the external preview. Might be due to the embed.
Introduction
Ever needed to grab a section of your design as an image and found yourself exporting, downloading, finding the file, then re-uploading it? Framer doesn’t have Figma’s “copy as PNG” — so this component fills that gap.
The pain it solves
Framer can’t copy a frame straight to your clipboard as a PNG. That means every time you want an image of a section, you’re stuck in the export → save → re-import shuffle. This component skips all of it: drop the button into a frame, open the preview, click it, and the frame is on your clipboard as a PNG — ready to paste anywhere.
A slightly unconventional approach (that just works)
Most components add something to your published site. This one is really a designer’s utility wearing a component’s clothes — it uses the on-canvas component system to give you a clipboard tool Framer doesn’t ship natively. It’s a pragmatic, temporary fix rather than a “proper” feature, but it does the job cleanly today.
Good to know
Works when the frame can be opened in the preview and the button is clicked there.
The copied PNG does not include the button itself — you get a clean capture of the frame around it.
Use cases
Post to socials, fast — grab a section of your site as an image and paste it straight into a post, no exporting.
Reuse frames as masks — copy any frame and paste it back into Framer to use as a mask, without the export/import round-trip.
Quick handoffs — drop a section into Slack, docs, or DMs in seconds.
…and plenty more, anywhere you’d reach for “copy as image.”
A small tool that removes a surprisingly annoying friction. Until Framer supports this natively, it’s the shortcut your workflow has been missing.
