[ 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!

16 Likes

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

2 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.

2 Likes

Theres a positioning error