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. The Structure tab next to it shows the tree your export will create
Assign Bar (bottom): Override Roblox classes for selected elements
Images panel (below the Assign Bar): Rename, skip or merge images before you export

Under the preview, Layout lets you keep the design’s own arrangement or arrange items as a Grid, with a maximum number of columns and column and row gaps. Scroll containers grow as items are added.

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
Select All under the preview selects everything, and Hide Classes hides the class tags drawn on the preview

With elements selected, the export button sends only those and updates them inside the ScreenGui you already imported. The line above the button shows what will be sent.

When a Send would land on a ScreenGui of the same name, the plugin asks what to do. Replace keeps one ScreenGui, and it keeps the existing import’s Offset or Scaled mode unless you confirm a change. Keep Both adds a new ScreenGui beside it (Name_copy, then Name_copy2), and each copy keeps its own mode. Cancel leaves Studio as it is. In Studio, Undo (Ctrl/Cmd+Z) removes a whole import in one step.

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

Structure Tab

Click Structure above the preview to see the tree your export will create, with Studio class icons, instance and image counts, and a badge on anything worth a look. Expand rows like the Studio Explorer, click a badged row to read why, or tick Issues only to hide the rest. The header sums it up: “3 images to check”, “2 fonts to check”, or “No issues found”. Change a layer’s class in the Assign Bar and the tree updates straight away.

Badges come in three kinds:

Image: this layer arrives as one image. Structure names the reason: a mask, a blend mode (rendered with its background), individual corner radii or corner smoothing, a skew, a gradient type Roblox does not have, several fills or several image layers, an image fill on a container, an effect such as blur, uneven or gradient borders, or a scroll area that holds only shapes. Text stays editable text in almost every case, even with emoji, a skew, a mask, an effect or _gray: it becomes an image only when you name the text layer itself with an image suffix such as _ImageLabel, or when it is part of a boolean shape or used as a mask. A drop shadow that a layer’s contents cast, such as a glow around an icon, becomes one image behind the layer while its layers stay editable. On a frame that clips, scrolls or has a layout, that shadow sits in a holder frame, so it is never cut off or laid out as an item. In Separate and Preserve layers a row can also say that only the layer’s own look becomes an image while its children stay separate.
Check: something to decide before you send. Text with layered fills, blended text whose color cannot be matched over what is behind it (it stays editable), text under a blended layer (moved above that layer’s image, or, when it cannot move, hidden under it with a tip), a blended layer that arrives without what is behind it or is drawn without blending (with a tip to group the blended layers with the layers behind them), a glow on the frame you send (it stays a native shadow and may look like a box, so send its parent to get the glow as an image), a text shadow (kept as a text copy behind it), a text look Roblox cannot draw, such as a blur, a soft shadow, a mask clip or a skew (the text stays editable, and the row names what is dropped or drawn a little differently), a border on a frame that a child rectangle already styles, an absolutely placed layer inside an auto-layout that will become a list item, a grid that keeps Figma positions so items you add later need placing by hand, or a scroll area whose content does not extend past it.
Font: a font Roblox does not have (replaced by BuilderSans), a close match, or a font Roblox draws smaller (the size is compensated).

Scroll areas. If a scroll area is bigger than the panel it sits in, its row shows Fix. Hover it to see the new size, then click to fit the exported scroll area to that panel. Your Figma layers stay where they are, and the choice is saved in the file. Click Reset to go back to the Figma size. If you later change the layout, Structure tells you the saved fix no longer matches.

Other actions. Select a row and pick a class in the Assign Bar to override it. Report bug sends the section’s layer structure with your notes and screenshots and gives you a code to quote on Discord. If an export had to pause because a temporary layer could not be removed, a bar under the activity log lists it with Show layer, Check again and Remove copy…, which shows what it will remove and asks before deleting it. You can Undo in Figma.

Images Panel

The Images panel below the Assign Bar lists every image your export will upload, before you send:

Rename images by editing the text field
Skip images by clicking the × button (↩ undoes it)
Merge duplicates by dragging one card onto another (they share one upload)

During a Send the panel fills in as each image is prepared (“Sending… 37 images collected”). When it finishes, the panel shows what was actually uploaded (“Sent · 123 images · 118 unique”), which can differ slightly from the preview. A card marked “×N backdrops” is a blended layer that uploads once for each background it sits on, so it matches Figma on every one.

