Skip to content
Talegates Interactive
Log in Create account
A free Talegates tool

Figma to Roblox UI in a few clicks.

Two free plugins turn a Figma frame into native, editable Roblox UI. No login, no account, no API key.

Get Plugin
Get Plugin

A screenshot of your design is not a UI.

The usual way

Rebuilding a Figma design in Studio means creating every frame, label and layout by hand and copying sizes, colours and spacing across, one property at a time. Many existing tools that help need an account, an API key or a subscription.

The Porter Buddy way

Select a frame in Figma, export, and import the file in Studio. You get real Frames, TextLabels and layouts you can edit, in your own game, without signing up for anything.

Two plugins. One file. No server.

Nothing is uploaded to anyone. The file you save is the only thing that travels.

  • The Figma plugin saves your frame as a .porter.json file.
  • The Roblox plugin reads it and builds the interface under StarterGui.
  • Your interface is real Roblox UI. Open the place without Porter Buddy and it is all still there.
  • Neither plugin makes network requests, and neither asks you to log in.

Roblox developers

Turn a designer’s Figma file into working menus, HUDs and shops without rebuilding them by hand.

UI and UX designers

Keep designing in Figma and see the result in the engine in a few clicks.

Example: what an import looks like in the Explorer
ScreenGui   InventoryScreen
└ Frame       Main
  ├ TextLabel   Title
  ├ Frame       Content
  │ └ UIGridLayout
  └ TextButton  Close Button

What Porter Buddy does.

Everything is free. There is no premium tier.

Read the guide
Free

Native Roblox instances

Your layers become real objects with sensible names, not one flat image.

  • Frames, TextLabels, TextButtons and ImageLabels
  • UICorner, UIStroke and UIGradient for rounding, borders and gradients
  • Layer names carry over to the Explorer
Free

Auto layout and grids

Figma auto layout becomes real Roblox layout objects, so your UI keeps working when items are added or removed.

  • UIListLayout for rows and columns, UIGridLayout for grids
  • UIPadding, wrapping and alignment
  • Fill-width items use UIFlexItem
Free

Responsive by default

Choose how the screen should scale, then import. Fit keeps the aspect ratio, Stretch fills the screen and Fixed keeps exact pixels.

  • Positions and sizes use scale
  • Text shrinks with its box and never grows past the designed size
  • Safe-area insets set by default
Free

Images and fonts

Images show up straight away as previews, and you can attach your own Roblox image ids. Fonts Roblox does not have are listed with a suggested replacement.

  • Previews appear instantly in Studio
  • Use your own image ids for permanent images
  • Map any font to a Roblox family and it is remembered
Free

Shadows and scrolling

Drop shadows are approximated with soft layers behind the element, and scrolling frames become real ScrollingFrames.

  • One or two tinted shadow frames per shadow
  • Figma overflow scroll becomes ScrollingFrame
  • Anything that cannot be matched is reported as a warning
Free

Private and offline-friendly

The Figma plugin makes no network requests and the Roblox plugin makes no HTTP requests. There is nothing to sign in to.

  • No account, API key or token
  • The export file holds design data only
  • One Ctrl+Z undoes a whole import

Free to use. Three steps to your first UI.

Install the two plugins

Click Get Plugin and enter your email. We send you the Figma plugin link and the Roblox plugin file to put in your Roblox plugins folder. One time, no account needed.

Export from Figma

Select a frame, run Porter Buddy and press Export to Roblox. A .porter.json file is saved.

Import in Studio

Open Porter Buddy on the Plugins tab, choose the file and press Import Figma UI. Your UI appears in StarterGui.

Guide.

How Porter Buddy works, how to install it and a first import from start to finish.

How it works

Porter Buddy is two small plugins that work as a pair. The Figma plugin reads the frame you select and saves it as a file. The Roblox Studio plugin opens that file and builds the interface in StarterGui. What it builds is real Roblox UI that you can edit in the Explorer and Properties windows, not a flat screenshot.

