Exported video in bad quality with all formats

[jagbdot]

macOS Big Sur 11.6.5
Principle 6.18

I’m importing a 2x file from Figma and exporting a video in proRes 1080h and the quality is still really poor. I’ve tried all formats and even 3x with the same result. Any guidance, please? The only way you see the file as you saw it on the screen is with the .html shared version.

[Daniel]

1. Could you please share the .prd file that you’re having issue with? If you’re not able to share the original file, please delete all except the necessary layers to reproduce the bug, and feel free to tweak the remaining layers to not resemble the original file. Just double check that the file still has the issue.

2. Please include steps for how to reproduce the issue. like what artboard it appears on, what the export settings are, etc. the more detailed, the better.

3. Just so I’m sure I know what you’re talking about, could you also post images of the poor quality that you’re referring to?

[jagbdot]

Sure, I made a quick example to showcase you the issue (this happens to me with all projects).

STEPS:

1. Artboard Size from Figma
   

2. Importing 2x (my screen is retina display so i followed your advice)
   

   

3. Preview from principle
   

   

4. Recording video and format selection
   
   

5. Quicktime view end result (By poor quality I mean this amount of blur happening, it doesn’t matter which format i chose i get the same result with a slight variation)
   

   

6. Compared with the .HTML shared version, which is the only way you’ll see what you would expect.
   

   
   
   Principle

Here’s the example (.prd):
post2.prd (3.5 MB)

Thanks for the quick answer Daniel

[Daniel]

Couple things:

1. Your artboard and layer sizes in figma should not have fractional parts (2138.46 should be 2138). Fractional layer sizes will always result in blurry pixels
2. downscaling a large document to a video with height 1080 will make the contents appear less sharp because you’re squeezing the large image into a small image.
3. Quicktime player will show the video larger than it actually is, which will make it look blurry. In quicktime Player you can go to Window->Show Movie inspector and that will show you both the video’s internal dimensions, as well as the dimensions it’s currently being displayed at. Resize the video window down until the “current size” matches the “resolution” - that way you’ll be seeing the actual data of the video and not a scaled up version of the video.
4. 1526 is really tall - bigger than most screens. I’d design your Figma documents at a reasonable size so they don’t have to be downscaled later.