How does UDim2 work?

UDim2 is a way to refer to a point inside of a rectangular space (like the screen or the inside of a GUI)

It is made of two independent UDims.

A UDim value has two components. Scale, and Offset.

Scale refers to a percentage across the box.

[Use as position] In a Screen GUI, a Scale of 0.5 refers to the middle of the screen (since it is 50% across); likewise, a 0 is the far left (for X) or the far top (for Y) and 1 is the far right (for X) or the bottom (for Y).

[Use as size] A Scale of 0.5 in size would fill half of the area horizontally (X) or vertically (Y).

Offset is a value in pixels. You add this amount to the above scaled amount. So, for example, to be 32 pixels to the right of the middle of the screen, you would use (0.5, 32)

Positioning & sizing things primarily with offset is wrong since it will be spaced poorly on differently sized monitors / devices.

The overall constructor for a UDim2 value is this:

UDim2.new(XScale, XOffset, YScale, YOffset)