figma pixelated image
Design

Why is my Figma image pixelated?

As a UX/UI designer I use Figma everyday for all kinds of stuff, and I love it, I might write a review on it in the future. But there has been one issue that I have had a couple times, and I have now found out what was going on and how to fix it.

 

Problem:

Sometimes you need to take screenshot of existing websites or flow when designing something new, for quick reference or just as inspiration. What can sometimes happen is you have a nice crisp image, place it in Figma and it shrinks it, when you scale it up to its actual size it pixelates it… why?

 

Why?

Figma has a build in size limit for images of 4000 pixels, so any image larger in either height or width will be down scaled to fit… In a bad way.

 

Solution:

To get around this you can either make your image smaller but that much not work too well. Or, and this is what I do: Crop the image into parts, so top, middle and bottom. Then you easily place them back into Figma all nice a crisp. And simply join the image back together.

 

Problem, Solved!

Luke Dowding
I’m a UX/UI Designer & Web Developer from the UK. I’m Vegan, love Cycling, Running, Gaming and F1. Aka: Roamy
September 19, 2017