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:
- Select one or more elements
- Click a class button in the Assign Bar
- 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
Options
- Use Figma Names — Preserve original Figma layer names instead of generating smart names