Getting Started

Prerequisites

• Figma account (free or paid)
• Roblox Studio installed
• HTTP Requests — only required for Live Mode (Experience Settings → Security → Allow HTTP Requests). ZIP and Code modes work without it.

Step 1: Install the Figma Plugin

1. Go to the FigBloxUI Figma Plugin page
2. Click “Install”
3. The plugin will appear in your Figma plugins list

Step 2: Install the Roblox Studio Plugin

1. Open FigBloxUI on Roblox Creator Marketplace
2. Click “Install”
3. The plugin will appear in your Studio toolbar

How to Update the Roblox Studio Plugin

1. Go to Plugins menu (top menu bar)
2. Click Manage Plugins
3. Find FigBloxUI in the list
4. Enable the Auto Update checkbox

Step 3: Choose Your Export Mode

FigBloxUI has 3 export modes. ZIP Mode is the default — no Roblox login needed.

ZIP Mode (Default — No Login)

1. Open the Figma plugin (Plugins → FigBloxUI)
2. Select a frame in Figma
3. Click “Export ZIP” → Download the ZIP file
4. Click “Copy Code”
5. Upload images from the ZIP to Roblox via Asset Manager (Game → Asset Manager)
6. In Asset Manager: select uploaded images → right-click → Insert
7. Images appear in ServerStorage → Loaded
8. Open Studio plugin → Go to Paste Code tab
9. Paste the code → Plugin auto-scans Loaded folder and matches images
10. If not all matched: drag from the Image Gallery below, or click “Scan”
11. Click “Import”

Code Mode (Roblox Login)

1. Open the Figma plugin → Log in with Roblox (plugin auto-switches to Code mode)
2. When prompted, grant permission to upload images to your Roblox account
3. Select a frame in Figma
4. Click “Export Code” → Wait for images to upload
5. Click “Copy Code”
6. Open Studio plugin → Go to Paste Code tab
7. Paste the code → All images are already mapped (asset IDs baked in)
8. Click “Import”

Live Mode (Real-time)

1. Open the Figma plugin → Log in with Roblox
2. When prompted, grant permission to upload images to your Roblox account
3. Open Studio plugin → Click “Connect”
4. Switch to Live mode in the Figma plugin
5. Select a frame → Click “Send to Roblox”
6. UI appears instantly in Studio viewport
7. Make changes in Figma → Send again → Updates in place

Note: Live Mode requires HTTP Requests enabled in game settings (Experience Settings → Security → Allow HTTP Requests).

Quick Comparison

	Live	Code	ZIP
Roblox Login	Yes	Yes	No
Studio Connected	Yes	No	No
Image Upload	Automatic	Automatic	Manual (Asset Manager)
HTTP Requests	Required	Not required	Not required
Best For	Rapid iteration	Sharing with team	Commission work

What Gets Converted

Figma Element	Roblox Instance
Frame/Group	Frame
Text	TextLabel
Vector shapes	ImageLabel (auto-exported as PNG)
Image fills	ImageLabel (auto-uploaded)
Buttons (detected)	TextButton / ImageButton
Auto Layout	UIListLayout + UIPadding
Corner Radius	UICorner
Stroke	UIStroke
Linear Gradient	UIGradient