Figma frame  →  Porter Buddy (Figma)  →  MyScreen.porter.json  →  Porter Buddy (Studio)  →  StarterGui/MyScreen

The file in the middle ends in .porter.json. It holds design data only: layout, colours, text, corner radii and the pixels of any images you chose to include. Because it is just a file, there is no server, no account and no API key anywhere in the process.

  • Free, with no login. You never sign in to Talegates, Figma-side or Roblox-side, to use Porter Buddy.
  • Native instances. Frames, TextLabels, UICorner, UIStroke, UIGradient, UIListLayout, UIGridLayout, UIPadding and more, named after your Figma layers.
  • Responsive. The result can scale to any screen size, keep its aspect ratio, or stay in fixed pixels.
  • One undo. Press Ctrl+Z in Studio and the whole import is removed in one step.

Install the plugins

You install two plugins, once each. Both are free. Click Get Plugin, enter your email, and we send you the Roblox plugin file and the Figma link in one email.

1. The Figma plugin

  1. Open the Figma link from the email (it is the Porter Buddy page on Figma Community).
  2. Click Try it out or Save. You need a Figma account, and any plan works.
  3. In a design file, open the menu Plugins and run Porter Buddy | Open Source. If you do not see it, look under Plugins & widgets > Saved plugins.

2. The Roblox Studio plugin

The Roblox plugin is a single file that you put in Roblox’s plugins folder yourself. This is what lets it upload your images straight to your Roblox account.

  1. Save PorterBuddy.rbxmx from the email we sent you. It is attached, and the email also has a backup download link. It is a small file, about 70 KB. If you have not asked for it yet, click Get Plugin.
  2. Open the plugins folder. The easy way is in Roblox Studio: on the Plugins tab, click Plugins Folder. Or open %LOCALAPPDATA%\Roblox\Plugins in File Explorer (paste it into the address bar, because the AppData folder is hidden by default).
  3. Move PorterBuddy.rbxmx into that folder.
  4. Close and reopen Roblox Studio. If Studio was open while you copied the file, it will not see the plugin until it restarts.
  5. Open the Plugins tab. The toolbar Porter Buddy | Open Source has a Porter Buddy button that opens and closes the plugin window.

If you installed an older Porter Buddy before, from the Creator Store or from a file with a different name, remove it first so the plugin does not show up twice.

3. Turn on the Studio beta feature (for image uploads)

To upload your imported images to Roblox, switch on one Studio beta feature once:

  1. In Roblox Studio open File > Beta Features.
  2. Tick CreateAssetAsync Luau API.
  3. Restart Roblox Studio.

Without it everything else still works, but images only show as temporary previews. Roblox only allows uploads from plugins installed in your own Plugins folder, which is why Porter Buddy is installed this way. See Images.

That is all the setup there is.

Your first import

This walkthrough takes a simple Figma frame to a working Roblox UI. It takes about five minutes.

Step 1. Prepare a frame in Figma

Design your screen inside a single Frame. A frame of 1920 by 1080 is a good starting point for a PC screen. Use auto layout for any list of items, and put a few words in a layer’s name where it matters, for example Play Button for something players should be able to click.

Step 2. Select the frame and open the plugin

Click the frame, then run Plugins > Porter Buddy | Open Source. The window shows what it found: the name and size of your selection, a layer preview that predicts the Roblox class of each layer, and a short list of options.

Step 3. Check the preview

Expand the layer list and look it over. Layers that cannot be imported are struck through. Anything Roblox cannot reproduce exactly appears in the Output log as a warning, and the Warnings filter shows only those.

Step 4. Export

Leave the options on their defaults for now and press Export to Roblox. Your browser or Figma saves a file called something like MyScreen.porter.json. Remember where you saved it.

Step 5. Import in Roblox Studio

  1. Open your place in Roblox Studio and click Porter Buddy on the Plugins tab.
  2. Press Choose Figma file… and pick the .porter.json file.
  3. Check the Responsive setting (Fit, Stretch or Fixed pixels), then press Import Figma UI.

Step 6. Look at the result

