Move UI with Arrow Keys – uiSnap

[faint canopy]

🛠️ What this is
A GUI-focused plugin for Roblox Studio called UiSnap — by @br_cks, inspired by Nudge — by @Burgonet

⚙️ What it does
Lets you precisely move or resize selected GuiObjects in the viewport using arrow keys or on-screen buttons.
Supports both Offset and Scale modes with fully customizable increments.

✅ Why you’d want it
• Visually tweak your menus without fumbling with properties or using the default dragger
• Tweak UI layout pixel-by-pixel without dragging
• Shift + Arrow → Resize
• Ctrl + Arrow → Finer control (0.5x increment)
• Remembers your increment + mode settings
• Cleans itself up on reload (✅ singleton-safe)

No more fighting Studio’s native tools for simple UI adjustments.

Find it here:
https://devforum.roblox.com/t/nudge-tool-for-gui-objects/910079/18

TODO:
Add visual anchor editor page to the menu

[mellow wigeon]

Oh I asked for this

[faint canopy]

oh, really? where lol

[faint canopy]

ah, I thought you meant asked me

I find that functionality super useful. Idk why studio has no features for editing menus visually

[mellow wigeon]

Masol did say "Sounds like a plugin idea"

[faint canopy]

no snapping, no grid, no hide selection box, etcetc lol

[mellow wigeon]

Well they did show improved ui creation stuff before

For the new Studio

[faint canopy]

if you use my version let me know if you want any changes/additions. The original dev quit but I'll update mine for the foreseeable future - or just use the following in your studio command bar to make your own version

game:GetService("InsertService"):LoadAsset(PLUGIN_ID,true).Parent = game.Workspace

[faint canopy]

Added a secondary menu with a fit to parent & ability to convert ui elements from scale to offset and vice versa

[faint canopy]

& a UIAspectRatioConstraint solver button (Calculates the current aspect ratio of the selected UI object(s) and adds a UIAspectRatioConstraint with that value)

[gleaming tundra]

dude that already replaces the autoscale lite plugin 🔥

this is so sigma

[smoky wave]

add auto scale all button (or "include descendants" toggle)

[faint canopy]

it works for multiple objects selected

you can just select your entire menu and do that already

[faint canopy]

Wasn't aware of that plugin — but you're right, this definitely overlaps with it. One difference is that my Quick Size by Scale or Offset feature applies to every UI-related property I could find — not just Size and Position.

The offset/scale buttons calculate and update:
Size, Position
UICorner corner radius
ScrollingFrame canvas size
UIGridLayout cell size + padding
UITableLayout padding
UIPageLayout / UIListLayout padding
and UIPadding values

If there are other features you’d want to see, let me know — I'm consolidating all the UI tools I use into one plugin. It's already at ~840 lines of code and counting, vs the original around 200

[gleaming tundra]

omg thats so good

[gleaming tundra]

anchor point editor

some sort

would be awesome 😁

[faint canopy]

Similar to UI Tool's implementation?

sec can record it

[smoky wave]

yep. best feature

[gleaming tundra]

ye that looks great

[faint canopy]

kk I'll add that to the OP. when I come back to doing updates for this I will get that in (maybe 2 ish weeks)

[gleaming tundra]

👍

[faint canopy]

If you think of anything else it could use lmk - if I think it's useful I'll probably add it

[smoky wave]

ui plugin or micro adjuster?

[faint canopy]

this nudge tool is kind of just becoming my all in one - I want to consolidate all the ui stuff I use in other plugins into one

I hate swapping between lots of plugins and also wanted a cleaner implementation that doesn't get in the way

it's always ready, but not in the way

depending on features added/requested I'll likely need a secondary popup menu for next update

[smoky wave]

1. figma auto importer (the hardest todo)
2. icons packs and selection
3. gradient picker (and way to save it)
4. anchor editor (with saveposition option)
5. more options to change size of ui element (like building tools in 3d)
6. toggle studio selection (to get rid of annoying white border and yellow lines with its numbers)

[gleaming tundra]

