FFusion - Convert your Roblox Guis into Fusion components! - FREE

Resources Community Resources
, , ,
1

:hammer: Roblox Plugin | :floppy_disk: GitHub Repo

800Ă—800 34.3 KB

Convert GUIs to Fusion code.

Fusion (v0.3.0) Package Download: Fusion.rbxm (48.6 KB)

You can quickly install Fusion versions 0.4.0+ via the Settings menu.

ℹ️ About

What is FFusion?

FFuse takes any selected UI hierarchy in your workspace or PlayerGui and instantly serializes it into a clean, readable Fusion ModuleScript. It also automatically handles property mapping (including complex types like UDim2, Color3, Enum, NumberSequence, and Font).

Key Features

  • Full Property & Children Serialization: Converts your entire UI layout and its properties into native :New syntax.
  • Smart Studio Preview Mode: For ScreenGui roots, FFuse intelligently wraps elements so you can preview your UI directly inside Studio without needing a ScreenGui wrapper cluttering things, while still allowing full deserialization back into instances.
  • Dependency Auto-Discovery: Automatically finds and hooks up your Fusion package whether it’s located in Packages, ReplicatedStorage, or deeper hierarchies.
  • Storybook Integration: Instantly generate Storybook-compatible story files (.story) for your components with a single click.
  • And several other more features in upcoming updates!
📦 Output (Example)

Example Output

Here is a quick look at what a generated Fusion module looks like:

--!strict

local RunService = game:GetService("RunService")

--> Fusion API: https://elttob.uk/Fusion/0.3/
local Fusion = require(game.ReplicatedStorage.Modules.Fusion)

local isPreview = RunService:IsStudio() and not RunService:IsRunning()

return function(props): any
	local scope = Fusion.scoped(Fusion)


	local elements = {
		scope:New "TextButton" {
			AnchorPoint = Vector2.new(0.5, 0.5),
			BackgroundColor3 = Color3.fromRGB(143, 255, 74),
			Font = Enum.Font.Unknown,
			FontFace = Font.new("rbxasset://fonts/families/Roboto.json", Enum.FontWeight.Bold, Enum.FontStyle.Normal),
			Position = UDim2.fromScale(0.5, 0.5),
			Size = UDim2.fromOffset(200, 64),
			Text = "Submit Button",
			TextColor3 = Color3.fromRGB(17, 93, 12),
			TextSize = 22,
			[scope.Children] = {
				scope:New "UICorner" {
					CornerRadius = UDim.new(0, 8)
				},
			}
		},
	}

	if isPreview and not (props and props.__ffuseOverride) then
		return elements
	end

	return scope:New "ScreenGui" {
		ResetOnSpawn = false,
		[scope.Children] = elements,
	}
end

Why is it dynamic?

→ ScreenGui’s are not directly viewable in Stories.

Feedback & Contributions

I’d love to hear what you all think! Let me know if you run into any issues with specific UI properties or edge cases, or if you have suggestions for other features you’d like to see added.

The GitHub page is where you can submit Issues or Suggest Changes

Happy scripting!

1 Like
2

The plugin for some reason has been moderated by Roblox for “Misusing Systems”. A reponse should be given soon..

The plugin, may unfortunately not return - however the GitHub Releases will have the plugin file available to insert and load in studio.

3

Does plugin do some sort of parsing/execution that looks up an instance path?
Had my HierarchySaver taken down until i updated it to use ModuleScripts for execution instead

Can’t view code to find suspicion of a flag rn sadly because im on a mobile

4

Its most likely due to me using HttpService, but I have another plugin which uses httpservice too but it didnt get moderated, so its likely a mistake.

And I’m not entirely sure what you mean? But the file is here if your having trouble finding the link..