Documentation

How to use Bloxig

Bloxig turns a Figma frame into native Roblox Studio UI in four steps.

Connect your Roblox account

Go to API keys, find the Roblox account section and click Connect Roblox account. After you approve on Roblox, your design's images upload to your own Roblox account automatically on every import, in every Studio you connect. No Open Cloud key needed. Do this first. You can disconnect anytime from the same page.

Prefer not to connect? Paste an Open Cloud API key and your Roblox user ID into the plugin's image fields instead.

Connect the Figma plugin

Open the Bloxig plugin in Figma and click Connect Bloxig. Your browser opens a page showing a short code. Check it matches the one in the plugin, then click Approve. The plugin is connected. There is nothing to copy or paste.

1 Only approve a code you just requested yourself. If you did not click Connect, choose Deny.

2 Codes expire after 10 minutes and work once.

3 Prefer a key? Choose "Have an API key? Paste it" in the plugin and use one from the API keys page.

Export from Figma

Select the Frame you want in Roblox, run the Bloxig plugin and click Export to Roblox. The design appears on your dashboard as a project. Re-exporting the same frame updates that project.

1 Select a Frame in Figma

2 Open Plugins → Bloxig (connect it the first time)

3 Click "Export to Roblox"

4 It appears on your dashboard and in the Studio plugin's project list

Import in Roblox Studio

Install the Bloxig plugin from the Creator Store and open it from the Studio toolbar. The first time, click Connect Bloxig: the plugin shows a short code and an address. Open it, check the code matches and click Approve. Then pick your project, check the preview and click Import into Studio. The UI is built in StarterGui (or in the ScreenGui you selected). Images you imported before are reused instantly.

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 carries a hidden Figblox_ID. When you re-import after a design change, Bloxig matches elements by ID and updates their layout and look. If you regrouped layers in Figma, it moves them to their new parent. Your LocalScript and ModuleScript children are never touched, and elements you put inside your own containers stay where you put them.

if existing_element then

update(Size, Position, Colors, Text)

move_to_new_parent_if_regrouped()

-- your scripts preserved ✓

else

create_new_element()

end

What Bloxig creates

Native Roblox GUI objects, plus the modifiers that carry your corners, strokes, gradients and scaling. Artwork Roblox can't draw natively is uploaded as an image.

Objects

● Frame

● TextLabel

● TextButton

● TextBox

● ImageLabel

● ImageButton

● ScrollingFrame

● CanvasGroup

● ViewportFrame

Modifiers

● UICorner

● UIStroke

● UIGradient

● UIPadding

● UIGridLayout

● UIAspectRatioConstraint

● UITextSizeConstraint

FAQ

Do I need an API key?

Not for the Figma plugin: press Connect Bloxig and approve in your browser, with nothing to copy. The Roblox Studio plugin uses an API key: open API keys, click Create API key and copy it (it is shown once). The Figma plugin also accepts a pasted key if you prefer. Use one key per device and delete a key anytime from the API keys page.

Does re-importing delete my scripts?

No. Smart Merge updates the elements it created and never touches your LocalScripts or ModuleScripts.

Why do my images not show up?

Connect your Roblox account under API keys, in the Roblox account section. Images then upload automatically on import. Without a connection, paste an Open Cloud API key and your Roblox user ID into the plugin's image fields instead.

Why does the UI look slightly different from Figma?

Roblox renders fonts differently, so some text sits a few pixels off and shrinks to fit its box. Complex artwork Roblox can't draw natively (heavy effects, some vectors) is uploaded as an image instead of native objects.

Does it work on mobile screen sizes?

Yes. Positions and sizes are converted to UDim2 Scale relative to each parent, and the root frame keeps your design's aspect ratio, so the UI scales to any screen without stretching.

What are orphaned elements?

Elements you removed in Figma. Bloxig never deletes them automatically. It marks them, and "Remove Orphaned Elements" in the plugin deletes them when you choose to.

What do the plans include?

Plans are being finalized. See Pricing for the current options. Pricing →

Something isn't working

Check Studio's Output window for lines starting with [Bloxig], then contact us via the Support page and include them. Support →