Your Figma UI,
minus the painful part.
Design in Figma. Build in Roblox.
When you update your design and export again, Figblox merges the new changes instead of replacing everything. Layout changes from Figma can update in Studio while edits you made in Roblox can stay intact.
Install the Figblox plugin from the Figma Community.
Install the Figblox plugin from the Roblox Creator Store in Studio.
Figma Plugin
Roblox Studio Plugin
For best results, use one clean root frame in Figma that matches a Roblox device emulator size, such as 1920 × 1080.
Basic flow
Design your UI in Figma.
Export it with Figblox.
Paste the JSON into the Roblox plugin.
Click Import to open Preview.
Review the changes, then click Confirm.
Use this format:
.prefix Layer Name
The text after the last prefix becomes the layer name in Roblox.
Example: .textbutton Shop creates a TextButton named Shop.
No prefix needed
Some Figma layers already export to the right Roblox type on their own.
Text exports as a TextLabel
Frames, groups, components, instances, and plain rectangles export as a Frame
Vectors, shapes, and image-filled frames or rectangles export as an ImageLabel
Anything else exports as a Frame by default
Corners, strokes, gradients, auto layout, padding, and similar Figma properties can also create Roblox UI objects automatically, like UICorner, UIStroke, UIGradient, UIListLayout, UIPadding, and UIAspectRatioConstraint.
Object prefixes
.frame Creates a Frame
.textlabel Creates a TextLabel
.textbutton Creates a TextButton
.textbox Creates a TextBox
.imagelabel Creates an ImageLabel
.imagebutton Creates an ImageButton
.imageframe Creates an ImageLabel
.scrollingframe or .scrollv Creates a vertical ScrollingFrame
.scrollingframex or .scrollh Creates a horizontal ScrollingFrame
.scrollviewport Explicit scroll viewport tag
.viewportframe Creates a ViewportFrame
.canvas or .canvasgroup Creates a CanvasGroup
Other prefixes
.gray or .grayscale Exports a grayscale PNG
.hover Marks the layer as Hover
.clicked or .pressed Marks the layer as Pressed
.toggled Marks the layer as Toggled
.disabled Marks the layer as Disabled
.scrollclip or .scrollviewport Marks a frame as the clipping child inside a scroll container
.raster Renders the layer to a PNG
.parent Makes the tagged child become the Roblox parent for its group
.ignore Skips the layer during export
.lock Applies lock behavior and can be combined with other prefixes
Combining prefixes
You can use more than one prefix on the same layer.
Figblox reads them from left to right.
If you use more than one object prefix, the last one is used.
If you use more than one state prefix, the last one is used.
For scrolling frames, .scrollh or .scrollingframex sets horizontal scrolling, and .scrollv or .scrollingframe sets vertical scrolling. If both appear, the later one is used.
Parent override
Use .parent on the direct child that should become the Roblox parent.
For example:
.parent .imagebutton Background
If that child is inside a group named Promote, Figblox makes it the parent and puts the other children inside it instead of creating an extra Frame.
Examples
.textlabel Health Bar
.imagebutton Play Button
.scrollingframe Leaderboard
.gray .imagelabel Title
.pressed .imagelabel OK
.gray .scrollh .raster Card
Scroll containers
To make a scroll container, use a frame with overflow set to Vertical, Horizontal, or Both in Figma. Figblox will detect it automatically.
You can also use .scrollingframe if you want to mark the frame yourself.
The scroll frame should have a fixed size, not Hug. Clip content should be turned on, and the content inside should be larger than the frame so there is something to scroll.
Content can go directly inside the scroll frame. You do not need a separate viewport wrapper.
Example
SlotScroll → overflow in Prototype
Content
Slot 1
Slot 2
Slot 3
Auto layout
When a frame uses auto layout in Figma, Figblox creates a Roblox layout object automatically.
Vertical auto layout creates a UIListLayout.
Horizontal auto layout creates a UIListLayout.
Auto layout with wrap creates a UIGridLayout.
Figblox can also create UIPadding when padding is used in Figma.
Spacing, alignment, padding, and layout direction are carried over from Figma.
Children inside auto layout frames are positioned by the Roblox layout object instead of keeping manual positions. Children set to absolute positioning in Figma keep their own positions.
1. Layers with .raster in the name export as PNG files
2. Image fills in Figma are included automatically
All images are bundled into a ZIP file when you export.
If images or .raster layers share the same name in Figma, Figblox exports them once and reuses that asset anywhere that name appears.
Importing images into Roblox
For raster and image layers, Roblox still needs real uploaded image or decal assets available to link.
The cleanest flow is to keep those uploaded assets available in the expected Loaded folder and naming structure so Figblox can match them by imageName.
If a matching image asset is available, Figblox links it automatically during import. If not, the UI still imports, but that image slot will stay unlinked until the asset is available.
Re-importing images
If you make changes to a layer marked with .raster, re-export the updated JSON and images from Figma.
If the matching Roblox image asset is already available with the correct name, Figblox can link it automatically on the next import. If not, upload or insert the new asset, then run Link Images so Figblox can match and replace the old one.
Some layers work better as PNG images instead. Use raster for image fills, gradients, blur, glow, vector shapes, or layered visual effects that Roblox cannot recreate cleanly.
Make Raster
Select a layer and click Make Raster. Figblox adds the .raster prefix and looks for matching layers on the page so they can be tagged too.
Clear Raster
Select a tagged layer and click Clear Raster. Figblox removes the .raster prefix and clears matching tagged layers too. If you select a frame or group, Figblox can also clear tagged layers inside it.
How matching works
Figblox looks at the layer name, aspect ratio, and fill type to find layers that are likely to be the same element.
It also handles a few cases automatically. Generic Figma names like Rectangle or Frame are not matched page-wide. Rotated layers are not auto-matched. Read-only layers inside component instances are skipped.
Status messages
After each action, Figblox shows a short message such as:
marked 6
marked 3, 2 already tagged
cleared 6
already marked
generic name, marked selected only
rotated, marked selected only
no raster layers found inside
When to use raster
Use raster for image fills, gradients, blur, glow, vector shapes, boolean operations, or stacked visual effects.
You usually do not need raster for solid-color rectangles, layout frames, or text layers.
Copy the JSON from the Figma plugin.
Open the Roblox plugin.
Paste the JSON.
Click Import.
The first click opens Preview. Preview is the source of truth before anything is created or updated.
[+] New layer
[~] Changed in Figma
[=] Already in sync
Review the tree, then click Confirm.
What Confirm does
When you confirm an import, Figblox now handles the normal tool chain automatically.
It imports or merges the JSON.
It links images when matching assets are available.
It applies aspect handling.
It applies To Scale.
It applies Lock Text.
It applies Lock Stroke.
Re-importing
After making changes in Figma, export again, paste the new JSON into the Roblox plugin, click Import to open Preview, then click Confirm.
If everything shows [=], nothing meaningful changed.
If there are [~] rows, Confirm updates those matching layers.
If there are [+] rows, Confirm creates the new layers.
Remove deleted layers
If you want Roblox layers removed when they no longer exist in Figma, enable Remove deleted layers on import before confirming.
Converts position and size values from pixels to percentages so the UI works better across screen sizes.
Lock Text
Keeps text from resizing with the UI.
Lock Stroke
Keeps UIStroke thickness from scaling with the UI.
Link Images
Renames imported Decals and links them to the correct image objects.
Reset Tools
Removes Figblox tool state so you can recover, clean up, or rerun tools manually if needed.
Inspector
Shows a read-only tree of everything in StarterGui.
Normal workflow
You do not need to run To Scale, Lock Text, or Lock Stroke manually after every import or re-import anymore. Confirming an import handles that automatically.
Use Reset Tools only when you intentionally want to remove tool state, rerun tools manually, or clean up a bad imported state.
Turns a Frame or ImageLabel into a clickable button and keeps the children.
Make TextBox
Turns a TextLabel into an editable text field.
Make ScrollView
Turns a Frame into a ScrollingFrame and keeps the children as scrollable content.
Make Toggle
Turns a Frame into a toggle if it has two child frames named On and Off. Figblox adds a script that swaps between those states when clicked.
Use one clean root frame, ideally a Roblox device emulator size like 1920 × 1080. Keep major UI areas as Frames. Use Groups only when you actually want the contents bundled or rasterized.
Use prefixes intentionally.
.raster for anything Roblox cannot reproduce well, such as masks, heavy shadows, blur, complex gradients, or layered effects.
.parent when one visual layer should become the parent container for the other layers inside that group.
.imagebutton, .textbutton, .textbox, .scrollingframe, and similar prefixes when you want a specific Roblox class.
2. Export from Figblox
Click Export. If the compatibility panel appears, only rasterize the things that need rasterizing. Groups should usually be rasterized when the whole visual chunk should become one image. Text you want editable should stay outside the raster group.
Export the JSON and images. For best results, keep the root frame close to the Roblox viewport target.
3. Import in Studio
Paste the JSON and click Import. This opens Preview.
Read the preview.
[+] means Figblox will create something new.
[~] means Figblox will update something.
[=] means it is already in sync.
Then click Confirm.
On import, Figblox now automatically imports or merges the JSON, links images when matching assets are available, applies aspect handling, applies To Scale, applies Lock Text, and applies Lock Stroke.
The normal workflow is now:
Export from Figma → Preview in Studio → Confirm Import
4. Image assets
For raster and image layers, Roblox still needs real uploaded image or decal assets available to link. The cleanest flow is to keep those assets available in the expected Loaded folder and naming structure so Figblox can match by imageName.
If the image exists and the name matches, linking should be automatic. If not, the UI still imports, but that image slot will need the asset available before it can link.
5. Re-import workflow
When you change the Figma design, export the updated JSON and images, paste the new JSON into Figblox, click Import to open Preview, then confirm the changes you want to apply.
If everything is [=], nothing meaningful changed.
If there are [~] rows, Confirm updates only those matching layers.
If there are [+] rows, Confirm creates the new layers.
You do not need to run To Scale, Lock Text, or Lock Stroke manually after every re-import anymore.
6. When to use Reset Tools
Reset Tools is now more of a recovery or cleanup button, not part of the normal workflow.
Use it only when you intentionally want to remove Figblox tool state, need to rerun tools manually, or something got into a bad imported state.
Do not use Reset Tools as a normal step between re-imports.
The ideal loop is simple:
Figma changes → Export → Studio Preview → Confirm → Done
No. If there is no prefix, Figblox creates a Frame by default.
What happens if I delete something in Figma?
It stays in Roblox unless you enable Remove deleted layers on import.
Can I edit the UI in Studio after importing?
Yes. Figblox updates what changed in Figma and can leave other Studio edits alone.
Why are my images not showing up?
Raster and image layers need matching Roblox image or decal assets available to link. If the asset exists and the name matches, Figblox can link it automatically during import.
Do I still need to run To Scale, Lock Text, or Lock Stroke manually?
No. Confirming an import now handles those automatically as part of the normal workflow.
When should I use Reset Tools?
Only when you want to remove Figblox tool state, rerun tools manually, or clean up a bad imported state.
Can I use Figblox for multiple games?
Yes. Each ScreenGui is managed separately.
What if something imports wrong?
Add .raster to that layer in Figma and export it as an image instead.