With Separate and Preserve layers, a thumbnail shows a masked layer in full so you can tell it apart; the Send still clips it to its mask. Making the plugin window taller gives the extra height to this panel, and making it wider fits more images per row.

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

Paste your code in the text box
Plugin parses the code and auto-scans ServerStorage > Loaded (or Workspace / ReplicatedStorage if that’s where Asset Manager dropped them) for matching images
You’ll see the mapped count (e.g. “28/28 mapped”)
Click “Import” to build the ScreenGui

If the count reads “0/28 mapped” right after an Asset Manager upload, the images have not landed yet. Wait until the Import Queue shows every file as uploaded, click Scan, then Import again and choose Replace. Importing too early builds the right tree with empty images.

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 for matching images. It looks in ServerStorage > Loaded first, then falls back to Workspace and ReplicatedStorage roots in case Asset Manager dropped them there:

Matches by the Figma node ID stored inside the FigBloxUIData JSON attribute (most precise)
Falls back to Id attribute and name matching (resilient to Asset Manager name truncation on long filenames)
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 the plugin found (primarily ServerStorage > Loaded, or other locations if Asset Manager dropped them elsewhere):

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
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 “Also apply size from source?”: Yes, apply to match the source size, No to keep the current one
Right-click to cancel mid-drag

Clear & Undo

Click × on any filled row to clear the assignment
Click the undo arrow to bring back the image that was there before, at the size it had before the swap
Works for both drag-and-drop and clear actions

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

Settings compared

Every setting is remembered between sessions. Open Settings in the plugin to change most of them. A few sit on the main screen instead: Offset / Scaled beside the export mode buttons, Image owner above the export button, and Hide Duplicates in the Images panel.

Artwork layers

	Size of the import	Send time
Automatic (default)	Usually the smallest	Usually the fastest
Separate	Usually in between	Usually longer than Automatic
Preserve layers	Usually the largest	The first Send takes longer

Which to choose, and what arrives in Studio:

Automatic: choose it for a fast, light import of ordinary UI. Text, buttons with a label, layouts and scrolling lists stay editable, and artwork groups often arrive as one image. A decorative group with a mask arrives as one image with the mask built in. Names are tidied: the top frame is named Container, and suffixes such as _ScrollingFrame are dropped.
Separate: choose it to restyle panels, cards and lists in Studio without handling every decorative layer. The same parts stay editable, and each independent piece of artwork gets its own image. Decoration that only looks right together, such as a glow with its mask or the stripes on a button, arrives as one image. Masks on the parts that stay editable work as in Preserve layers. Your Figma names are kept, including the top frame’s.
Preserve layers: choose it to edit or animate individual pieces of artwork in Studio. It keeps more Figma layers and containers separate, retaining their names and stacking order, including the top frame’s name. Supported layers use native objects; unsupported looks use images, and some decoration is combined as described below. Circular and evenly rounded masks stay editable clips; most other masks are built into the images, and the mask layer stays in the tree, hidden. A decorative group with a blur or a blend mode of its own, and a rotated or flipped group, frame or component that holds only artwork with blends inside, arrive as one image, so they match Figma.

In Automatic and Separate, a button drawn only as artwork can still arrive as one image, like the close button in the sample below. In every mode, a scroll area named with _ScrollingFrame or _scroll, with no auto layout of its own and a full-size rounded or circular mask as its first layer, keeps its rounded edge, and everything inside stays editable and scrolls (see ScrollingFrame tips).

Blend modes. Roblox cannot blend, so in every mode, artwork that uses a blend mode such as Overlay or Multiply is drawn over what is behind it in Figma, with nothing to turn on. Blended shapes, bars and thin dividers arrive as images whose colors match Figma, even over see-through backgrounds, as long as that background stays as designed: if you recolor or hide it in Studio, the blended piece does not blend with the new one. Blended text stays editable text. Supported text colors can be mixed to match Figma when directly over one solid color. Some text gradients still keep their original colors even there: for example, a Difference blend or a gradient whose stops have different opacity. Structure flags blends that cannot be reproduced. Over an image or a gradient background, text keeps its original colors. Text under a blended layer is moved above that layer’s image so it stays visible, and Structure tells you when it cannot be. A few blends can still arrive without what is behind them, mostly in Preserve layers: a blended layer you send on its own; one inside a frame or group that has its own blend mode or an effect such as a shadow or a blur, or inside a frame below 100% opacity (the frame you send counts too); one that is rotated, flipped or scaled only because the group or frame around it is, when that group or frame also holds text, a button or other layers that stay editable; and the layers of a rotated frame you send. A frame or group with its own blend mode that also holds text, a button or other layers that stay editable is drawn without blending in every mode. A layer rotated on its own matches, and in Preserve layers a rotated, flipped or scaled group, frame or component that holds only artwork arrives as one image that matches. Structure points out most of these with a tip: put the blended layers and the layers behind them in a group of their own. In Automatic or Separate you can also add _image to the name of the frame that holds both the blended layer and what is behind it; any text inside stays editable on top. Blends make the first Send longer, because each blended layer is rendered up to two more times over what is behind it, and in Separate and Preserve layers these renders can take most of the Send. Sending again reuses the images that did not change.

