[ Open Sourced ] Clean Template UI

Open Sourced Clean Template UI


Hello! Im XQII46 i made an Template UI!
This is my first time for making this :smiley:

Sorry, Im not scripter so the scripts is from toolbox :slightly_smiling_face:


:tada: Sample Screenshots

Main Buttons

image

Gif sample (In-game):
buttons

(ignore the resolution)

Main Frame

Credits Frame
You can change it to your own credits.
image

Inventory Frame
image

Map Voting Frame

Shop Frame
image

(This is not in-game view)
(Ignore the resolution)

:sparkles: Features

  • Clean design gradient UI
  • 5 Free template frames with buttons
  • Easy to Use
  • Drop Shadows
  • Open-Sourced

:file_folder: Download: Here
:computer: Uncopylocked Game: Here
You can change the UI appearance with your own game theme.


The scripts that I use

:page_facing_up: Button Rotation Effect Code

script.Parent.MouseEnter:Connect(function()
	for i = 0,-5,-5 do 
		wait()
		script.Parent.Rotation = i
	end
end)

script.Parent.MouseLeave:Connect(function()
	for i = -5,0,5 do
		wait()
		script.Parent.Rotation = i
	end
end)

:page_facing_up: Button Hover Effect Code

script.Parent.MouseEnter:Connect(function()
	script.Parent:TweenSize(UDim2.new(0.093, 0,0.068, 0),"Out","Quart",.5,true) -- Mouse Enter
end)

script.Parent.MouseLeave:Connect(function()
	script.Parent:TweenSize(UDim2.new(0.107, 0,0.079, 0),"Out","Quart",.5,true) -- Mouse Leave
end)

:page_facing_up: Button Open Code

local b = script.Parent

b.MouseButton1Click:Connect(function()
	script.Parent.Parent.MainFrame:TweenPosition(UDim2.new(0.5, 0,0.5, 0), "Out", "Elastic", 1)
end)

:page_facing_up: Close Button Code

local b = script.Parent

b.MouseButton1Click:Connect(function()
	script.Parent.Parent:TweenPosition(UDim2.new(0.5, 0,1.5, 0), "Out", "Elastic", 1)
end)

:pushpin: Notes :pushpin:

Default (In) Frame Position is 0.5, 0,1.5, 0

Default (Out) Frame Position is 0.5, 0,0.5, 0

https://developer.roblox.com/en-us/api-reference/enum/EasingStyle

I only design the UIโ€ฆ

I only do scripts on button effects, open and close, for others such as map voting, the shop, inventory DOESNโ€™T HAVE A SCRIPT YET. :hidere:


Thatโ€™s all the message I can convey, Iโ€™m sorry if there are any wrong words.

Thanks for Reading!
Have a great day!

24 Likes

Amazing, I hope you will continue on making these amazing creations!

3 Likes

I think they look good and I think this will be a good resource for people to get started!

Just one critique, I think adding a bit of space from the top row and the bottom row on these two might look better, so they donโ€™t look too squished and the buttons donโ€™t overlap with other buttons.

3 Likes

Theres a positioning error

2 Likes