Workflow

1. Design in Figma

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