In Separate and Preserve layers, some masks are also built into the images they clip, so masked artwork matches Figma. These two modes usually take longer to send, and a few masks and blends can still look slightly different, so check Structure before you send. Scaled imports in these two modes need Studio plugin 3.0.0.

Switching modes. Each mode builds its own tree in Studio. After you switch modes for a design you already imported, send the whole frame with Replace, then check scripts that find UI by name or path.

In a real design. We sent the same inventory panel (12 item slots, a header, a close button and an info panel) in all three modes. All text, the colors of the Equip Best, Equip and Delete buttons, the search bar and the scrolling grid (a ScrollingFrame with a UIGridLayout, 4 slots per row) stay editable in every mode. The artwork is where they differ:

Images: Automatic uses the fewest, Separate more, and Preserve layers the most.
Each slot card: in Automatic, one image with its two texts on top, shared by all 12 cards. In Separate and Preserve layers, an editable rounded background with its gradient and border, with the rest of its art as images.
Header art: one image in every mode, so the tilted header and its blends match Figma.
Close button: one image in Automatic and Separate. In Preserve layers it arrives in pieces, so you can recolor its diamond or move the X on its own.

Native shadows and corners

	On (default)	Off
Drop shadows	Editable UIShadow when the layer’s own filled box casts the shadow. A glow cast by the layer’s contents (around icons, rings or text, or from a frame with no fill) becomes one shadow image behind the layer, matching Figma, and the layers stay editable. A hard shadow on text becomes a matching text copy behind it	Flattened into images, matching Figma’s blur exactly
Corners with different radii	Editable UICorner values	Flattened into images

Clean image edges (Pixfix)

	On (default)	Off
Result	Removes dark halos around transparent edges such as rounded corners and soft shadows	Halos can show on rounded corners
Cost	Each unique image is processed on the FigBloxUI server, adding a few seconds on large exports	Nothing is processed

Offset and Scaled (the switch beside Live, Code and ZIP)

	Offset (default)	Scaled
Sizes	Pixels, exactly as in Figma	Percentages of the screen; the root keeps the Figma aspect ratio and fills the viewport
Choose it when	Fixed layouts that must match Figma pixel for pixel	Responsive UI for many screen sizes
In Studio	Replace keeps the mode of the existing import unless you confirm a change; every Keep Both copy keeps its own mode	Masked and clipped frames fill the screen (Studio plugin 3.0.0)

Export as SurfaceGui

Off (default): a ScreenGui in StarterGui. On: a SurfaceGui on a Part. Select a Part in Studio first to use it; with nothing selected, the plugin creates a new Part sized to your design, standing in front of the camera.

Image owner (Live and Code)

Chosen above the export button. Personal: images belong to your Roblox account. Group: images belong to that Group, and your role there must be allowed to create development items. There is no default; choose once and the plugin remembers it. Only the owners you allowed on the Roblox screen are listed, and Manage lets you allow Personal or more Groups. Changing the owner hides Copy Code until you export again, and each owner gets its own copy of every image.

Images uploaded to a Group only show in experiences that Group owns. If you import them into a place owned by your own account, Studio asks you to share access once before they render, so pick the owner that matches where the game lives.

Hide Duplicates

On by default in the Images panel: merged duplicate images are hidden for a cleaner view.

Plugin size

Full shows the sections sidebar on the left. Compact hides it for a narrower window.

Which settings should I use?

