You can write your topic however you want, but you need to answer these questions:
What do you want to achieve? Keep it simple and clear!
I want to make a nice and fluid GUI, after trying to make a few complex ones in studio, I really started to struggle to figure out how other games make such nice ones.
What is the issue? Include screenshots / videos if possible!
My gui knowledge sucks
What solutions have you tried so far? Did you look for solutions on the Developer Hub?
I tried looking up GUI alternatives and even tools are available, but I have no idea what is best.
Any help from GUI makers would be much appreciated. Should I just buy GUI plugin maker or try a third party outside studio?
2024 edit:
For anyone who reading this post now, Working with Pixlr, UI padding and learning a lot more of the UI I was able to fix this. There were some things I didn’t know existited and after watching a lot of YT on pixlr and how they make things work in studio such as scaling, and padding, I learned a few tricks.
Hey there, I’ve been designing for quite a bit now and I’m glad you’re interested in getting into GUI.
To start off, I would begin by getting used to the baseline studio features and its functionality. That includes how to create a frame, color it, add a gradient, etc. These are things you may need to use a lot if you’re making GUI’s. These can be found with some videos online.
Now, for more complex guis like most known-games have, they are made using separate platforms and imported into Roblox studio through image labels. The programs/platforms these are created on are different, but starting off I definitely recommend Figma, it’s free and a great place to start. Other programs can be things like photoshop. These programs allow us to have more features that allow us to go into greater detail and theme with Uis, which is how most games create complex, unique-shaped designs that stand out from most.
If you want to create in studio, you can use drag and drop, as long as you do it right. Basically set size to a dummy value using scale before you drag the element’s size. So just make a frame, set it to scale, add a size constraint, and then just drag and drop other uis inside the frame.
On top of all of the other responses, you should learn to scale your UI properly. Mostly, to scale properly so your UI looks correct on all devices: Use scale for Position and Size, Use 0.5, 0.5 for your anchor point so your UI scales from the middle, and using UIPadding to your advantage.
I recently ran into a problem with UI scaling, I want 6 rows, 3 for stat labels, and 3 with the actual stats.
With a total of 25 rows, much like a character sheet. I noticed there is no way to set them between evenly. Even if I use a UIlist or align them to the left or right you can’t get them perfect on the box. Also it seems hard to scale, if I say I want 6 rows and 10 colums going left to right, the game can’t do that. 100/6 = 16.66… so what do you do? I eventually went for a .18 approach and later realized it won’t line up… it seems studio is good but has a limitation if you want to have what I call an “open” field of text buttons. I truely have zero idea how you could make a smooth GUI with this. Also the UI…constraints are very fighting inducing as I tested every single GUI “UI…” and none of them helped line up 6 colums and rows. Now I did notice the table was was interesting but weird things are happening. Here is a screen shot and yes, I know it is ugly but I am just messing around.
Here it is with grid, it looks nice on paper, but some reason you have spaces, and I can’t put decimals in a grid, it always goes to the next whole number. I am sure someone here has been familiar with this and can help me. This is it with grid seperated into 1 group of labels, and another with text images for the background of the text label.
Try out making another post so more people can see this, but I don’t know why decimals round up. Also why would you use multiple ImageLabels? Just put the background transparency for the TextLabel to 1?
Impossible, this gui will have many layers, and a 3d model to a 2d model rotating, I want it to have many complex features. Imagine what a real character sheet will look like with a model of the character. Also I want different parts of the gui to have different huis meaning I want what would be strength to be red, int to be yellow, luck to be green, or dex to be blue. Behind those I want them to be different symbols. It would look weird if I just used the same image label for the entire GUI infact I think that would look ugly. I think it takes some more fine tuning. Also I have no idea why decimals round up on UIGrid, it will not let me put in .15 or .16 or .1666666. This means I can’t make the GUI 100% even. Which just makes me upset as it is so notceable it hurts. But I think I will not use UIGrid, or list or any of them. They all seem to think they help when they really don’t. Unless I make a leaderboard like on a wall, or notifcations they honestly not looking like a good option which makes me want to start looking at 3rd party apps.
2024 edit:
For anyone who reading this post now, Working with Pixlr, UI padding and learning a lot more of the UI I was able to fix this. There were some things I didn’t know existited and after watching a lot of YT on pixlr and how they make things work in studio such as scaling, and padding, I learned a few tricks.
