FreeStyle Manager v0.12 | UI Stylesheet Manager [Free Plugin]

FreeStyle Logo

FreeStyle Manager Plugin

Download Plugin | Download Example Place


What is it?

The FreeStyle Manager is a Roblox Studio plugin designed to streamline the process of managing and applying UI styles across your experience(s). Inspired by tools like React Lua and Fusion, this plugin was created to provide an easier way to create reusable UI components without the complexities of building everything in code and states-management.


Who is it for?

This plugin is ideal for:

  • Visual-first Developers: Developers who prefer building UIs in the visual editor but want to streamline the process with reusable styles and components.
  • Consistency Enthusiasts: Developers looking to maintain consistent UI styling across their project while easily updating styles across all their UIs.
  • Multi-Experience Designers: Developers who want to reuse the same UI structure and functionality between multiple experiences but with different visual styles.

Key Features

1. Visual Editor Compatible:

  • No need to build your UI structure in code.
  • Designed for developers and UI designers accustomed to tools like Figma or Roblox’s visual editor.
  • Allows you to visually design UI layouts while enabling advanced styling and reusability through scripts.

2. Simple to Use:

  • Requires only basic Lua knowledge.
  • Focuses on providing an intuitive workflow for all skill levels.

3. Flexible Styling Options:

  • Supports deep inheritance of styles, allowing child styles to inherit from parents.
  • Easily apply objects like UICorner, UIStroke, UIGradient, and UIPadding.

4. Manual and Live Updates:

5. Wireframe Mode:

  • Toggle a clean, minimalistic wireframe view of your GUI.
  • Ideal for creating layouts and ensuring good alignments and layering.
    RobloxStudioBeta_ZDQdREyevE

How to Use the FreeStyle Manager Plugin (with an example)

The example modal (Download here):

1. Install the Plugin

  • Download and install the plugin into your Roblox Studio environment.
    The plugin should look like this :
    Screenshot 2025-01-24 164318

2. Add a Stylesheet

  • Create a ModuleScript named FreeStyleSheet in ReplicatedStorage. This script acts as your central repository for all UI styles.

Here is how it looks for this project :

-- FreeStyleSheet
local Components = script.Components

local BackgroundComponenents = require(Components.BackgroundComponenents)
local ButtonComponenents = require(Components.ButtonComponenents)
local TextComponenents = require(Components.TextComponenents)


local Stylesheet = {
	Background = BackgroundComponenents,
	Button = ButtonComponenents,
	Text = TextComponenents
}

return Stylesheet

To keep it clean, you should only have your components in this file.

3. Structure Your Project

Here, how this project is structured. However, you don’t have to replicate it, exactly.
I divided my ModuleScripts into two folders. One for the components with which I build the UIs and another folder with the styles that I use to build the components.
image

4. Creating styles

Here is an example of my colors styles :

local Colors = {
	Primary = {
		Light = Color3.fromRGB(37, 233, 255),
		MidLight = Color3.fromRGB(59, 52, 255),
		Mid = Color3.fromRGB(69, 119, 172),
		Dark = Color3.fromRGB(133, 111, 255),
	},
	Secondary = {
		Light = Color3.fromRGB(251, 255, 32),
		MidLight = Color3.fromRGB(255, 207, 32),
		Mid = Color3.fromRGB(122, 105, 36),
		Dark = Color3.fromRGB(111, 78, 49)
	},
	
	White = Color3.fromRGB(255, 255, 255),
	Black = Color3.fromRGB(0, 0, 0),
	Green = Color3.fromRGB(17, 89, 33),
	Red = Color3.fromRGB(117, 23, 23),

}

return Colors

Or a simpler one for the Fonts :

local Fonts = {
	Title = Enum.Font.FredokaOne,
	Body = Enum.Font.Oswald,
}

return Fonts

It isn’t shown in those examples, but a style can reference another style file with a requirement.
For example :

local Colors = require(script.Parent.Colors)
local Strokes = {
 StrokeColor = Colors.White
}

