Hey everyone! So I am working on updating feature_section28 on my site (where you click on a tab and a new photo appears), and no matter what size I export my photo/whether or not I try to internally update the size, it keeps showing some sort of whitespace on every photo. This is only happening in this section, so I'm wondering if there is a way to fix this?
It actually isn't! I have these exported from Figma, cropped down and put them on a colored background to ensure there was no white space while exporting.
I am afraid but I still think it's part of the image, somehow while exporting something is going wrong
this might be not perfect, but I am sharing this for just test so we can confirm it is not webflow, but something going wrong with figma export
Cool. so when you are exporting, the images are exported with that white color border so you can remove it in figma and export it again
That's where I'm confused. I'm going in and I'm not seeing a white boarder, there is no stroke, and I check before exporting and it doesn't show a single issue until I place it in Webflow
Real quick ! How did you get that image cropped? Did you use something other than Figma?
But I will not recommend you to do that, Rather use any online tool for cropping so you can still maintain the image quality
Oh no I know. I'm using my adobe suite to do it now but I'm still having the same issue. Idk what's going on. It's like I can only put full size imagery in here, but then it won't let me re-size the box.
in the export preview, do you see any extra white space or borders or anything? The preview is usually your best spot to look for what is going to actually get exported from Figma.
The other thing to ask - how are the images placed in Figma? I have noticed some issues with frames and background image fills and other things like that exporting in odd ways.
You could try drawing a rectangle around the image, maybe coming in 1 pixel in width and 1 pixel in height and using masking and exporting that group together and maybe it wont have that odd export.
Hey Matt! So in the preview I don't see any white borders or anything, and I removed the images from frames and cropped them to size based on the mockups for reference. I'm having the same issue when I use Adobe Illustrator as well to export my images, and the issue only occurs with a JPEG. I'm incredibly lost
it could be as simple as the images being off by one pixel - somehow Figma or Adobe are fixing the issue in render of their app but on export its still actually there, hard to say.
The images are coming from Unsplash directly and I am using the image fill originally within the mockup, using the image option and cropping it from there. So usually it’s in a rectangle first. I am guessing I should try to crop the full image directly placed into Figma?
Jumping in to see if I can help... What are the dimensions of the image that you're exporting in Figma? Could it be that you've sized the image at a half or percentage of a pixel and not a full pixel?
Hey Dillon! That is something I’ve checked too unless I’m misunderstanding what that means. I’ve ensured that nothing is sized at a decimal point. Is there another way to check this?
Yeah that shouldn't be the issue then if the frame is 600x700. Just throwing it out there but I wonder if it needs to be exported at 2x though? When I look at your About page I can see some bordering happening to the hero photo but when I download the image it's not in the image. The image frame on the website is sized at around 960x960 on my screen yet the photo is only 721x706 so it's being enlarged to accommodate the space but only has a resolution of 72dpi. I would try exporting the photos at 2x (making them 144dpi) and keeping the dimensions and see if that eliminates the unexpected bordering.
