Easy GUI Method

I know an easy way to make UIs in Studio as simple as drag and drop.

Step 1

Tweening Frame

Create a Frame. Set its size to {1, 0}, {1, 0}. Make it invisible using BackgroundTransparency. Optionally set AnchorPoint and Position to center the frame. This is useful for tweening UI later.

Step 2

Holding Aspect Ratio

Create another frame. Position it as desired, likely in the center of the screen. Set its SizeConstraint to Yy. Then play with the Size value 'till it's just right. Make the frame invisible or style it as a window.

Step 3

Designing a UI

It's time to make the UI! First, when adding new objects, set their Size to a dummy value like {0.1, 0}, {0.1, 0}. Then, you can freely drag it around. Occasionally change Size manually, like for things that completely cover an axis. Make sure all text has TextScaled set to true, so it scales properly.
5 Likes

Don’t forget about RichText! it makes sure that it fits the exact size of the text