5. Creating components

Here is an example of this ButtonComponents with comments to explain each sections :

-- ButtonStyles Module
local Styles = script.Parent.Parent.Styles

-- Requiring all the used styles
local Gradients = require(Styles.Gradients)
local Strokes = require(Styles.Strokes)
local Corners = require(Styles.Corners)
local Paddings = require(Styles.Paddings)
local FX = require(Styles.FX)

-- Creating the Button component
local ButtonStyles = {
--Styling the common proprieties in all buttons
	UIPadding = Paddings.ButtonsPadding,
	AddTags = {FX.ButtonFX},
	UICorner = Corners.SmallCorner,
	
-- Styling the green and the red button's proprieties that will also inherit from the proprieties above 
	GreenButton = {
		UIGradient = Gradients.Green,
		UIStroke = Strokes.SmallStroke.Green
	},
	RedButton = {
		UIGradient = Gradients.Red,
		UIStroke = Strokes.SmallStroke.Red,

--Close Button is a child of Red Button, in which only the UICorner propriety is modified
		CloseButton = {
			UICorner = Corners.Round,
		}
	},
}

return ButtonStyles

6. Apply Components Styles to your UI with Tags

Tag your UI elements to apply styles (and manually refresh the UI):

RobloxStudioBeta_WKXPlu531U

The first term (in this case “Button”) is the name given in the FreeStyleSheet

local ButtonComponenents = require(Components.ButtonComponenents)
local Stylesheet = {
	Button = ButtonComponenents,
}

The others terms are the one used in the component sheet.
For exemple to style using the Close Button Component shown earlier, the tag would be :

Button.RedButton.CloseButton


Supported Objects and Their Uses

Most the proprieties are optional and will use the default value if left empty

1. UIPadding

  • Adds padding (spacing) inside a GuiObject.
  • Usage:
UIPadding = {
    PaddingTop = UDim.new(0, 10),
    PaddingBottom = UDim.new(0, 10),
    PaddingLeft = UDim.new(0, 15),
    PaddingRight = UDim.new(0, 15),
}

2. UIGradient

  • Adds gradient effects to the background of a GuiObject.
  • Usage:
UIGradient = {
    Color = ColorSequence.new{
        ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)), -- Red
        ColorSequenceKeypoint.new(1, Color3.fromRGB(0, 0, 255)), -- Blue
    },
    Rotation = 90,  -- Horizontal gradient
}

3. UIStroke

  • Adds an outline to GuiObjects.
  • Usage:
UIStroke = {
    Thickness = 2,
    Color = Color3.fromRGB(0, 0, 0),
    Transparency = 0.1,
}

4. UICorner

  • Rounds the corners of GuiObjects.
  • Usage:
UICorner = UDim.new(0, 8)  -- 8-pixel radius corners

5. ScaledUICorner

  • Dynamically scales corner radius based on the size of the GuiObject.
  • Usage:
ScaledUICorner = UDim.new(0, 16)  -- Proportional corner radius

6. AddTags

  • Adds tags to GuiObjects for animations (will be added later).
  • Usage:
AddTags = { "ButtonFX", "ModalScaleUpEffect" }

7. RemoveTags

  • Removes specific inherited tags from GuiObjects.
  • Usage:
RemoveTags = { "ModalScaleUpEffect" }

This was mainly made for my personal use, so, I don’t know, it might not be useful to too many. Nevertheless, I’m happy to share it with the community. Enjoy! :smiley:

It is my first plugin, I hope this post isn’t too long and confusing. :upside_down_face:

PS; Later, I will probably add the UI animation module that can be used with AddTags to add hover/click effects on buttons and have effects when a Frame visibility change.

Bugs and Future Updates
  • Have a way to make TextLabel to be converted from pixel to scale to always have the same height no matter the parent size
  • Add the UI Animation module
10 Likes

v0.12

  • Fixed the problem with the UIScaledCorner