Skip to main content

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.

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

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. 😕

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

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.

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.

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!

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).

@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.

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

Oh I see this is not what @Steve20 is asking for in particular.


Interesting, we’ll think about if this is something that would be easy for us to support, but yes you’re right this is not currently possible.

Anyone else shed light on this?  The background images were set as frame fill as ​@tank666 alluded to.  Whether in Dev mode or not, there doesn’t seem to be a way to access the image.

I can see the image set in the Fill.  In the Inspect tab it has all of the CSS for the “Layout”, and then under “Style” it has: 

background: url(<path-to-image>) lightgray 50% / cover no-repeat, url(<path-to-image>) lightgray 50% / cover no-repeat;

Can’t click on the image.  Under Assets it lists the entire frame as an export option.  

In the Code Panel, it just says “Image 1328x845”, not the actual file name, and no means of clicking on it. 

If I copy the element as CSS, in the output I can see the image name in the CSS rules, but it is a relative path with no real URL to obtain the image. 

Still left resorting to hiding the text frame overlaid on top and then exporting the component as a PNG.

Thanks.

Reply


Terms & ConditionsCookie settings