thats a whole photshop

[gleaming tundra]

isnt there already a figma importer

even tho when i tried it, it didnt quite work for me

[smoky wave]

only one works fine and its paid.

[faint canopy]

for 6 I would have to just deselect the items, save to a table what you selected, then apply whatever you are doing with arrow keys and modifiers (shift/control) - can't get rid of that selection box with them selected (already tried)

can you explain what you mean in 5 a little better

4 added to the todo - just like increment I'll save the last value entered if you have saving enabled

for 3 that is simply like a color picker but for your previously made gradients? for example you can click a gradient, save it, then click another UI object - click the gradient in my widget to apply it? can you explain a little more if that isn't what you mean

2. I don't think I can do this unless there are freely licensed icons that I can use for this purpose. would have to research more, but it's already quite easy to search up flat icons so idk if that has a place - though you need to apply pixelfix yourself

1 idk what figma is and would have to look more at what it does. If it's converting essentially a flat image into a UI - no

[smoky wave]

about 6th - it possible.

one sec ill show

[gleaming tundra]

kenny's icons are free i think?

figma is software for ui design

its quite a whole lot better than roblox ui's editor

[gleaming tundra]

what is that plugin you're using

[smoky wave]

custom thing

[faint canopy]

needs to allow me to use it in my work which distributes it - even free stuff typically doesn't allow this

[faint canopy]

I'm not sure what method they used to do that - could you share what plugin it is?

[gleaming tundra]

well this plugin uses it

[faint canopy]

annoying bot

[faint canopy]

I looked it up and Kenney's icon pack is actually fully copyright free

I could add those

but there's not a whole lot

https://kenney.nl/assets?search=icon&sort=update

[gleaming tundra]

hey its something

[faint canopy]

doesn't feel worth my time to add - if you can find a more expansive, high quality, and copyright free (distribution rights etc) then I would be more likely

only 160 ish icons

[gleaming tundra]

there is a ton of "material icons" as well

in the plugin that i showed

these

[smoky wave]

7. convert feature. to convert any gui based object into another one.

[faint canopy]

Can you share the plugin with the toggle studio selection - or if it is yours can you explain how you accomplished it?

[smoky wave]

already did. check your dms

[faint canopy]

like textbutton to image button? what would you want to convert and how so

[faint canopy]

ah, didn't notice that - ty

[gleaming tundra]

basically reclass

[smoky wave]

oof...

[gleaming tundra]

?

[smoky wave]

elttob's version?

[gleaming tundra]

its modified a bit

not by me*

cuz there was annoying issue where you do ctrl z and all children are gone

[smoky wave]

um i dont think it should be ever posted here

cuz its paid plugin

https://elttob.itch.io/reclass

[gleaming tundra]

no it was released for free as a lite version

[smoky wave]

oh sry then. didn't see it

[faint canopy]

New feature - will find an icon and add shortly - allows you to hide selection

[gleaming tundra]

how did you add that

[faint canopy]

@smoky wave shared with me that these are objects in coregui - made a listener to see what changes in coregui when I click an element then used that to determine which elements to hide - unfortunately I can't make this connection based so while active there's just a constant loop running

[faint canopy]

will be in the plugin soon, so you can just download the source code using:

local InsertService = game:GetService("InsertService")

local model = InsertService:LoadAsset(6053256962, true)

-- Automatically name it based on its first child or asset content
local assetContent = model:GetChildren()[1]
if assetContent then
    model.Name = assetContent.Name
end

model.Parent = workspace

too long to share on discord and im too lazy to upload as text file

[gleaming tundra]

how do you actually deselect gui like that

[faint canopy]

code is above

im just hiding the selection handles in coregui on a loop

[gleaming tundra]

oh there is selection handles

https://tenor.com/view/the-rock-understands-the-rock-the-rock2022-rock-gif-25109449

[faint canopy]

-- Core GUI Listener
local CoreGui = game:GetService("CoreGui")

local seen = {}
for _, inst in ipairs(CoreGui:GetDescendants()) do
    seen[inst] = true
