Design+ v3.3.2 | UI, The easy way

button ​ ​ ​ button|300x0, 30%


Design+ is intended to make gui making easier. A simple script can create amazing GUI.

First create a new window with .new(parent) and use .create to make a new element, and element includes special functions/events listed below.

:Apply can apply default settings
This can be useful when quickly creating UI.

Read docs for all settings.

Example script:

Test this out.


module:Apply() -- Applies settings, states) -- use self.States in function to get states, Gives back a componentId, data) -- Creates a new window in the parent with the data
window.create() -- Makes a new GuiObject that is automaticity formatted
window.component(componentId, data)
GuiObject.Instance -- Returns the raw instance without special functions
 The below are included in Frames, TextButton, TextLabel, ImageLabel, ImageButton.
window.Hover:Connect(onEnter, onLeave) -- Bind a hover event.

-- All settings



local module = require(script.Parent["Design+"])
local window =, {Background =,1,1)})
local buttonComponentId =
	local button = window.create("TextButton", {Size =,250,0,100), TextColor3 = data.Color,Text = "NewButton",["Font"] = Enum.Font.GothamBold,	TextSize = 30,},{{"UIStroke", {Thickness = 2.5, Color = data.Color, ApplyStrokeMode = Enum.ApplyStrokeMode.Border}}})
		module:Apply({Round = false, Shadow = false})
		local newEffect = window.create("Frame", {Size =,75,0,75), Position = UDim2.fromOffset(game:GetService("UserInputService"):GetMouseLocation().X,game:GetService("UserInputService"):GetMouseLocation().Y),Transparency = .7,BackgroundColor3 =, 0.539086, 0.539086)},{{"UICorner", {CornerRadius =,0)}}})
		module:Apply({Round = true, Shadow = true})
		newEffect:Tween({Size = button.Instance.Size}, 1)
		game.Debris:AddItem(newEffect.Instance, .25)
	return button
window.component(buttonComponentId, {Color =, 0.205371, 0.998932)})


spr module/library for spring animations
ProGui for some API functions
Slider module for slider custom object
Search for search custom object
Logo made by this website

Remember, this just helps by making programming easier and more advanced. If you want purely amazing GUI, you will have to work.

If you find any bugs or have any questions feel free to reply,


Very creative! Could we get a demo video or screenshot? Thanks!

1 Like

This is a demo place which creates with the code:

local module = require(script.Parent:WaitForChild("Design+"))

local window =

1 Like

The experience is private.

1 Like

Fixed, And I know the GUI might look simple but if you were to use roact it would take roughly 20 lines instead of 3.

1 Like

The problem with this resource is its very limited. You can only create certain UIs with it, and you haven’t explained how it works or what it does. Saying it can “create amazing GUI” doesn’t help.

How many different UI objects can you make with this? It seems to me at the moment that all your module does is add a UICorner and a shadow, which is easy and anyone can do it.

Furthermore, now developers have to go to the extra trouble of designing their UIs directly from a script without any kind of functions to make it easier, like other UI libraries have.

This resource can be made a lot better with more features, APIs, tools, and customization. This is not up to the quality standard that is expected for open-source UI tools like yours.

To sum up, your resource is very limited and could use a lot of work. Thank you for making it, but I suggest you take this time to improve your module and make it better, then re-release.

Not trying to rain on your parade or anything, just providing feedback.


Any ideas? And at the top I did note that it is incomplete and I would not recommend using this in games.

Also there are more features. And defaults.


Roact already exists. But i will not complain.


Isn’t this just Fusion or Roact but much smaller and with less features? I don’t really see any differences.

1 Like


Like the above replies said, It is limited I do agree.

Like how @bitsNbytez said

and @TheH0meLands said that it does not include the

  • events
  • refs
  • bindings
  • state
  • portals
  • any state management library.
  • no animation library (no Otter or Roact Springs)
  • no components

Well… Most of those are fixed. I made it similar to SwiftUI with stuff like .Icon, .Gradient, .Text and etc…

Read the remade docs above, This is a small update so still I would not recommend using this.

And how did no one notice that you can add default settings with :Apply


Thanks for the constructive criticism. I understand the problems and fixed most of these.

But what are:

  • portals
  • state/state management

And it does include

  • Children
  • Componments
  • Events
  • Bindings
  • Refs

Refs let u access the instance itself of the ui. States idk how to explain it, just try roact.

State management is what lets you sshare state between components.

Also you shpuld be able to make custom components. Not pre made

1 Like

I guess refs do exist in this module lol, You can use object.Instance.

I will start working on custom components and states/state management.


Read above docs to understand it.

Use the Portal property if you would like to make a portal.

1 Like

Minor fixes

  • Fixed tween bugs
  • Added github
  • Changed post
  • Added to docs
  • New wiki
  • BlurFrames frame.blur()

For one, isnt this basically Roact with less features? and secondly, your logo is just ripped from a website. Not very professional. Making a UI design resource I would think you could just design your own logo, but I guess not.

You searched for ‘free logo’ and took one of the first results: Free Logos for Unlimited Use! by Devin Rajaram on Dribbble

not trying to be mean or rude here, but if you want to succeed you shouldn’t use a free logo made by someone else.

i searched for free logos when i was a really dumb beginner dev and I found this one. thats how I know its free.

1 Like


Design+ is now usable.

  • Added spring tweening
  • ScrollingFrames, TextBoxes and more just got supported
  • :rawCreate()
  • .size and .stroke and more functions
  • Alot of bug fixes
  • Removed wrapping ):
  • AI recoloring - Turn off using :Apply()

Design+ is not even close to Roact, Most of those features will be future implemented. Design+ is more similar to SwiftUI then Roact.

Any issues please report

1 Like

Interesting module! I can’t view the docs for some reason.

1 Like

Try going to the github wiki instead.

1 Like