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

Added it as an experimental feature in the latest update. Do note that with UIScale you need to use anchor points to keep the UI in the same place. The plugin has an anchor editor for that.

Scrolling frame with AutomaticCanvasSize:

The UIScale instance has some attributes you can edit:

image

Seems like it works kinda, something doesn’t quit work well in some cases (either because there’s a aspect ratio constraint or because everything uses scale for size). If the problem is caused by my gui using scale, then it should automatically convert all size of descendants to offset. Also I’m a bit dissapointed in the property window. I was hoping it could remplace the default property window by getting rid of junk/old ui properties and also directly displaying properties of all constraints inside of it (ex: UIStroke etc). I might be asking too much but it would be lovely.

It’s only an issue when the container frame (has a ScreenGui as its parent) uses scale.

I disagree on your take about converting everything to offset. If your UI is static (no resizing happens during runtime), then it’s probably fine, but it’s different if you want some inner elements to be relative.

Suppose you have this kind of setup:

If you want to add a size animation to the outer frame, the two inner frames must use scale.
There’s surely a better example, but I hope you get what I mean.

You can see the properties widget in the thumbnails, but that’s just an excuse. I’m aware that the entire properties widget is a disappointment (except the fast scale features), and I’d rather rewrite the entire plugin than redesign and rewrite the widget.

Rewriting the plugin has been on my mind for quite a while. I don’t like the way it’s coded and never want to touch the interface again (it’s created separately and is a nightmare to manage because of the lack of components).

Do I plan on doing it? I want to, but it’s not a small project and I can only dedicate it so much time for now.

Feature-wise, the plugin is not that large and rewriting should be faster because I’m going to use Fusion as the UI framework. I’ll post an update here if there’s any progress.

Well then a quick fix to automatically convert the parent to offset would be great. Also seems like the undo/redo are a bit weird and restore the wrong size so you might need to look into that.

Apart from that thank you for actually adding this feature in!

1 Like

Hi again. I’ve noticed a pretty big issue with the UIScale feature. It only seems to take in account the height of the screen as opposed to both (like UIAspectRatio + Scale would do). This has caused some of my UI to either completly go off screen or hide other elements on devices with more squared screens.

Would it be possible to get this fixed ASAP? Thanks!

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?