UI Tools: The All-In-One Interface Design Solution

Fixed it:

You can see both are pretty much the same, though you may have to tweak the ‘Resolution’ attribute a bit. This attribute is now a Vector2, representing the original width and height to scale up/down from.

image

The runtime script is automatically updated, but you’ll have to re-scale everything or change the ‘Resolution’ attribute manually for the new version to work properly.

You can also do this now:

I couldn’t reproduce this bug.

It’s in the update.

1 Like

We can’t buy it with robux anymore?

You can’t.

About the bug, more specifically if the viewport size changes (ex: Switching between device emulation) the change of the scale will be saved in history and so when undoing the ui will go back to the previous scale and not match what it’s supposed to be.

Hey, I saw that there is 2 buttons for fast scale now, what’s the difference? which one do I use if I want it to behave like the old 1 fast scale button? Sorry if you already answered this somewhere but I just don’t get it

There are two scaling options now:

  • scaling with relative units (old);
  • scaling with the UIScale instance (new).

From the UIScale’s documentation page:

Use relative unit scaling if you want the old behavior.


UIScale pros:

  • Easy UI modification (nothing about your UI is changed when scaling in terms of properties and modifiers);
  • Works even for UI added after scaling (if it’s a child of the scaled instance);
  • No overhead (only one instance is added, though it requires a script);
  • Works with the automatic sizing feature and scales basically everything (scroll bars, strokes, text, padding, etc.);
  • Should look similar to scaling with relative units.

Cons:

  • Requires a script to work when playtesting or in a live server.

I recommend scaling the entire ScreenGui, but it should also work with GuiObjects.
You can find the start of the conversation about UIScale here.

1 Like

I think it’s more of a Roblox issue, but it can be fixed by re-computing the Scale property every time you undo something (or the property changes on its own if there’s no undo callback). I’ll dedicate some time in the near future to fix this bug.

I just tested this out and oh my god this is huge!! I just put a UIScale in a screengui and the scripts makes everything work with offset. thank you for letting me know this will make editing frames so much easier

1 Like

Any idea why none of the icons get inserted into my studio? Used to make a screengui with them now it doesnt.

It’s probably caused by this setting:

1 Like

Yep fixed Thank you, works good apart from that <3

1 Like

Could you make a feature that can get the highest text size for a textlabel similar to textscaled.? This is so, you can ensure that multiple textlabels have the same text size so it looks consistent and neat. Currently it is a very big headache to do this and doesn’t work half the time. Also is it possible to make another feature of making some text fit when changing the text with a script?

I’m pretty sure it’s just the absolute height of the label divided by the amount of rows your text has.

Both fast scale features already do that for you.

Text scaling with relative units works by enabling TextScaled and adding UIPadding to make sure the text stays the same.

UIScale scaling is really simple; you can have everything in offset (except the frames directly under the ScreenGui, they need to have scaled position and some kind of anchor point to stay in the same place). In other words, you can have constant text sizes and TextScaled disabled.

Is it an issue with the plugin/fast scaling?

You can already do that with the AutomaticSize property. I recommend scaling your UI with UIScale, as it works the best with automatic sizing properties.

In this example, the text is broken into two rows with a newline character:

If you want this to be automatic, enable the TextWrapped property and set the size of the label to what you want the maximal size to be.

Different AutomaticSizing rules produce different results. Here’s AutomaticSizing set to only work on the Y axis:

To add padding, use the Properties widget or the UIPadding instance:

1 Like

I currently use a script to resize multiple textlabels with different text to the same text
size. The text is created by a script so I can’t manually find the value of the text size. So how will I make it so that each textlabel has the same text size.

Did you read this part?

What is this size? Is it the minimal label size (Size) required to fit the text or the size of the text (TextSize) so that it can fit inside a label with static size?

Sorry if my wording wasn’t clear before. I meant the size of the text (TextSize) so that it can fit inside a label with static size

TextScaled already does that, but it seems you don’t like how inconsistent it can be.

If you don’t want the text to be too big, you can constrain it with UITextSizeConstraint.

Before:

image

After (with max text size set to 30):

How would I account for different screen sizes though? Like if the screen size changes wouldn’t it look big?

Both scaling options work with this setup.

Scaling with relative units:

UIScale scaling:

Scale the ScreenGui with UIScale because your text is not static.

There’s one problem, though:

1080p

4K

UIScale doesn’t work with UITextSizeConstraints.

This is not the intended behavior. There’s also an abandoned bug report regarding this issue from 4 years ago.

The only workaround is to multiply the values of UITextSizeConstraint instances by the scaling factor with a script.


I just added this to the plugin.

It only works when running the game because changing UITextSizeConstraint properties during editing is not a good idea.

Here’s 4K resolution with the new update:

1 Like


The plugin keeps updating my UIScale scale and resolution automatically when I have it enabled which is very annoying since is keeps setting my scale to 0.999 therefore removing 1 pixel from each ui object

In the new update, it started setting the scale to 0

Am I doing something wrong? Here are my settings:
image