Hello there, I am relatively new to User Interface creation and design and have been encountering problems importing UI into Roblox and getting it to look and scale the same.
I’ve created a set of UI for the game using Figma and I’m relatively happy with how it’s turned out, however trying to export it into Roblox has been a nightmare.
I have tried using the Figma to Roblox plugin ( Figma to Roblox (Beta) - Resources / Community Resources - Developer Forum | Roblox) but it consistently has issues with the UI elements separating weirdly.
I’ve also tried exporting things manually from Figma to Roblox by exporting the objects one by one and setting the position/size to the same as in there, however when doing this it doesn’t look remotely the same on mobile as on PC.
I’ve been using the UI Tools plugin (UI Tools: The All-In-One Interface Design Solution - Resources / Community Resources - Developer Forum | Roblox) and its auto-scaling features to try and get this to work but have still been having problems.
The first image shows one of the UIs I’m trying to export from Roblox to Figma:
The second image shows what I’ve managed to get like this in Roblox (pixelated and not great but… works?):
The third image shows what happens when the screen size is changed:
As you can see, the text scaling changes the look of the UI and it creates massive gaps between certain UI elements.
I’ve looked around on the DevForum and have gone through many articles but haven’t found anything that addresses this so I’m at my wit’s end.
Thanks in advance if anyone knows what I can do to sort this.