Hello! I’m a UI designer and I make my designs with Figma. I’ve been having issues when importing UI from Figma into Studio.
On Figma:
In Studio:
Does anyone know how to fix the blurriness when importing? I haven’t been able to find any solutions to my problem. Thank you for the help!
What I found was that Roblox’s full image resolution is 1024x1024. Any picture that is bigger will give it a lower quality. As a result, the picture becomes blurry.
What should I do to fix this? Export in smaller pieces and import like that?
Yea, try importing the UI in multiple pieces.
Is there any other way to fix this? It’s a pain to have to cut one image into 4-6 pieces every time I want to import something from an external website.
I’ve watched videos on people importing UI from external programs without having to cut it up into pieces, but when I try to do exactly what they do, it doesn’t work. Here’s an example. How To IMPORT GUI Into ROBLOX STUDIO TUTORIAL! | Roblox Visuals Tutorial - YouTube
This isn’t really a solution but more of a work-around to this problem. I’m sure there could be another solution to this. Before I upload my images onto the screen GUI, I close all the windows apart from “Properties”, “Explorer” and “Toolbox”. They will be moved outside of studio. I also turn off the top bar by pressing the up arrow on the top of the software (or pressing Control F1). I usually do this so that I can convert the size and positon to scale properly once I finish.
I then add the images and then sizing & positioning them according to the values I’ve selected from the software (Figma). After that, on the properties tab, I changed the ScaleType to “Fit”. Although the quality may still not be the best, it somewhat looks a bit nicer than using the “Stretch” option.
This is the final image I made with the “Fit” option applied:
