Getting Started

Prerequisites

• Figma account (free or paid)
• Roblox Studio installed
• HTTP Requests enabled in Roblox Studio (Game Settings → Security → Allow HTTP Requests)

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

Step 3: Connect Your Roblox Account

1. Open the Figma plugin (Plugins → FigBloxUI)
2. You’ll be prompted to sign in with Roblox OAuth
3. This allows FigBloxUI to upload images to your Roblox account
4. You can revoke access anytime from Roblox account settings

Step 4: Make Your First Import

1. Select a frame in Figma
2. Open FigBloxUI plugin — the preview will show your selected frame
3. (Optional) Use the Assign Bar to override Roblox classes
4. Click “Send to Roblox”
5. Open Roblox Studio — your design will appear in StarterGui!

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