How would I make this UI?

[Frowning_Loser606]

You can write your topic however you want, but you need to answer these questions:

1. What do you want to achieve? Keep it simple and clear!
   I want to make a settings feature (where the button is to toggle it and the two text labels are used to describe the setting name and what it does, but the layout seems messed up.
2. What is the issue? Include screenshots / videos if possible!
   The layout is WAY too big.
3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
   I don’t know; I’ve tried to resize it (buggy and inconsistent) and adjust size in settings.

(No code involved here.)

[Frowning_Loser606]

Intended behavior: The box should be about the same size as the two text labels.

[BonesIsUseless (Bones)]

@Frowning_Loser606

Intended behavior: The box should be about the same size as the two text labels

i’m still not exactly sure how you want your ui, but i think the issue is how you’re displaying descriptions and text size

most settings should be self explanatory, so you should just remove descriptions.
if you really want them, you could use a frame to hold the setting name (0.65), and setting description (0.35)

SettingLabels holds the description and setting name
AnchorPoint: 1, 0.5
Position: {1, 0},{0.5, 0}
Size: {1, -120},{0, 100}

SettingName is the setting name (should take more space than the setting description)
AnchorPoint: 0, 0
Position: {0, 0},{0, 0}
Size: {1, 0},{0.65, 0}

SettingDescription is the setting description (should take less space than the setting name)
AnchorPoint: 0, 1
Position: {0, 0},{1, 0}
Size: {1, 0},{0.35, 0}

Interaction is the toggle button (i’m guessing it’s a TextButton with Fredoka One font)
AnchorPoint: 0, 0.5
Position: {0, 0},{0.5, 0}
Size: {0, 100},{0, 100}

also if you read the text from left to right, you’d need to look back to the left to press the button
so i’d suggest moving the toggle button on the opposite side and making both the name and button smaller.

sorry for taking a while to reply i was getting some food

[Frowning_Loser606]

Thanks a lot! I’ll try this out and see what results I get.
Also the first image is EXACTLY what I want.

[Frowning_Loser606]

Two things I forgot to ask yesterday while implementing it:

1. Do I remove the UI List Layout? No settings were changed on it, EXCEPT for Wraps being turned on and FillOrder being changed to Horizontal.
2. Do I need to modify the UI Padding in any way?
3. Cool Anchor Point feature, I didn’t know about it until now lol.

[Frowning_Loser606]

What it looks like after:
In the end, I kept the First picture’s layout to keep it similar to the game I’m re-programming (for context on what I mean I’m basically 1:1 re-programming another game from scratch as a way to practice programming and such).
Thanks for the help!

[BonesIsUseless (Bones)]

@Frowning_Loser606

Do I remove the UI List Layout? No settings were changed on it, EXCEPT for Wraps being turned on and FillOrder being changed to Horizontal.

the properties for UIListLayout is up to you. using Horizontal FillDirection with Wraps is probably the best way to use the whole ScrollingFrame in your case

@Frowning_Loser606

Do I need to modify the UI Padding in any way?

UIPadding is just to give the elements space from the edges

no padding:

with 20px padding:

UIPadding should be in the ScrollingFrame rather than the setting frames shown in my examples