Documentation

How to use Bloxig

Bloxig connects Figma and Roblox Studio through a three-step pipeline. This page explains every step.

01

Get your API token

After signing up, go to your Dashboard and click Reveal next to your API token. This token authenticates both plugins.

Or via terminal:
curl -X POST http://localhost:3000/api/token \
-H "Content-Type: application/json" \
-d '{"email":"you@example.com","password":"yourpassword"}'
02

Export from Figma

Open the Bloxig plugin inside Figma. Select any Frame or Component in your design, paste your API token, and click Export to Roblox.

1 Select a Frame or Component in Figma
2 Open Plugins → Bloxig
3 Paste your API token
4 Click "Export to Roblox"
5 Copy the Project ID shown in your dashboard
03

Import in Roblox Studio

In Roblox Studio, open the Bloxig plugin from the toolbar. Paste your API token and Project ID, click Preview Import to see what will change, then Confirm to build the UI.

Import Preview

[+] New elements that will be created
[~] Existing elements that will be updated
[=] Elements already in sync — no changes

Smart Merge — your scripts are safe

Every element Bloxig creates gets a hidden Figblox_ID attribute. When you re-import after a design change, Bloxig diffs by ID and only updates visual properties — never your LocalScript or ModuleScript children.

if existing_element then
update(Size, Position, Color) -- visual only
-- LocalScript preserved ✓
else
create_new_element()
end

Supported Roblox GUI objects

Bloxig supports all 22 core Roblox GUI objects — the most complete coverage of any Figma-to-Roblox tool.

● Frame
● TextLabel
● ImageLabel
● TextButton
● ImageButton
● TextBox
● ScrollingFrame
● CanvasGroup
● ViewportFrame
● UIGradient
● UICorner
● UIStroke
● UIListLayout
● UIGridLayout
● UIPageLayout
● UITableLayout
● UIPadding
● UIAspectRatioConstraint
● UIFlexItem
● UIScale
● UISizeConstraint

FAQ

Does re-importing delete my scripts?

No. Smart Merge only updates visual properties. Your LocalScripts and ModuleScripts are never touched.

Why does the UI look slightly different from Figma?

Roblox has a different font system and rendering engine. Some fonts are approximated. Images require uploading to Roblox first.

Does it work on mobile screen sizes?

Yes. All dimensions are converted to UDim2 Scale relative to the parent frame, so the UI adapts to different screen sizes automatically.

What is the Free tier limit?

3 active projects. Upgrade to Pro for unlimited projects and marketplace access.