How to Scale Gui

:wave: Introduction

Hey there! In this tutorial, I will demonstrate a good way to scale GUI’s on all devices. If you have created GUI’s before, you may have encountered issues with the scaling. That’s why i have created this tutorial!

:scroll: 1st step

In the properties tab, find the size property in your gui element.
Click the expand arrow on the size properties “x” and “y”.
Now you will see the inside properties “Scale” and “Offset”. Set both the offset properties
to 0. We don’t want any offset in our Gui’s.
Now the gui element will appear very small. Click the little dot and hold and drag the dot to the size you want the gui element to be.

This is the size I’m going with.

:scroll: 2nd step

In the properties tab, find the “AnchorPoint” property. Click the arrow down, and change these
two values to 0.5.

:scroll: Last step

Now in the explorer tab, in your gui element, click the plus symbol and insert a “UIAspectRatioConstraint.” Change the “AspectRatio” property to whatever you want the frame
to look like on all devices.


:grinning: Final Result:

:wave: Ending

I hope this tutorial was useful! This was actually my first one so let me know what i can improve in the next one :).


This doesn’t always work, this will at times have issues simulating on other devices… especially if it has a different position besides the center of the screen.

This is an alternative way, and for me… a much more consistent way to scale GUIs.

1 Like

Yeah, unfortunately this method doesn’t always work. I’ll have to try this one, thanks for that!

1 Like

or you can do what i do and use this plugin that does all of that with the click of a button, and yes it always works

still cool tutorial though it helps people understand it better