Hi guys, I am working on a desktop prototype which is 1440x1024px. When I click on present or share, the image quality seems to be reduced. The text and other elements are not as crisp as they appear in my sketch file. Is there perhaps a workaround for this so the images Framer pulls from the sketch file are of a much higher quality? Thanks guys! Appreciate your support.

Darvinder Singh Kochhar

Posted Jan 09 - Read on Facebook

Hi guys,

I am working on a desktop prototype which is 1440x1024px. When I click on present or share, the image quality seems to be reduced. The text and other elements are not as crisp as they appear in my sketch file.

Is there perhaps a workaround for this so the images Framer pulls from the sketch file are of a much higher quality?

Thanks guys! Appreciate your support.

14 Comments

Marc Krenn

Framer Studio imports pixel-perfect assets from Sketch, so those imported assets should appear as crisp as they were back in Sketch. Maybe one of the following will fix this for you:

1. When viewing your prototype in Framer Studio, make sure to set the zoom level to '100%'. 'Fit' will downscale your prototype if your physical screen is smaller than your Framer.Device, making it, among other things, appear more blurry.

2. If you preview your prototype in Chrome, make sure to hit 'CMD + +' and 'CMD + -' to get rid of the blurriness (this seems to be a bug)

3. You could also try the 'supersampling'-method by importing @2x-assets and then setting:

Framer.Device.setContentScale(0.5, false)

Darvinder Singh Kochhar

Yes! I tried #3 and it did the trick. So weird this was happening. You're the best, Marc :)

Darvinder Singh Kochhar

before:

Darvinder Singh Kochhar

After

Darvinder Singh Kochhar

Hey Marc, any possibility of this making the file too heavy for the browser/system? One of the animations seem to be lagging/weird. I checked the whole code twice and restarted my mac and that hitch in that animation (which was super smooth before) is still there.

Marc Krenn

No, that shouldn't be the case. Can you share the file with us?

Randi Dumaguet

Hi Darvinder, do you have a retina-display screen? I get the same issue, the bluriness. So I always use @2x sized assets.

Darvinder Singh Kochhar

Marc, this is really weird. I moved around a few layers in the main sketch file and it seems to be working fine now.

Randi, yes I have a retina display. Maybe that's why we have these issues. Now everything looks really crisp as it should.

Marc Krenn

Great :)

Casey Callow

Been trying to figure this out for a couple days. #3 fixed it! Thanks so much Marc

Luca Galvani

Darvinder Singh Kochhar I also have problems with choppy animations, tested on different MBP, I don't know what is causing the bug, but it is really annoying, I can't see correctly most of the animations... I reported the bug and they confirmed it, but no news... maybe Koen Bok or Jonas Treub can help us out... I have to finish a big desktop prototype before February and I'm starting to panic :(

Justin Smith

Is method #3 possible with Photoshop instead of Sketch?

Marc Krenn

Koen, Jorn this seems to be a widespread problem.

Koen Bok

So image scaling relies on a ton of things. The most common issues for blurry looking assets are:

- Using 1x on retina displays (I still see this a lot).
- Scaling beyond the width/height of an image, thus interpolating it.
- Pixel offsets. Remember this is due to the resulting position, accounting for any super layers too.
- Specific scale levels interpolate less nice. You can arbitrarily run into these with scale to fit.

Read the entire post on Facebook