Your interface appears under StarterGui as a ScreenGui named after your frame. Expand it in the Explorer and the layers match your Figma layers. Select any of them and change its properties as usual. If you are not happy with the import, press Ctrl+Z to undo all of it.

Step 7. Save

Save your place with Ctrl+S. To update the design later, change it in Figma, export again and import again. Each import creates a fresh copy, so delete or rename the previous one first if you do not want both.

Designing for a better result

  • Use auto layout for lists, grid for inventories. They become real UIListLayout and UIGridLayout objects, so adding or removing items behaves like normal Roblox UI.
  • Name your layers. Names like Inventory or Play Button carry through to the Explorer. Generic names such as Frame 12 get a sensible generic name instead.
  • Make buttons obvious. A layer whose name contains button or btn becomes a TextButton or ImageButton so it can be clicked.
  • Pick fonts Roblox has. Other fonts are replaced by a close match, and the plugin tells you which. See Fonts, shadows and scrolling.
  • Keep one frame per screen. Each selected top-level frame becomes its own ScreenGui.

What becomes what

This is how Figma things are translated. Everything on the right is a normal Roblox object.

  • Frame, group, rectangle: Frame. An ellipse becomes a Frame with a fully rounded UICorner.
  • Text: TextLabel, or TextButton when the name says it is a button.
  • Image or vector: ImageLabel, or ImageButton for buttons. Vectors are rendered to an image.
  • Corner radius: UICorner.
  • Stroke: UIStroke, with inside, centre and outside stroke handled.
  • Linear gradient: UIGradient. Radial, angular and diamond gradients are rendered as images.
  • Auto layout: UIListLayout, or UIGridLayout for grids. Children that fill the available space use UIFlexItem.
  • Padding: UIPadding.
  • Scrolling frame: a Figma frame set to scroll becomes a real ScrollingFrame.
  • Components: every instance is built as normal, editable objects named after the component (InventorySlot_01 and so on).

Every created object also carries a few attributes such as FigmaNodeId and FigmaSourceName, so you can always tell where it came from.

Export options

In the Figma plugin

  • Selection or Whole page: export just what you selected, or every top-level frame on the page.
  • Responsive scaling: when on, positions and sizes use scale so the UI follows the screen size in Roblox.
  • Include images: renders images to pixels so Roblox can show them. Turn it off for a quick layout-only export.
  • Include components: keeps component names on instances.
  • Advanced: the reference size (1920 by 1080 by default, or press Use frame to use your frame’s size) and the scaling mode.

In the Roblox plugin

  • Fit (keep aspect ratio): the whole screen scales evenly and never distorts. This is the safe default.
  • Stretch (fill screen): the layout fills any screen shape, which can stretch things.
  • Fixed pixels (no scaling): sizes stay exactly as designed.

Images

Studio has no way to read a PNG or JPEG file directly, so Porter Buddy has the Figma plugin turn each image into raw pixels and the Roblox plugin draws them into an EditableImage. Right after an import you see your images straight away. These are previews:

  • they exist only in the current Studio session, so they are gone when Studio restarts;
  • they do not show in Play mode.

To keep images permanently they have to be Roblox image assets. You have two ways to do it:

  1. Use your own image ids. If the pictures are already on Roblox, open Use my own image ids in the Roblox plugin and list them as Image name = 123456789, one per line. The plugin lists the image names found in your file. This needs no extra permission.
  2. Upload from Studio. The plugin can upload previews to your own account with Studio’s own upload feature. It needs the beta feature CreateAssetAsync Luau API switched on under File > Beta Features, followed by a Studio restart (see Install the plugins). The Images card in the plugin shows a green tick when uploading is available, or a red cross with what to fix. Uploading is automatic by default, and the same image is never uploaded twice.

Uploads go to your own Roblox account and through Roblox moderation, so a new image can look blank for a short while. Only upload art you have the rights to use. After uploading, press Ctrl+S so the new ids are saved with your place.

