Quickstart
- Connect. Open the GUIHelper plugin in Figma and connect your Roblox account once. Your browser opens – click Allow. No API keys needed.
- Convert. Select one frame and click Convert frame. The live simulation shows how it will look in Roblox.
- Tag. Click an element in the simulation (or select the layer in Figma) and pick tags below the preview.
- Create code. Images upload to your Roblox account and you get a 6-character code, valid for 24 hours and reusable.
- Import. In Roblox Studio open the GUIHelper toolbar button, paste the code and click Import. Your UI lands in StarterGui.
Live simulation
The preview behaves like the game: hovering plays hover animations, clicking runs actions like _close, and scrolling lists scroll.
- Mouse wheel zooms toward the cursor, dragging moves the view, a double-click on the background or Fit shows the whole design again. Over a scrolling list the wheel scrolls it – hold Ctrl to zoom there.
- Device sizes simulate desktop, laptop, tablet and phone screens.
- Restart replays entrance animations and brings back closed panels.
- With Live on, the preview updates whenever you change the design in Figma.
Layer tags
Add a suffix to a layer's name – GUIHelper reads it when converting. Tags are case-insensitive, stack freely and work in any order: Exit_close_smooth_magnet equals Exit_magnet_smooth_close. In Roblox the element is simply called Exit.
Actions with a target (_open:Name, _toggle:Name) go last – the target runs to the end of the name. A layer named Menu_open is not an action, so ordinary names never trigger behaviour by accident.
Type tags
| Tag | What it does |
|---|---|
| _button | Makes the layer clickable (ImageButton / TextButton) and darkens it while pressed. Settings: press dim, hover dim. |
| _scroll | Turns the frame into a ScrollingFrame. Settings: direction (vertical / horizontal), scrollbar thickness (0 hides it) and each edge of the scroll window – positive grows it past the layer, negative pulls the edge in. |
| _grid | Card grid: the children become a real UIGridLayout with the exact columns, gaps and padding from your design. Cards must share one size and even spacing. Combine with _scroll for a growing inventory. |
| _frame | Keeps the layer a real Frame instead of an image, even with “Frames as images” on. Effects Roblox can't draw are dropped – the warning names them. |
| _image | Bakes the layer into a pixel-exact image. Aliases: _img, _lock, a # or img: prefix. |
| _txt | Keeps text live even when it has paints or effects Roblox text can't draw, or when it wraps. |
| _fit | Text uses TextScaled and fits its box – for scores and values that change in game. |
| _canvas | Imports the frame as a CanvasGroup (group transparency). |
| _aspect | Locks the element's aspect ratio (UIAspectRatioConstraint). |
| _nodim | This layer is not darkened when its button is pressed. |
| _ignore | Skips the layer. |
Actions
Actions wire up behaviour with zero scripting. Any action makes the layer a button.
| Tag | What it does |
|---|---|
| _close | Click hides the panel it sits in – the nearest parent tagged _panel – or the whole GUI. |
| _open:Shop | Click shows the element or GUI named Shop. |
| _toggle:Shop | Click opens or closes it. |
| _panel | Marks a frame as a closable panel – the target for close, open and toggle. |
Animations
Animations stack with each other and with every other tag. In Studio each setting is an attribute on the element (tag + setting, e.g. SpinSpeed, MagnetPull) that you can change after importing.
| Tag | What it does | Settings |
|---|---|---|
| _smooth | Grows on hover and squishes on press. | Hover, Press, Time |
| _magnet | Leans toward the cursor when it comes near and snaps back like rubber. | Pull, Radius |
| _up | Lifts while hovered. Makes the layer a button. | Distance, Time |
| _turn | Turns while hovered (negative = left). Makes the layer a button. | Angle, Time |
| _squish | Flattens wide under the press and springs back. Makes the layer a button. | Amount, Time |
| _lean | Tilts when the button around it is hovered – without becoming a button itself. | Angle, Time |
| _spin | Endless rotation – loaders, gears, rays (degrees per second, negative = counter-clockwise). | Speed |
| _float | Gentle levitation along a compass direction (0 = up). | Angle, Distance, Speed |
| _pulse | A heartbeat that pulls the eye to BUY / CLAIM. | Strength, Speed |
| _blink | Fades out and back in forever, children included. | Visible, Hidden, Fade, Delay |
| _jelly | Idle wobble, randomised per layer so grids never wobble in step. | Angle, Speed |
| _wiggle | Rings like a bell every few seconds. | Angle, Every |
| _shake | A short shudder every few seconds – “unclaimed reward, look here”. | Distance, Burst, Every |
| _pop | Springs in with an overshoot every time it appears (also after _open). | Start, Time |
| _rays | For a sunburst behind a reward: slow spin plus gentle pulse. | Speed, Depth |
| _drift | Endless scrolling texture. Give the layer a Tile image fill in Figma. | Speed, Angle |
| _shiny | Looping shine: draw a shine strip inside the button and tag the strip. The button clips it. | Time, Pause |
| _glint | Like shiny, but one sweep when the cursor enters the button. The strip may stay hidden in Figma. | Time |
Scroll & grid
A Figma group always shrink-wraps its content, so a grouped list arrives as tall as all of its cards – nothing would scroll. Use the scroll window edges in the settings to pull an edge in (negative values) or grow the window past the layer (positive values).
With _grid the cards must have the same size and even spacing and fill the grid row by row. If they don't, GUIHelper warns and imports them as drawn. You can also tag the outer group while the cards sit in a window frame inside it – the tag drops down to that frame automatically.
Text & fonts
Plain text stays a live, editable TextLabel with stroke, linear gradient and drop shadow. If the font doesn't exist on Roblox, the closest Roblox font is used and the plugin tells you. Want it pixel-exact instead? Tag the layer _image, or turn on “Foreign fonts as images”.
Text that wraps over several lines is baked into an image by default so it looks identical; with _txt it stays a live label with TextWrapped.
Images
Anything Roblox can't draw natively – image fills, shadows, blurs, several stacked fills, complex masks, vector shapes – becomes an image, cut to exactly the area it covers so it never gets squeezed. With “Frames as images” on, colours and gradients become images too. Images upload to your own Roblox account; identical images are uploaded once and reused.
A brand-new upload can render blank in Studio for a few minutes while Roblox moderation approves it. Re-imports reuse approved images instantly.
In Roblox Studio
- The UI lands in StarterGui, centred and aspect-locked, with positions and sizes in Scale.
- A LocalScript named GUIHelper rescales text, corners and strokes per screen size and plays all animations and actions.
- Roblox never runs LocalScripts in edit mode – press Play to see effects. In the editor the design stands still.
- Every effect setting is an attribute on its element. Change it there to fine-tune after importing.
Troubleshooting
Studio shows “No response” when importing
Studio asks once for permission to let GUIHelper access the internet. That window sometimes opens behind Studio – allow it and import again. You can also enable it under Plugins → Manage Plugins.
Images are blank
New uploads wait for Roblox moderation – usually a few minutes. If an image stays missing, create a new code in Figma while connected to Roblox.
The code is unknown
Codes are valid for 24 hours. Click “Create code” in Figma again.
Connecting to Roblox fails
Click the connect button again and finish the Allow step in your browser within 10 minutes.