Clean image edges and Native shadows and corners start on, so images have clean edges and most shadows stay editable. While you iterate, turn off the settings that cost time, then turn them back on for the final Send. Choose the Artwork layers mode by how much of the artwork you will change in Studio: little of it (Automatic), the panels, cards and lists (Separate), or every piece (Preserve layers). Pick a mode per frame; one project can use all three.

Artwork layers

Automatic. You usually get the fastest Send and the lightest import, and your text, buttons with a label, layouts and scrolling lists stay editable. In our sample panel each slot card arrives as one image that all 12 cards share. You give up editing artwork piece by piece in Studio: a group that arrived as one image has to be changed in Figma and sent again. Use it for most UI, especially buttons, panels, menus and HUDs where the artwork is decoration.

Separate. You get editable panels, cards and lists with your Figma names, while decoration that only looks right together arrives as one image. In our sample panel every slot card keeps its rounded background, gradient and border, so you can give one card a gold look right in Studio. You usually pay with more objects and images than Automatic (they count toward the 1,000 images per Send), a Send that is usually longer, masks and blends that can look slightly different (check Structure), and a different tree if you re-import a design that was sent in another mode. Use it for inventories, shops and menus you will restyle in Studio when you do not need every decorative layer.

Preserve layers. You keep your Figma layers, names and stacking order, ready to animate or recolor: everything Roblox can draw stays an editable object, and only the rest arrives as images. In our sample panel even the close button arrives in pieces, so you can recolor its diamond or move the X on its own. You pay with a longer first Send, usually the most objects and images (they count toward the 1,000 images per Send), masks and blends that can look slightly different (check Structure), and a different tree if you re-import a design that was sent in another mode. Use it only for the frames you will edit or animate in Studio, such as character cards, icons that change color or scenes with moving parts.

Native shadows and corners

On. Corner radii stay editable in Studio. A shadow cast by a layer’s own filled box, such as a card’s, stays an editable shadow and uses no image quota; Roblox draws the blur its own way, so it can differ slightly from Figma. A shadow cast by a layer’s contents, such as a glow around an icon, a ring or text, arrives as one image behind the layer that matches Figma, while the layers stay editable. That image counts toward the images per Send and does not follow later edits to the layers. The frame you send always keeps a native shadow, and Structure warns when it may look like a box: send its parent to get the glow as an image. Keep it on.

Off. Artwork uses image fallbacks for shadows and corners, at the cost of editability. Ordinary text still stays editable, so unsupported text effects may be dropped and flagged in Structure. Turn it off only when an exact shadow matters more than editing, for example on key art.

Clean image edges (Pixfix)

On. Transparent edges come out clean, with no dark halo on rounded corners or soft shadows. Each unique image is processed on the FigBloxUI server, which adds a few seconds on large exports. Keep it on for the final Send.

Off. Faster, and nothing is processed. Fine while iterating.

Offset and Scaled

Offset. Sizes match Figma pixel for pixel, so the result is predictable and easy to line up in Studio. It does not adapt to the screen: a layout can overflow a small screen or look small on a large one. Use it for small elements anchored to the screen edges (HUDs, buttons, status bars) and when you will size things yourself in Studio.

Scaled. The design grows with the screen and keeps its proportions. Pixel sizes are not guaranteed, so text and icons get smaller on small screens. Use it for menus and pages that must fill the screen on many devices, such as shops, settings and loading screens.

Export as SurfaceGui

Only for UI that lives on a Part in the world, such as in-game screens, signs and boards. Select the Part in Studio before you send to put the UI on it; otherwise the plugin creates a new Part in front of the camera and you move it where you want. Leave it off for on-screen UI.

Image owner

Personal. Quick to set up. The images belong to your Roblox account, so they do not follow the project if you leave the team. Good for solo work and experiments.

Group. The images belong to the Group and stay with the game when members change. Your Group role must be allowed to create development items, and switching owners later means exporting again and uploading a new copy of every image. Choose it from the first Send for team projects and games published under a Group.

Quick picks

Situation	Settings
Iterating on a layout	Automatic, Clean image edges off
Final Send of ordinary UI	Automatic, Clean image edges on, Native shadows and corners on
A menu, shop or inventory you will restyle in Studio	Separate, review Structure before you send
A frame you will animate or recolor in Studio	Preserve layers, review Structure before you send
Key art where the shadow must match Figma	Automatic, Native shadows and corners off
Full-screen menu	Scaled
HUD and corner-anchored buttons	Offset