Studio's first Fully Visual UI Editor System
Hey Developers!
UI Editing on Roblox Studio is super hard and annoying. You can’t zoom in, pan around, make minor edits, and it lacks a bunch of useful editor features that make it easy for UI designers to implement UI for Roblox games. Well, Sketch is here to save the day!
Introducing Sketch
Sketch is a free, Figma-inspired UI design plugin for Roblox Studio. It gives you a dedicated canvas to visually create, edit, and export UI, without fighting the Properties panel for every position, size, and colour change!
You can design your UI visually, and export it as a real, functional ScreenGui.
Why Sketch?
Roblox’s built-in UI Editor is a… mess. Some problems you might’ve been frustrated by:
- No way to zoom into your UI while editing.
- No visual size or distance indicators between UI Elements. You’re left guessing…
- For tiny accuracy, UI adjustments must be made through numbers in the Property tab.
- Weak alignment snapping between elements.
- No easy way to convert between scale and offset values unless you install a plugin for that specific task.
- And MUCH MUCH MORE. Disappointing, I know.
Sketch fixes ALL of this. It’s a standalone canvas editor with its own document model, full undo/redo history system, smart alignment guides, visual UI editing system with panning and zooming, and a one-click export straight to StarterGui.
Best of all? It’s FREE! No paid tier or locked features or trials.
The Sketch interface was designed by ZolUI.
Let's take a look at some features...
Expand the following for video snippets of features in action!
🎨 Visual Canvas Editor
Sketch runs in its own dock widget with a dedicated canvas. It’s a proper design environment, just like Figma. Here’s a demo:
🧱 Create any UI Element
Every 2D UI Element is supported! Shortcuts also work, so you keyboard demons can work quickly!
Simply click and drag to draw your elements!
📐 Select, Resize, Rotate & Move!
Just like Figma, all the transformations you can possibly do on a UI Element is fully visual!
Move - Drag any selected element. You can even use Arrow Keys to nudge elements by 1px (Shift + Arrow for 10px). Press and hold to slide elements works too!
Resize - Drag corners or edges to resize. Hold Shift to lock aspect ratio.
Rotate - Drag the rotation handle to rotate. Hold shift for snap increments of 15 degrees!
Smart Alignment Guides - As you move and resize, Sketch will snap edges, centres, and midpoints of sibling elements! You can hold Ctrl to disable it temporarily.
⚙️ Properties Panel
Just like on Roblox Studio, but with many Quality of Life improvements that make it a better visual experience!
🗂️ Layers Panel
A dedicated Layers panel, modelled after the Explorer tab & Figma’s layer panel. It shows your element hierarchy as a tree! It supports:
- Drag and drop reordering - Just like the Explorer.
- Expand/collapse - Just like the Explorer.
- Selection sync - What you select in the layers tab, is selected in the canvas.
- Link button - UI is synced with Studio!
✏️ Inline Text Editing
Isn’t it annoying that on Studio, you have to go into the properties tab to write text? Well no longer!
📦 Grouping
Grouping allows you to group UI Elements within a Frame that perfectly bounds your UI Elements.
📏 Measurements & Distance
It’s quite annoying to not know exactly how far a UI Element is from a sibling, having to do math everytime to visualise perfection. With Sketch, you can press and hold Alt while selecting a UI Element and hovering over a sibling. This shows you the distance in pixels between the two elements!
🖱️Context Menu
As seen in the videos above, you can right-click to open a context menu for many actions! It dynamically changes based on context.
💾 Save, Load, and Linking
Sketch autosaves every 60 seconds, so in case something goes wrong, there’s always a backup to load from! If the autosave was unsaved, Sketch will prompt you to either Restore, Discard, or Ignore.
Sketch live syncs with Roblox Studio, so your changes are always reflected in Studio.
↩️ Undo/Redo History
Every action you do is recorded! It saves up to a 100 steps by default, but you can edit this in the Settings menu.
⚙️ Settings
Click the gear icon to open settings. Settings persist across sessions.
⌨️ Shortcuts
There are tons of applicable shortcuts for Sketch, however, some of them clash with Studio’s in-built shortcuts system. To prevent this, customise shortcuts like shown in the video:
Also, for panning, press and hold Space, then drag.
Visual Editing for UIListLayout and UIGridLayout
The editor for UIListLayouts and UIGridLayouts are super annoying in Studio. With Sketch, you can visualise it much better and hence get more accurate layouts!
What can Sketch be used for? What shouldn't it be used for?
Sketch is a visual UI design tool for building Roblox UI faster. It’s aimed for UI designers and scripters alike.
However, it is not a replacement for scripting UI logic. It doesn’t act as a runtime UI framework. And it doesn’t support collaborative editing with team-create.
Feedback & Bug Reports
Sketch is a very new tool, so it may have rough edges. I am always open to your feedback and reports, and would love to improve this plugin to make it a great UI editor for developers.
If you find a bug or have a feature request, feel free to reply to this thread. Screenshots and/or screen recordings are much appreciated.
This is v1.7. More features are planned.
Get Sketch now, for free, on the Roblox Creator Store.
.
