UI Wireframe & Mockup Tool - Studio v1.0

UI Wireframe & Mockup Tool
A developer tool plugin for Roblox Studio. Rapidly prototype UI layouts with placeholder frames, snap-to-grid positioning, alignment tools, and responsive scale conversion — then export a clean ScreenGui ready for scripting.

Like a mini Figma inside Studio.

━━━ Features ━━━

Quick Add Elements

• Add Frames, Text Labels, Buttons, and Image Placeholders with one click
• Smart parenting: select a Frame first and new elements are added inside it as children
• Custom frame color with hex input and 8 preset colors
• Each element gets an auto-label tag for easy identification

Spawn Position Picker

• 3x3 visual grid to choose where new frames appear on screen
• Click center and frames spawn dead center with proper anchor
• Top-left, top-right, bottom-center — any of 9 positions
• Anchor point auto-updates to match, or set custom values manually

Anchor Point Control

• Set custom AnchorPoint (X, Y) for all new frames
• Syncs with spawn position picker
• Essential for responsive centered layouts

Grid & Snap

• Configurable grid size in pixels
• Snap to grid toggle for clean positioning
• Visible grid overlay rendered in the ScreenGui
• Adjustable grid opacity

Alignment (select 2+ frames)

• Align Left / Center / Right
• Align Top / Middle / Bottom
• Distribute Horizontally (3+ frames, even spacing)
• Distribute Vertically (3+ frames)
• Match Size — set all selected to the same size as the first

Offset ↔ Scale Conversion

• Convert selected frames from Offset (pixels) to Scale (proportional)
• Convert back from Scale to Offset
• One-click "Convert All" for the entire project
• Configurable reference resolution (default 1920x1080)
• Safe re-click protection — already-converted frames are skipped
• Properly handles mixed Scale+Offset values and nested frames

Export

• Export to StarterGui as a clean ScreenGui
• Wireframe labels and grid overlay are automatically stripped
• Exported GUI is ready for scripting — no cleanup needed

Frame Settings

• Default width, height, corner radius, transparency
• All customizable per session

━━━ Why This Plugin? ━━━

• Rapid prototyping — build a full UI layout in minutes, not hours
• Responsive-first — convert to Scale for mobile/tablet/desktop compatibility
• Clean export — no leftover labels or debug elements in the final GUI
• Full undo support — Ctrl+Z works on every action
• Dockable widget — floats or docks into Studio's panel system
• Single script — lightweight, no dependencies

━━━ Workflow ━━━

1. Open the plugin from the toolbar
2. Pick a spawn position (center, top-left, etc.)
3. Click Quick Add to create placeholder elements
4. Select a Frame to add children inside it
5. Use alignment tools to line everything up
6. Convert Offset to Scale for responsive layouts
7. Export to StarterGui — done, ready to script

━━━ Installation ━━━

Method A: Local Plugins Folder
1. Save the .rbxmx to your Plugins folder:
Windows: %LOCALAPPDATA%\Roblox\Plugins
Mac: ~/Documents/Roblox/Plugins
2. Restart Roblox Studio
3. Click "UI Wireframe" in the toolbar

Method B: Insert into Studio
1. Drag the .rbxmx into Roblox Studio
2. Move the Script into your Plugins folder in Explorer
3. Reload plugins

━━━ What's Included ━━━

• UIWireframe (Script) — the complete plugin
• README — installation guide and feature overview

━━━ Support ━━━

Join our Discord: https://discord.gg/f6q9WpKB
Or message coreshun on BuiltByBit.