How to Use

The Preview Panel

When you open FigBloxUI, you’ll see:

• Sections Sidebar (left) — All top-level frames on your current page
• Preview (center) — Interactive preview of the selected frame
• Assign Bar (bottom) — Override Roblox classes for selected elements

Selecting Elements

• Click an element in the preview to select it
• Shift+Click to add to selection
• Drag to marquee-select multiple elements
• Ctrl/Cmd+A to select all
• Double-click to drill into a nested frame

Assigning Roblox Classes

By default, FigBloxUI auto-detects classes:

• Frames → Frame
• Text → TextLabel
• Buttons (by name or click reaction) → TextButton / ImageButton
• Nodes with image fills → ImageLabel

To override:

1. Select one or more elements
2. Click a class button in the Assign Bar
3. The override is applied immediately (visible as colored border)

Available Classes

Class	Use For
ImageButton	Clickable images
TextLabel	Read-only text
ImageLabel	Decorative images
TextButton	Clickable text
TextBox	Text input fields
ScrollingFrame	Scrollable containers
ViewportFrame	3D viewports
CanvasGroup	Group transparency
Frame	Regular containers
Exclude	Skip this element entirely

Image Preview

After clicking Send, if your design contains images, you’ll see the Image Preview panel:

• Rename images by editing the text field
• Skip images by clicking the × button
• Deduplicate by dragging one card onto another (shares the same upload)
• Click “Confirm & Send” to proceed

Studio Plugin — Paste Code

After exporting from Figma (Code or ZIP mode), open the Studio plugin and go to the Paste Code tab.

Paste & Auto-Scan

1. Paste your code in the text box
2. Plugin parses the code and auto-scans ServerStorage/Loaded for matching images
3. You’ll see the mapped count (e.g. “28/28 mapped”)
4. Click “Import” to build the ScreenGui

Image Manifest

The image list shows every image needed with a thumbnail and rbxassetid:

• Hover a row → corresponding elements in the ScreenGui highlight purple
• Click a row to pin the highlight (click elsewhere to deselect)
• Filled rows show the thumbnail + asset ID
• Empty rows show a placeholder — assign via Scan, Gallery drag, or manual input

Scan Button

Click “Scan” to search ServerStorage/Loaded for matching images:

• Matches by FigmaNodeId attribute (most precise)
• Falls back to Id attribute and name matching
• Only fills empty rows — won’t overwrite existing assignments
• Button is disabled when all images are mapped
• Shows a spinner overlay while scanning

Image Gallery

Below the manifest list, you’ll see the Image Gallery — a grid of all images in ServerStorage/Loaded:

• Hover any thumbnail to see its name
• Drag from the gallery onto any manifest row to assign
• Gallery auto-refreshes when images are added or removed from Loaded
• If no images found: “Asset Manager: select images → right-click → Insert”

Drag & Drop Between Rows

Grab an image thumbnail from one manifest row and drop it onto another:

• A ghost preview follows your cursor
• Drop to swap the asset ID
• If sizes differ, a popup asks “Apply size?” — Yes to match, No to keep original
• Right-click to cancel mid-drag

Clear & Undo

• Click × on any filled row to clear the assignment
• Click the undo arrow to restore the previous image + size
• Works for both drag-and-drop and clear actions
• Undo restores the original value, not the previous one

History Tab

Click “History” to see previous imports:

• Click any entry to reload its code
• Useful for going back to a previous version or re-importing in a different place

Options

• Use Figma Names — Enabled by default. Preserves original Figma layer names instead of generating smart names.
• Offset / Scaled — Toggle between pixel-based (Offset) and percentage-based (Scaled) sizing. Offset is great for fixed layouts, Scaled for responsive UI.
• Hide Duplicates — Hide merged duplicate images in the image panel for a cleaner view.