Hi everyone.
For the past two months I have been building GuiForge - a browser-based editor for Roblox interfaces. You lay the UI out visually, and it gives you back a Luau script that builds the same tree in game, plus the behaviour that usually costs you an evening of wiring: windows, tabs, cooldowns, progress bars with data bindings, tooltips, hover/press animations.
It is not a Studio plugin that spits out a ScreenGui. The output is code you keep, read and edit.
Editor: https://rbx-guiforge.netlify.app
Figma import plugin: https://www.figma.com/community/plugin/1664781014158186154
Why another UI tool?
GUI Forge supports: 9-slice images, UI particle effects, native shadows, export from figma, image-loader plugin, keyframe UI animation, bindable actions etc
The editor preview.
What it can build
Sixteen node types, all of them exportable: Frame, Button, Label, Image, Progress bar, Toggle,
Window, Tabs, Scroll (inventory grids), Slider, Cooldown, Confetti, Emitter2D, Skill tree,
Roll (roulette), Group (CanvasGroup).
Everything Roblox itself supports on a GuiObject is there too: UICorner (including
per-corner radii), UIStroke with Inner/Center/Outer positions and line joins, UIGradient
with animated rotation, 9-slice images, UIAspectRatioConstraint with both modes, native
UIShadow, UIListLayout / UIGridLayout / UIPadding.
Runtime behaviour
The generated script comes with a small runtime that exposes a plain API:
UI.SetData("Coins", 1250) -- bound labels and bars update themselves
UI.OpenWindow("Shop") -- open/close animation, optional overlay
UI.GoToTab("Inventory")
UI.StartCooldown("Ability", 5)
UI.SetState("PlayButton", "Active") -- keyframe chains you record in the editor
UI.Confetti("RewardBurst")
About seventy such functions in total — sliders, toggles, roll lanes, skill-tree cells,
tooltips, theme switching at runtime. The runtime is trimmed per project: only the sections
your UI actually uses are emitted, so a small HUD does not carry the skill-tree code.
Theme tokens - one colour/font/animation changed once, applied everywhere.
Theme tokens
Colours, fonts, background templates, shadow templates and hover/press animations can live as
project tokens. Bind twenty buttons to one token, change it once - everything follows, both in
the editor and in the exported code (UI.BindTheme, UI.SetTheme).
Adaptivity
The preview has device presets, so you see the phone layout before the game does.
The same screen at different device sizes / px ↔ % conversion.
Export
Four formats:
| Format | What you get |
|---|---|
| LocalScript | One self-contained file. Drop it in StarterPlayerScripts and it works. |
| Modules | Runtime library + project config + initializer, for larger codebases. |
| React-Lua (beta) | A jsdotlua/react component — the visual part of the UI. |
| .rbxmx (beta) | An XML model: the instance tree is visible in Explorer and editable by hand. Optionally with a companion runtime that attaches the behaviour back to it. |
Two adaptivity strategies (pure Scale, or Offset + a single root UIScale) plus a hybrid,
because the right answer differs between a HUD and a fixed-size dialog.
The runtime can also be installed once into ReplicatedStorage as a shared module, so ten
exported screens do not carry ten copies of it.
The export dialog - formats, generated code, warnings.
Figma import
If your UI is drawn in Figma, the companion plugin
brings frames over with their layout, text, strokes, gradients and 9-slice settings, and
rasterizes what Roblox genuinely cannot reproduce (skew, inside-positioned text strokes,
mixed fonts inside one text run).
Particles
The Emitter2D node edits the configuration of
Emitter2D - GUI Particles
by @dogwarrior24 - that plugin is the actual particle engine in game; GuiForge only writes
its config and draws an approximation in the preview.
Image-Loader
To save your time from uploading images manually, a companion Studio plugin is available as a direct file download on the website. It scans your project, uploads all referenced images to Roblox in bulk, and returns their assetIds for immediate use in JSON format.
Note: This tool is distributed as a direct download rather than through the Roblox Marketplace, as Marketplace publishing restrictions currently prevent the image upload functionality from working correctly.
Multi-edit
Yeah, you can also multi edit almost all UI objects - change their properties: corners, strokes, size (px/%), shadows, images, animations etc. Some properties is still WIP
Keyframe Sequence
You can record your UI object and animate it by changing it’s properties when you hit record button. Then you can assign this animation to any actions
Honest limitations
- React-Lua export still in beta
- The preview is a browser, the game is Roblox. They will never be pixel-identical.
- Emitter2D particles need the third-party plugin above.
- The editor is in active development. Things get fixed quickly if you tell me about them -
the Discord above is the fastest way.
Feedback
Bug reports, missing Roblox properties, “this exported wrong” screenshots - all welcome in
Discord. If you hit a case where the export does not match
Studio, a saved project file makes it fixable.
The editor is free to try; details are on the site.
Feel free to suggest changes