Tutorial
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.
Docs
module:Apply() -- Applies settings
module.Component.new(function, states) -- use self.States in function to get states, Gives back a componentId
module.new(parent, 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.
]]
GuiObject.gradient(colorsequence)
GuiObject.position(udim2)
GuiObject.background(color3)
GuiObject.text(text)
GuiObject.icon(image/rbxasset)
GuiObject.scale(udim2)
window.Hover:Connect(onEnter, onLeave) -- Bind a hover event.
-- All settings
Background
Clicked
Blank
Text
Red
Blue
Green
Shadow
Round
Pattern
Font
Position
Anchorpoint
Size
ZIndex
Examples:
local module = require(script.Parent["Design+"])
local window = module.new(script.Parent, {Background = Color3.new(1,1,1)})
local buttonComponentId = module.Component.new(function(data)
local button = window.create("TextButton", {Size = UDim2.new(0,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}}})
button.Instance.MouseButton1Click:Connect(function()
module:Apply({Round = false, Shadow = false})
local newEffect = window.create("Frame", {Size = UDim2.new(0,75,0,75), Position = UDim2.fromOffset(game:GetService("UserInputService"):GetMouseLocation().X,game:GetService("UserInputService"):GetMouseLocation().Y),Transparency = .7,BackgroundColor3 = Color3.new(0.539086, 0.539086, 0.539086)},{{"UICorner", {CornerRadius = UDim.new(1,0)}}})
module:Apply({Round = true, Shadow = true})
newEffect:Tween({Size = button.Instance.Size}, 1)
game.Debris:AddItem(newEffect.Instance, .25)
end)
return button
end)
window.component(buttonComponentId, {Color = Color3.new(0.801816, 0.205371, 0.998932)})
Credits:
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,