Fonts, shadows and scrolling

  • Fonts. Roblox has a fixed set of fonts. Any font in your design that it does not have is listed under Fonts to map with a suggested stand-in. Type another Roblox font family there if you prefer one, then import again. The choice is remembered between sessions.
  • Shadows. Roblox has no blur, so a drop shadow is approximated with one or two soft, tinted rounded frames behind the element (named Shadow and ShadowSoft). They look similar, not identical. Inner shadows and text shadows are skipped and reported.
  • Scrolling. In Figma, set a frame’s overflow to scroll (Prototype panel). It becomes a real ScrollingFrame with its canvas sized from the contents.

Limits and warnings

Roblox UI and Figma are not the same thing, so some details cannot be carried over. Porter Buddy never drops them silently: each one shows up as a warning, in either plugin, that says what was changed and whether you need to do something.

  • Vectors become images. Icons and illustrations are rendered to a raster image (up to 1024 pixels). Large designs make larger export files.
  • Not reproduced: layer blur, blend modes and masks are skipped and reported.
  • One fill and one stroke per layer. Where a layer has several, the visible one is used. Different corner radii on one shape use the largest.
  • Hug sizing is treated as the designed size in the responsive modes, so scaling stays predictable.
  • Text scales with its box, with the designed size as the maximum, so it shrinks on small screens.
  • Group opacity. Opacity on a container only affects that container’s own fill.
  • Not included yet: prototype interactions and animations from Figma, and re-syncing a changed design onto an existing import without making a fresh copy.

Privacy

  • The Figma plugin makes no network requests at all. Nothing leaves Figma except the file you save yourself.
  • The Roblox plugin makes no HTTP requests. Image upload, if you use it, is done by Studio itself as the account you are signed into.
  • There is no API key, password or token anywhere in the tool, and no Talegates account is needed.
  • The export file contains design data and the image pixels you chose to include, nothing else.
  • When you ask for the plugin with Get Plugin, we keep the name (if you gave one) and the email address you entered on our contact list. Ask us any time and we will delete them.

Troubleshooting

I did not get the email.

Give it a few minutes and check your spam or promotions folder. If it is not there, click Get Plugin again and check the address you typed (you can ask for it up to three times a day), or write to us from the Contact page.

The Images card shows a red cross.

Uploading is not available yet. Switch on File > Beta Features > CreateAssetAsync Luau API in Roblox Studio, restart Studio and import again. Make sure the plugin is the file in your Plugins folder, not a copy from the Creator Store, because Roblox blocks uploads from store plugins. Until then your images still work as previews.

I do not see the Porter Buddy button in Roblox Studio.

Check that PorterBuddy.rbxmx is directly inside the Roblox plugins folder (%LOCALAPPDATA%\Roblox\Plugins, not in a sub folder), then fully close and reopen Roblox Studio and look on the Plugins tab for the Porter Buddy | Open Source toolbar. If it appears twice, remove the older copy from the plugins folder or from your Creator Store plugins.

The Figma plugin says nothing is selected.

Click a frame, component or section on the canvas first. The plugin works on a selection, or on the whole page if you switch to Whole page.

The layout looks different from Figma.

Read the yellow warnings in the Output log. Most differences come from a Figma feature Roblox does not have, such as blur or blend modes. Try Fit instead of Stretch for an evenly scaled result.

My images disappeared after restarting Studio.

They were previews. See Images to make them permanent with your own image ids or an upload.

My font is wrong.

The font is not available in Roblox. Open Fonts to map in the Roblox plugin, type a Roblox font family and import again.

I imported twice and now I have two copies.

Each import makes a new copy. Delete or rename the older ScreenGui in StarterGui, or press Ctrl+Z straight after the import you do not want.

Still stuck? Contact support and include the warnings from the Output log.

Try Porter Buddy free.

Get the two plugins by email and turn your next Figma frame into Roblox UI. No account needed.

Get Porter Buddy

Enter your email and we will send you the Roblox plugin file and the link to the Figma plugin.

Free, no account needed. We keep your name and email address on our contact list; ask us any time and we will delete them.
Get Plugin
Get Plugin