Question

How do I export a background image exactly as it appears?

Forum|Forum|4 years ago
June 22, 2022
11 replies
10177 views

I’m a new Figma user and I’m building pages based on Figma mock-ups. I have only view access to the Figma design, and I can’t figure out how to export the background image of a frame while preserving the crop exactly as it appears in Figma.

When I export the frame itself, all content visible within the frame (text, buttons, etc.) is exported - i.e. it exports the framed region exactly as it appears. I want only the background image, but unlike this thread, I want just the portion of the background image that appears within the frame.

Is this possible? It seems like it would be a common need, but I can’t figure it out.

Ask the community

This topic has been closed for replies.

SoloAnt

Hi, @Steve20 did you ever find out how to do this?

Steve20Author

I requested edit access and temporarily hid the foreground elements. It seems silly to have to do that, but it’s the only way I know about. 😕

C

Chris_Bert

If you still haven’t found the solution. It is in this thread: Exporting The Background Image From a Frame - #2 by tank666

Steve20Author

Thanks, but if you read the original post, you’ll see that I referenced exactly that thread and point out that it does not do what I need.

tank666

If the background is made as a frame fill, then, unfortunately, hiding the foreground layers is the only way. To be able to export only the background, it needs to be a separate layer within the frame.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Benjamin_Anthonisz

This needs to be fixed asap by @Figma_Support. The dev team should be able to download just the background image and not the content block within the banner. This is typically how it’s built from a tech standpoint and far more efficient.

For tech to be able to export all these images I am having to temporarily hide the content blocks, which is not great.

Figma please please please fix this!

Diego_Vogel

Totally agree. It’s natural to use Fill (instead of image elements) for background images when designing. But when building, we need to export those background images separately. I frequently have to ask designers to export images for me because of this (when I don’t have edit access).

Mike_Escoffery

New Participant

@Figma_Support - Dev mode is completely broken when developers cannot access original images that are applied to a layer fill. Please fix this ASAP. 5 months with no reply, is a joke, this error should have been fixed within days.

Karl_Jiang1

Figmate

Hi! Sorry for the confusion, but this has actually always been available to Dev Mode, but we understand that it could be a little unintuitive where to find it. You can find it in the code panel here (“checker.png” here is clickable and will download the source image).
Screenshot 2023-11-29 at 11.02.53 AM