Show off your UI designs

Scriptify_YT · May 5, 2022, 5:02pm

Woah that looks sick can you tell me the tweenInfo you used?

mekboy21 · May 6, 2022, 8:12am

Style - UIBlox
Made in: Roblox Studio with the use of my new plugin, (Introducing UIBlox Tools [Plugin])

Although I just noticed this:

Oof.

mekboy21 · May 6, 2022, 8:15am

Dang that’s good, gives me vibes of the RH Ui hidden away in old places.

1NoFree · May 6, 2022, 8:44am

Style: Shop with UI Stroke
Program used to create your UI: Roblox Studio
Pictures:

cxmeels · May 6, 2022, 1:50pm

do you mean the currency button’s bouncing animation?

I’m actually using Flipper to animate, rather than tweens, which is a physics based motion library. the source code for the UI is all here:

github.com

csqrl/rotopia-ui/blob/default/src/Pages/Index/CoinDisplay.lua

local Root = script.Parent.Parent.Parent
local Components = Root.Components

local Roact: Roact = require(Root.Packages.Roact)
local Llama = require(Root.Packages.Llama)
local Flipper = require(Root.Packages.Flipper)

local Number = require(Root.Util.Number)
local Transition = require(Components.Transition)
local Device = require(Root.Device)
local Theme = require(Root.Theme)

local bind = require(Root.Util.Bind)
local merge = Llama.Dictionary.merge
local e = Roact.createElement

local Component = Roact.Component:extend("CoinDisplay")

Component.defaultProps = {
    show = true,

This file has been truncated. show original

JoyfulFlowerMary · May 7, 2022, 8:44am

Thanks. Is it because of the “Cartoon”/Comic Neue font? Royale High’s UI tends to use it (and it’s a cute-looking font).

Speaking of Royale High, I’ve created a new UI, all today (well, yesterday since it’s past 12AM)…

Style: cute(?)
Program used to create your UI: Roblox Studio
Picture:

It’s a color picker! Visually, it’s nothing special (but I think it’s better than my earlier UI designs); I’m more proud of how I programmed it.

Like RH, click and drag to change hue, saturation, and brightness. The main palette fades as the brightness is decreased (unlike RH).
If the cursor exits the palette, the diamond continues to follow the cursor around the edges, just like Roblox Studio’s color selection window (and unlike RH).
When a RGB text input is focused, the tab key advances to the next in line, just as expected.

I think the flavor/trash GUI’s now need an update to match this.

bakers · May 7, 2022, 3:30pm

Based loosely from this image

Scriptify_YT · May 8, 2022, 8:25am

I actually mean of the frame popping up…

mekboy21 · May 8, 2022, 8:40am

They definitely need an update to get up to that standard.

mekboy21 · May 8, 2022, 8:45am

I just keep making stuff that I won’t use.

Style: Simulator
Made in: Roblox Studio
Pictures:

goalmwo · May 8, 2022, 9:14am

Decided to revamp some old UI’s to make them look more clean. Thoughts? (It will change to the text version when hovered on PC).

Old version:

Minigames tab!

cxmeels · May 8, 2022, 10:46am

all of the animations are using the flipper library mentioned in my previous reply. the source code for that entire UI is all in that GitHub repo, but it’s not exactly using best practices. I was still fairly new to Roact at that point

OverinduIgence · May 8, 2022, 11:39am

Hey there!

That’s an extremely good design with a modern taste to it, I was wondering what font you’re using for the Title ‘AREA 51’ and the tabs in the top right.