You’re both right.
What @CriticalDucky is saying is that it is wrong to use only scale, since offset is more appropriate in many cases. What you are saying is that using only offset makes it difficult to correctly size and position things. These are both true.
That’s because both offset and scale should be used together to design UI. Sometimes offset will be more appropriate, while sometimes scale will be more appropriate. In general, scale should be used when you want things sized/positioned relative to the size of the screen (such as when centering menus) while offset should be used when you want things to look the same size to the user, without looking too large on big screens and too small on small screens (such as buttons, margins, and text).
In your example when you were making some UI for an employer, you actually did the right thing: you used scale and offset together. The fact is, some screens (like monitors) are larger than others (like phones). You obviously want your UI to fit the screen, and if you have a larger screen, it’s natural to want to take advantage of that to make the UI larger; though of course making it too large will be overwhelming to the user. You used scale to make the menu change size based on the screen, but you used offset in the size constraint to limit that size if it gets too big.
Just to nitpick, I would make a couple of tweaks to that menu sizing. I would use offset in conjunction with scale for the sizing to make the margins stay the same size on all screen sizes, assuming the UI is not too big.
If I understood your example correctly, this is likely very similar to the example you gave. The UI increases in size with the screen but stops growing if it gets too big.
The difference here is that the margins do not change size with the screen (that is until the screen gets too large). The way I do this is by using scale and offset together. In the above frame, the anchor point is 0.5, 0.5 and the position is {0.5, 0},{0.5, 0}, which ensures it is centered. The size is {1, -150},{1, -20}. The 1s are scale and make the UI’s size based on the screen size. However, notice the negative offset. This decreases the size of the UI (creating margins) that are a fixed size. Of course, the UI stops growing at a certain size because I have added a size constraint, as you did.
Let me now address your original post.
Since you want the frame to be positioned on the bottom right of the screen, you will use scale for that. But since you want the margin between the frame and the screen’s edge to be a fixed size regardless of screen size, you want to use offset for that. Here’s what you’re looking for:
Here’s what’s going on here: the anchor point is 1, 1 and the position is {1, -20},{1, -20} The anchor point and the 1s in scale ensure that the frame is aligned to the bottom right of the screen; however, the -20 offsets subtract a set distance from the position to create a 20 pixel* margin. (*It’s typically okay to refer to these as pixels even though they may not always correspond to actual pixels.)
As you can see, it is very helpful to use both scale and offset when designing UI. In your case, you neither want to use only scale nor only offset; you need both. Though offset can be frustrating, it is very useful when used correctly, and it is the best choice here.
Of course, you want to make sure that what you have looks good on mobile, since it has the smallest screen and is the hardest to use, so you want to make sure your UI is easy to use there. If you designed the UI right, it should scale up nicely to larger monitors. Of course, the actual physical size of offset may change because of DPI and such, but you should assume that such differences make sure your UI looks good on devices of different sizes (e.g. a set amount of offset will look larger on a TV but smaller on a phone).
Finally, I just want to add that you don’t have to worry about whether your DPI settings are correct. If your device looks fine, then simply designing your UI to look good on that device will automatically be a good size with your settings. Offset will then be sized correctly on other devices. The only concern with changing screen sizes and such is whether or not your UI was designed to look good on other sizes. (A classic example of failing to take into account other screen sizes is if someone centers a frame with offset. It will no longer be centered once you resize the screen.) It is important when designing UI to take into account how the UI’s appearance will change when the screen size changes (as you did when you made the menu use scale but used a size constraint to make the UI not be overwhelming for large screens). However, so long as you are designing your UI mobile first (as I mentioned before), you generally shouldn’t have to worry too much about text or buttons that use offset being too small or too large on other devices.
If you want the place file with my examples, here it is.
ScaleVsOffset.rbxl (40.9 KB)
If you have any other questions, let me know!
