Why can't I just export the image layer from Figma?

You can — but the exported image usually has the text, CTA button, and darkening gradient baked into it, because they were placed on top of the image layer in the file. The 'clean' hero photo the designer started with is no longer separable in the export. You need a generative pass to remove those overlays and reconstruct what was underneath.

What if I only have a PDF or a screenshot, not the Figma file?

The extraction still works. Everything in a flattened image — PDF page, screenshot, AI-generated mockup — is treated the same: you draw a box around what you want, and Arturo returns a clean, upscaled crop.

Will the extracted image be high enough resolution?

Arturo upscales the crop to production resolution, so a hero from a 1440-wide mockup can sit in a 1600-wide section without pixelation. The generative pass fills in detail rather than just enlarging pixels.

Extract Images From a Figma Mockup (When Layers Aren't Enough)

If you've ever tried to pull a hero image out of a Figma mockup and ended up in Photoshop for the rest of the afternoon, this is why — and how to skip that part entirely.

The 60-second answer

Export the frame from Figma as a PNG (or use the PDF/screenshot if that's all you have).
Drop it into Arturo.
Draw a box around each image you want — hero, product shot, headshot, logo.
Get back a clean, upscaled crop with the overlaid text, buttons, and gradients removed and whatever was underneath reconstructed.

The rest of this guide covers why Figma's own image export doesn't solve this, what to do when you don't have the Figma file at all, and how to handle the tricky cases — text on top of the photo, buttons overlapping the subject, layered gradients.

Why "Export image layer" in Figma doesn't give you what you need

Every designer eventually notices this: you find the hero image layer, right-click, Export as PNG — and the exported file has the headline, the CTA button, and the dark gradient baked into it. That's because in the Figma file, those elements were placed on top of the image, and Figma exports what's visible in the frame at that layer's bounds.

Common ways the export dead-ends:

The image layer is a background fill on a frame that also contains the text and button — exporting the frame gives you everything; exporting the image sub-layer gives you a raw photo you probably don't have the source of.
The designer flattened the section after final review to match a stakeholder's PDF review. Now there is no image layer, just a rasterized composite.
The image is a Figma component instance whose master is in a library file you don't have permission to open.
A darkening gradient is applied as a Layer Blend: Multiply over the image and gets baked into the export.

In each case, the raw image the designer started with is gone from the file. What you can export is the composite, which is the same problem as extracting from a screenshot.

The three cases you'll actually run into

Case 1: You have the Figma file and the image layer is clean

Best case, rarest case. Right-click the image, Export as PNG at 2x, done. Move on.

Case 2: You have the Figma file but the image has overlays baked on

This is the common case. Export the frame as a PNG, drop it into Arturo, and draw a box around the image region. Arturo treats it like any flattened source: it removes the overlays generatively and reconstructs the image underneath so the crop is usable at any size in your build.

Case 3: You don't have the Figma file at all

PDF export, exported PNG, AI-generated mockup, screenshot the client sent by text — same workflow. Drop it in, draw the box. The pipeline doesn't care where the flattened image came from.

What the extraction actually does

For every box you draw, you get:

A pixel-boundary crop at exactly the region you selected — no marquee-tool guessing, no rounding to the nearest 8px.
Overlays removed generatively. Text, CTA buttons, badges, gradient darkening, playhead icons on video thumbnails — all recognized and removed, with the pixels underneath reconstructed based on the surrounding image.
An upscale to production resolution so the image can sit in a full-width hero without visible blur.
Transparent-background support for objects like product shots or logos where you want the isolated subject, not the mockup context.

The hard cases (and how the extraction handles them)

Text on top of a person's face

The classic magazine-cover problem. Removing the text and reconstructing skin, hair, and eyes convincingly is the whole reason a generative pass is required — a spot-heal or clone stamp in Photoshop is where designers lose an hour per hero. The extraction handles this in one shot; the result is usable for a real hero, not just a low-res placeholder.

A CTA button covering the subject

Buttons frequently sit right on the main subject of the photo. Same fix — the button is removed and the underlying image is reconstructed. If the button covered a critical detail (a logo, a face landmark), you'll see the reconstruction; if it covered background, you won't be able to tell it was ever there.

Multiple gradient overlays

Marketing mockups often stack a top-to-bottom darkening gradient with a left-side dark fade for headline legibility. Both come off. The final crop matches the tone of the original photo, not the compressed exposure range of the mockup.

Product shot with a fake shadow

Designers often add drop shadows in Figma that don't exist in the original product photo. Those get removed with the rest of the overlays. If you want to keep the shadow, exclude it from your box.

Getting fonts, colors, and copy out of the same mockup

Since the image is only one of the four things you need for a real build, the same extraction pass returns:

The closest Google Font for each text style, with weights.
The full palette as HEX, ready for your builder or theme.
Every headline, subhead, and body block, editable and exportable.

One ZIP: images, fonts snippet, palette file, copy doc. Which is exactly what a build needs and nothing more.

Common questions

Does this work on Figma community files or shared prototypes?

Yes — you just need to export a frame as PNG or take a screenshot of the prototype. Access to the underlying Figma layers isn't required.

What about vector illustrations and icons?

For vector-native assets (icons, custom illustrations), export them from Figma as SVG directly — that's still the best workflow. Arturo is designed for photographic and complex raster content where "just export the layer" doesn't work.

Can I extract just part of an image?

Yes. Draw the box around exactly the region you want. A headshot from a group photo, a single product from a hero lineup, the logo without the wordmark — the crop is defined by the box, not by any layer boundary in the source.

Try it on your last Figma mockup

First 25 assets are free — no signup required. Export the frame, drop it in, draw a box.

Try free — no signup See pricing