Importing High-Resolution UIs from Figma to Roblox Studio

What do you want to achieve? I want to learn how to import UI designs from Figma to Roblox Studio while maintaining high resolution and quality. Currently, when I export with 4x resolution from Figma, the imported UI in Roblox Studio appears pixelated and of low quality, which is not what I desire.

What is the issue? Whenever I import UI designs from Figma to Roblox Studio using 4x resolution during export, the resulting UI elements look pixelated and have poor visual quality. This is not the outcome I expect and want to find a solution to ensure high-resolution imports.

What solutions have you tried so far? I have attempted exporting from Figma with 4x resolution, but that has not produced the desired outcome in Roblox Studio. I also checked the Creator Documentation website for possible solutions, but I couldn’t find any specific guidelines related to importing UIs from Figma with high resolution.

Additional Details:

  • The UI designs in Figma are created at a high resolution, and I want to maintain that quality in Roblox Studio.
  • I’ve tried various export settings from Figma, including PNG and JPG formats, but the issue persists.
  • I wonder if there are any specific settings or techniques to use during the import process in Roblox Studio to ensure high-quality UI designs.

I would greatly appreciate any help or suggestions on how to properly import UIs from Figma to Roblox Studio with high resolution. Screenshots of the UI in Figma and the pixelated result in Roblox Studio are available if needed for further context. Thank you!

The maximum resolution of a Roblox image is 1024x1024, you cannot get around this. Try uploading with multiple images, using 9 slices, etc. You can also try recreating your ui in Roblox if it is easy enough.

1 Like

You can use the 512h one when exporting it.

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.