end

print("[Listener] Watching CoreGui for new elements...")

local function onAdded()
    for _, inst in ipairs(CoreGui:GetDescendants()) do
        if not seen[inst] then
            seen[inst] = true
            print("→ New CoreGui element:", inst:GetFullName(), "| Class:", inst.ClassName, "| Parent:", inst.Parent and inst.Parent:GetFullName())
        end
    end
end

local running = true

task.spawn(function()
    while running do
        onAdded()
        task.wait(0.1)
    end
end)

[gleaming tundra]

https://tenor.com/view/the-rock-understands-the-rock-the-rock2022-rock-gif-25109449

[faint canopy]

Update is now live
Changes:
Fixed issue where UICorner, UIPadding, and other childed UI modifiers weren't properly converted from scale to offset & vice versa
Added feature to hide/show Studio's UI Selection Box & other selection decoration
Added frame to widget for arrows so they don't move awkwardly if you don't keep the widget a square

[faint canopy]

Just realized I didn't respond to this but I personally don't have a use for such feature. if it's not something I will personally use it has to be relatively small in scope for me to consider it. Reclass seems to work well, and $5 is reasonable if that's a tool you value. It looks quite expansive and also just seems like a tedious thing to recreate for no payoff

[smoky wave]

descendantAdded wouldn't work sadly... :((

[faint canopy]

I was running that in studio console to track core gui updates

might not work properly with plugin access

In my implementation I am manually iterating over all descendants, checking if their name matches, (ResizeHandle, ResizeHandleDropShadow, DistanceLine, DistanceEnd, UIEditorValueBox, UIEditorResizeHandleParent) then setting them to visible false

not necessarily the 'cleanest' solution but it's not very expensive either so I figure it's fine

[faint canopy]

Updated again with a few small fixes
most notably adding changehistory waypoints to the UI buttons (I was only doing this for arrow key before)

[gleaming tundra]

sometimes is handy but ye doesnt worth the trouble of adding it

[faint canopy]

I renamed my version of this project to uiSnap to help avoid any confusion with the original tool.

While the original focused solely on moving UI with arrow keys, uiSnap has grown quite a bit — it's now around 1,000 lines (compared to the original's 200), fully rewritten, modular, and packed with new features.

I have no plans to monetize this project — it’s just something I’ve been building to improve my workflow and share with others.

If you run into any issues or have ideas for improvements, feel free to reach out — I'd love to hear your feedback! 💬

Move UI with Arrow Keys – uiSnap

[faint canopy]

When designing UI for Roblox, it's best to work in Device mode to get a more accurate preview of how your interface will look across different screen sizes.

To enable this:

1. Go to the Test tab in Studio.
2. Click Device, then select a resolution like HD 720 or HD 1080.
3. In the second dropdown, choose Actual Resolution — this gives a more realistic representation of how your UI will appear on actual screens.

💡 Personal tip: I prefer using HD 720 — it fits nicely within a 1080p monitor, allowing me to see the entire screen without needing to zoom or constantly pan around. Only minor adjustments are needed, and it’s still close enough to higher resolutions for practical design work.

These device presets are also great for testing how your UI looks on different devices — mobile, tablet, and desktop — so you can catch layout issues early.

🛠️ Pro Tip: Design in Offset First, Then Convert to Scale
A good workflow for Roblox UI:

• Start your layout using Offset values (pixels).
  • This gives you fine control over positioning, sizing, and alignment.
  • It’s faster to iterate and visually line things up without dealing with decimal percentages.
  • Once your layout looks good, convert elements to use Scale (percentages).
  • This ensures your UI adapts properly across all screen sizes and resolutions.
  • It’s essential for maintaining consistency across devices, especially in mobile games.

Roblox doesn't handle responsive design automatically — you need to use Scale properly to make your UI actually responsive.

✅ Summary:

• Use Device Mode with Actual Resolution for realistic previews.
• HD 720 is a great base resolution for design on a 1080p monitor.
• Design in Offset for ease of use, then convert to Scale for cross-device accuracy.