Figma exports framed icon with incorrect sizes

Everything is correct, you are just missing one detail. Exporting this frame at 1x results in 524 × 512 size — bigger than the frame. That’s because the content inside has a shadow which makes it go past the frame borders. To cut this shadow both in Figma and in export, enable Clip Content on the frame. Or make the contents slightly smaller so that the shadow doesn’t go outside of the frame.

Hi Gleb,

The frames in the enclosed figma file already have “clip content” set on them. We are applying a drop shadow that we want on all the strokes/fills inside the frame, but using “clip content” so the frame itself doesn’t include the shadow.

Also an export of 0.5x an 256w should result in the same output if the frame is 512x512, but that doesn’t happen.

We will try nesting the frame with the drop shadow in another frame with the export. But this seems like a case to streamline. With clipContent on the frame, the frame should be the boundary even if the drop shadow on the icon inside it exceeds the frame boundary.

Oh, since you are using the shadow on the frame it’s considered to be outside of the frame. In my opinion it wouldn’t make much sense if the “clip content” also cut the shadow of the frame itself, would it? You won’t be able to add any kind of shadow to the frame with fill and enabled clip content this way. The frame’s shadow is not its contents’ shadow (hence clip content doesn’t apply to it).

In this specific scenario I would suggest wrapping the contents of the frame into another frame (or wrapping this frame in another one). It’s a perfectly fine thing to do given the effect you want to achieve with the shadow.

Other than that, you can always use a Slice to export something precisely the way it looks on canvas, without any extra frames or worrying about the overflows in the frame.

Hi Gleb,

I wrote a lot of the Figma renderer and exporter, so please run this scenario by the engineers. When you import 600+ svg icons, they come in as frames and so multi select and add shadow/style gets applied to the frame.

Opening each frame, adding a sub-group or sub-frame and adding a shadow to that just isn’t good workflow or consistent. And the drop shadow around the frame is already clipped. You don’t see a big rectangle with a shadow around it, because clip content is enabled. The same should apply to the contents inside the frame even if it has a shadow. This problem will persist as we import new icons.

I think the problem is that you’re putting the effect in the “Parent frame”, not the “Child frame”. Since the parent has no fill, it will pass the effect to the child. I guess that is the reason “clip content” can’t save you (but actually It should help 🙂 ). You can fix it by putting an effect on the “Child”, not “Parent”

Adding this extra group messes up the wireframe rendering. Now we have an ugly group rect for the glow around the icon, and have to drill through the frame and group now to work on the icon. We could use a frame in frame to clean up the wireframe, but the picking issue remains.

There is no sub-child group or sub-frame in the original. We’ve had to add it just to get the export size to work properly. Add trying to add and then multi-select a sub-frame of 600+ icons in the layers panel or from the canvas just isn’t possible. So that isn’t so quick to apply the glow/shadow style.

We regularly have icons that are animated that fall outside the frame, but those aren’t a part of the exported size either. So the shadow shouldn’t count outside the frame either.

Basically the bound should be if frame has clip content, then use the frame rect. Not frame + shadow radius or frame + content + shadow radius. When using a frame to export, one expects that to be the consistent size. That’s the point of the frame is to include the white space. The glow in this case exceeds the frame but is so transparent outside the frame that figma is currently trying to preserve. This only serves to throw off the export size.

Oh, your name sounded familiar, I remember now that you worked at Figma! That’s awesome to meet you!

I don’t work at Figma. This forum is run by the community, so if you want to contact Figma directly you can reach out to support (right bottom corner “?” → Contact Support). However in my view I don’t see this behavior as incorrect.

If I understand correctly, the main problem is that you have too many icons so you can’t wrap them all in extra frames to add drop shadow:

— You can do that with the plugins Frame All or Automater.

The ideal solution I see for this problem is the option to either include drop shadow or export only the frame contents. And turns out this setting exists:

But for some reason it only works for texts, although it does exactly what you need for regular frames. I’d say this should be reported as the lack of the feature/accidental feature/easy to fix bug to Figma support (it’s a bit of everything to be honest). It should be made available to all frames and renamed to “use bounding box” instead of “include bounding box”.

Check this file for example, I just added a text layer (can be hidden) and enabled this setting, now the frame is exported at 512x512 at 1x: https://figma.fun/frVB0G

Oh sorry, I saw you replied a lot about figma here and on Twitter. So thanks for being such a helpful fan.

I posted it to some old colleagues, but one of them has changed emails. I’ll see what they say. Yeah, that “include bounding box” isn’t an export option. We did the group in frame, and I did frame in frame, but both are inellegant. When you drop SVG onto figma, the importer already adds the top-level frame and a ton of groups.

Since Illustrator sadly converts all effects (and gradients/masks) to rasters, we add the glow back to the top-level frame which is easy to multi-select and apply the style. We just don’t want the export size to be incorrect.

“contents only” which is now “ignore overlapping layers” along with “clip content” on the frame was supposed to limit the export.

Just my two cents: I think it would be much better to have a separate setting for this (like with text in my previous message, especially given that it already works, so it should be easy to adapt it to work for any frame, not only with texts) than an obscure combination of “ignore overlapping layers” and “clip content”.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.