I'm using UI layouts/constraints and scale instead of offset, but my UI still looks off on other devices. How do I fix this?

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve?
    I want my UI to look the same on all devices.

  2. What is the issue? I’m using everything that should be making it consistent but It’s still not.


In Studio


HD 1080


VGA


iPhone 14 Pro

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    Yes. It didn’t help. All of my UI uses scale and not offset, and I’m using things like padding, so I’m not sure what’s wrong (I’m pretty new to UI design).


Here’s the UI.

1 Like

Set the MinTextSize in the UITextSizeConstraint to 1

There is a very useful plugin for this exact reason, I’d recommend you to use it.

AutoScale Lite - Creator Store (roblox.com)

How to use it?

  • Select all the UI Elements that you want to fix.
  • Click on the plugin.
  • Select Unit Conversion.
  • Click on Scale in both Position and Size categories.
    This will fit the UI on all types of devices.

Additionally, you can insert a UIAsceptRatioConstraint through the use of this plugin:

  • Click on the Plugin.
  • Click on Add Constraint.

How is this different from inserting it through roblox?

If you insert it through the “+” option, it will change your UI Element Size to a square, but using the plugin, the size of your UI Element will remain the same, meaning that it will have the same dimensions.

UIStroke is using Offset. TextScaled is scaling into maximum size. BorderColor also. You should use UIPadding for text.

image

2 Likes

UIStroke is using Offset. TextScaled is scaling into maximum size. BorderColor also. You should use UIPadding for text.

Could you please elaborate more?

  • I don’t see any Offset option on UIStroke
  • How should I be scaling the text, then?
  • What does “scaling into maximum size” even mean?

Inserting objects through studio itself, and inserting objects through the plugin, affect the outcome differently.