Away 2:32 PM

YOUR NEXT GAME STARTS HERE

Great games deserve
great interfaces.

Design your Roblox UI. Draw the details. Bring it into Studio.
One creative workspace, from the first Frame to the final screen.

Start designing free Get the desktop app

Start in your browser. Pro unlocks more workflows and the desktop app.

YOUR IDEAS, IN PLAY.DESIGN / DRAW / CODE
UI Builder editing a Roblox item shop, with its instance tree, canvas and property controls. Real Roblox instancesBuilt for your next release
DESIGN IT.DRAW IT.MAKE IT MOVE.BRING IT TO STUDIO.

01 / DESIGN

Your game.
Your visual language.

Build shops, inventories, HUDs and menus on a canvas that understands Roblox. Work with actual Frames, text, images and layout modifiers, then fine-tune the properties you already know from Studio.

  • Organize your screens with layers and multiple views.
  • Reuse components instead of rebuilding every button.
  • Preview different device sizes as you design.
Build your first screen

02 / INK BENCH

Give your UI
a little character.

Draw the icon you cannot find. Shape the badge that makes a reward feel special. Ink Bench puts vector editing and textured brushes beside your interface, with artwork saved to its builder project.

  • Edit paths, combine shapes and work with masks.
  • Add gradients, textures and your own brush presets.
  • Keep useful assets in your Library and export artwork.
Find your creative flow

03 / CODE & MOTION

Looks good.
Now make it work.

Move between designing and coding in the same workspace. Add motion and interactions, work with your scripts in Code mode, and connect your design workflow to Roblox Studio.

  • Give buttons hover and click animations.
  • Adjust animation timing and easing.
  • Export in the format your project needs.
Explore the workflows
DESIGN MEETS LUAU
Shop.client.luau ●
-- A little motion goes a long way.
local TweenService = game:GetService("TweenService")
local button = script.Parent

button.MouseEnter:Connect(function()
    TweenService:Create(button,
        TweenInfo.new(0.18), {
            Rotation = -2
        }):Play()
end)

button.MouseLeave:Connect(function()
    TweenService:Create(button,
        TweenInfo.new(0.18), {
            Rotation = 0
        }):Play()
end)
0s◇◇0.18s

04 / BRING IT TO STUDIO

From an idea to your game.

Keep your creative work connected to the place it belongs.
Choose your export workflow, or use Studio Sync to bring your design into Roblox.

LuauReact-LuauFusion.rbxm / .rbxmxStudio Sync
Compare Free and Pro
01

Assets that stay useful.

Start with icons, generated textures and patterns. Save your own reusable components and looks in the Library.

02

A workspace that feels yours.

Adjust your panels and tools. Turn on subtle sound feedback for drawing, clicks, sliders and canvas actions.

03

Your project, ready to return to.

Save to your account and continue later. Keep the interface and its editable Ink Bench artwork together.

A few things to know.

Can I start for free?

Yes. You can start designing in the browser for free. Pro adds more export formats and workflows, including the desktop app. See the current plan details.

Do I need to install anything?

The web editor runs in your browser. The optional Windows desktop app is available with Pro. Studio Sync uses the Roblox Studio plugin.

Is Ink Bench part of UI Builder?

Yes. Open Draw mode to create and edit artwork with Ink Bench. Its drawing is saved with the builder project.

Where is my work saved?

The editor keeps your design in your browser as you work. Saving to your account, publishing a share link or uploading images sends the content needed for that action.

MAKE YOUR NEXT SCREEN THE ONE YOU ARE PROUD OF.

Ready when you are.

Open UI Builder Explore Pro