Show off your UI designs

Working on some UI for a game. Give me some feedback (I don’t have the hover animations included in this btw)



4 Likes

Not that bad. I like it’s. The frames/buttons/lists. I like it a lot!

1 Like

some spring animations

14 Likes

I have made a newer version since then and I’m planning on adding a script menu when I get the time but I think this menu is way better.

4 Likes

Account Protection System

14 Likes

image
:sob: my first. also, the blank blue box in the middle says “Reason…” but I already typed in it. Finally, I’m aware that the middle white frame is off-center.

4 Likes

Just the phone UI

Not made by me.

made by @TheDCraft

11 Likes

Hey I really like them! Could you learn me?

2 Likes

Style: I don’t know :confused:
Program I used to create UI: Roblox Studio
Description: I don’t know maybe just for fun!

Uploading: ForFunUIShowcase.wmv…

1 Like

Style: Cartoony
Program: Photopea
Reason for making: This is for a personal roleplay game!

Summary

7 Likes

Can you post a tutorial on how to do this? This looks extremely clean and I’d love to implement it into my own Designs (of course crediting you if you want).

1 Like

That checkered background for some reason gives me that ROBLOX effect. Really clean design!

2 Likes

I’m using springs. This module is good for creating spring animations

Btw, I updated it and this is how it looks atm

And this is the module I created to animate the buttons

local UserInputService = game:GetService("UserInputService")
local Spring = require(script.Parent.Parent.Packages.Spring)

local buttons = {}
local methods = {}

local function split(value: UDim2)
    return value.X.Offset, value.X.Scale, value.Y.Offset, value.Y.Scale
end

function methods.add(button: GuiButton)
    if not buttons[button] then
        local position = button.Position
        local size = button.Size

        local x1, x2, y1, y2 = split(position)
        local s1, s2, s3, s4 = split(size)

        local storage = { enabled = true, connections = {} }

        local function enter()
            if not storage.enabled then return end
            Spring.target(button, 0.4, 4, { Position = UDim2.new(x2, x1, y2, y1+10), Size = UDim2.new(s2, s1, s4, s3-5) })
        end

        local function leave(input : InputObject)
            if input.UserInputType == Enum.UserInputType.MouseButton1 then
                Spring.target(button, 0.4, 4, { Position = position, Size = size })
            end
        end

        storage.connections[1] = button.MouseButton1Down:Connect(enter)
        storage.connections[2] = UserInputService.InputEnded:Connect(leave)

        button.Destroying:Connect(function()
            for i, v in ipairs(buttons[button].connections) do
                v:Disconnect()
             end

            buttons[button] = nil
        end)

        buttons[button] = storage
    end
end

function methods.remove(button: GuiButton)
    if buttons[button] then
        for i, v in ipairs(buttons[button].connections) do
            v:Disconnect()
        end
    end

    buttons[button] = nil
end

function methods.setState(button: GuiButton, state: boolean)
    if buttons[button] then
        buttons[button].enabled = state
    end
end

return methods
34 Likes

Thanks! This will be really helpful to create clean and nice Ui’s. :smile:

4 Likes

in the first image I think you should align the SCP logo better so it isn’t above the text. Over all it’s great!

1 Like

That’s SMOOOOOOOTH

I need to try using spring animations on Roblox…
Awesome work!

3 Likes

Where do you find/get the background from?

1 Like

No like there is an emoji for that image
:burrito:

1 Like

Pretty simple UI’s made by me for the game i’m working on.



Designed on Figma, still learning about scaling and importing these properly into Roblox!

2 Likes

This is against roblox tos lol

1 Like