How do I fit UI in every device

[buddyjip]

So basically I’ve been trying to fit every device. If I searched it up it mostly gives plugins or setting the offset to 0 and scale manually. But it seems to not work very well. Is there anyway so GUI can be the same on every device, but bigger or smaller?

Extra: Whenever I test it on a device it just crops up all of the UI. I want it to become smaller and still visible.

[flawedev]

There is a handy Roblox plugin for converting Offset to Scale that should help with your problem.

Creator Hub - Marketplace

[Evercyan (Cyan)]

I get it at my preferred size on 1080p, then use a UISizeConstraint to add a minimum size, so things don’t appear too small on mobile. Usually, unless if your interface is super simple, you can’t completely avoid scripting (as you may want to make some changes for console so it appears clear from 10ft), but I still prefer relying on the engine to do most of my scaling if possible.

Unfortunately, AutomaticSize & AutomaticCanvasSize are still pretty buggy and don’t consistently work for a frame’s contents, so sometimes I do have to use scripts. I don’t use any plugins for my interfaces and instead enter the numbers manually for more precise scaling (as I often mix offset & scale), but I hear those Offset => Scale ones are quite popular as @flawedev suggests.

[S_undown]

The best way to do it is to avoid using a plugin to automatically convert everything - it’s best to hand-convert everything over, relying on Scale and layout elements to do the heavy lifting for you.

First of all, if you want to quickly test how your UI looks on devices, head over to the “Test” tab in Studio, and click the “Device” button. I’m sure you already know about this, but you can use this to get a general idea on how your UI will look on a device. You can also use it to preview smaller/larger resolutions than your display supports.

With that out of the way-

• Start by converting everything to Scale manually. Make a duplicate of your GUI to reference as you start making things based on Scale.
  • Set the AnchorPoint of a GUI based on the spot you want Roblox to automatically scale it around.
  • Use a UIAspectRatioConstraint on the topmost element to make sure something doesn’t get squished on screens that don’t follow a 16:9 aspect ratio (see: older CRT monitors that use 4:3 aspect ratios, early flatscreens that use 16:10, tablets, modern smartphones using 2:1 ratios…)
• Use GUI style and layout elements to automate away most of the hard work.
  • Use UIGridLayout, UIListLayout, etc. to quickly fill out GUIs in a logical manner. They also make controller navigation a lot simpler.
  • Don’t be afraid to make invisible frames whose entire purpose is to be a container for multiple other elements that need to be laid out in a certain way.
  • Use UIPadding to automatically add whitespace to the edges of GUI elements instead of directly decreasing Size and manually adjusting positioning.
    • Be careful, AutomaticSize tends to misbehave with UIPadding.
• While working on scaled GUIs, remember to use semi-transparent backgrounds so you can see the actual size of a frame. Make sure to set the background to an obnoxious color so you don’t just end up with a sea of translucent white squares.

Quite simply, a lot of this is going to be a lot of hard, manual work. You’ll probably have to redesign your GUI’s structure quite a bit under the hood. Start at a standard resolution (I prefer 1280x720 or 1366x768, as this is the lowest common denominator,) then use the device emulator to see how it looks on mobile devices or at larger/smaller resolutions.