Alongside basic sizing of UI objects, you can utilize size modifiers to scale an object proportionally or automatically resize it. You can also insert size constraints to control aspect ratio, or set a minimum and maximum size or text size.
Scale
A UIScale object stores a numerical value that multiplies the AbsoluteSize property of the parent GuiObject. For example, if you want an object to be twice as large as it currently is, you can insert a UIScale object with a Scale property of 2.
This modifier is useful for "zooming in" while designing a detailed user interface in Studio, since it proportionally scales the object and all of its children, including any applied appearance modifiers like UIStroke or UICorner. It's also useful to tween the size of an object, for example to slightly increase the size of a button when a player hovers their mouse over it.
Automatic Sizing
The AutomaticSize property automatically resizes a parent GuiObject to the size of its descendants. You can use this property in a variety of cases, including:
- Allowing users to input text within a TextBox, automatically adjusting its size based on the amount of text entered.
- Automatically adjusting the size of text objects using rich text markup, including font type and size.
You can enable the AutomaticSize property for any GuiObject. By default, it is set to None, but you can change its value to have specific control over which direction(s) the GuiObject resizes to fit its content.
ScrollingFrame uses the AutomaticCanvasSize property instead of AutomaticSize. It behaves the same but resizes the frame's CanvasSize, not its base Size.
To enable automatic sizing:
In the Explorer window, click any GuiObject, such as a Frame, TextBox, or ImageLabel.
In the Properties window, navigate to the AutomaticSize property (AutomaticCanvasSize for ScrollingFrame) and set it to one of the following options:
- X — Resizes content horizontally.
- Y — Resizes content vertically.
- XY — Resizes content both horizontally and vertically.
Once automatic sizing is set, note that other object properties behave as follows:
Similar to the concept of sizing an object, AutomaticSize takes the AnchorPoint property into consideration when resizing content. For example, the following video displays three TextLabels that automatically resize from their anchor point.
- The top label has an AnchorPoint value of (0, 0.5) which anchors it to the middle of the left side.
- The middle label has an AnchorPoint value of (0.5, 0.5) which anchors it to the center.
- The bottom label has an AnchorPoint value of (1, 0.5) which anchors it to the middle of the right side.
Constraints
There are three types of constraints you can use for a user interface object: size, text size, and aspect ratio. To use a constraint, you must set it as a child of the GuiObject you want to constrain.
Size
The UISizeConstraint specifies a minimum and maximum size for a GuiObject. This constraint ensures that the GuiObject doesn't become too small or large on different screen sizes.
For example, if you set the MinSize property to (200, 200) and the MaxSize property to (400, 400), the GuiObject cannot scale smaller than 200×200 pixels or larger than 400×400 pixels.
When a UI object is under control of both a layout structure such as UIListLayout and a UISizeConstraint, the constraint will override the layout and control the object's size.
Text Size
The UITextSizeConstraint specifies a minimum and maximum font size for a GuiObject with text, such as a TextLabel, TextButton, or TextBox. This constraint ensures that the text within a GuiObject doesn't become illegible or too large.
If you enable the TextScaled property of the parent GuiObject, the text size scales with the container's size and respects constraints even if the object becomes smaller or larger than the MinTextSize and MaxTextSize values.
For example, the following TextLabel object has a UITextSizeConstraint with a MinTextSize value of 50 and a MaxTextSize value of 80. Even when the TextLabel becomes smaller, the font never becomes smaller than 50 pixels, and when the object becomes large, the font next exceeds 80 pixels.
Do not use MinTextSize property values lower than 9 or the text will be difficult to read for many viewers.
Aspect Ratio
The UIAspectRatioConstraint enforces a width‑to‑height aspect ratio on a GuiObject regardless of its core size, even if that size is set as a percentage of its parent. For example, inserting this constraint as a child of a Frame and setting the constraint's AspectRatio property to 2 (2:1) keeps the frame's width at twice that of its height. Similarly, setting this constraint's AspectRatio property to 0.5 (0.5:1) keeps the frame's width at half that of its height.
Setting this constraint's AspectRatio to the default of 1 (1:1) is a convenient way to prevent non‑proportional scaling/stretching of an ImageLabel with a square image asset, such as an avatar thumbnail.
When a UI object is under control of both a layout structure such as UIListLayout and a UIAspectRatioConstraint, the constraint will override the layout and control the object's size.