Done with the tedious Figma to Roblox conversion? Our codegen plugin automates it for a hassle-free, time-saving, and seamless experience. Focus on creativity, not translations!
Get the figma plugin, select one frame, enable dev mode and set the codegen feature to this plugin and there you go!
Your designs must be inside of a
1920x1080frame, so the plugin can get proper scales
I like the idea of converting it to code for use of Fusion. I’ll give this a try 
This seems really useful! I will give it a try when I get home and I will edit this message.
Edit:
Just tried this out using the “Vanilla” option. Here are my thoughts:
When I first imported it, I just got this:
It looked like this in Figma:
The frames existed, but were just blank frames, not even named.
The strokes hadnt been added, there wasnt any UI corners, no placeholders for the images or icons, this is sadly a little bit disappointing, but this plugin is still new, so I will give it some time.
Maybe consider reading the code for once, you’re making these kind of nonsensical replies on resources way too often.
Transforming between these different frameworks is not that difficult since the structure is the same. Only the syntax is different.
I didn’t see that it have a github repository, Now I get it [and I thought it was a roblox plugin]
THIS is awesome! thank you so much for this resource
I spent 3~4 hours converting my ui from figma to fusion a few weeks ago so this is gonna save me alot of time
Yet again another W for another TypeScript project. It’s always the TypeScript projects that amaze me and encouraging me to start my own TS project. Thank you for writing this converter, I’ve been trying to find a way to easily import Figma UI but I just don’t have the time or patience to write one up myself.
Added support for vanilla codegen, only roblox instances, no UI framework:
I’m not sure how to deal with strokes and corners, strokes in roblox are just… weird
| Feature | Frame.BorderSizePixel | UIStroke |
|---|---|---|
| Inset |  |
 |
| Middle | |
|
| Outset | |
|
| Transparency | |
|
| Fits to square shape | |
|
| Fits to rounded shape | |
|
Just to clarify: UIStroke can fit to square shapes but needs LineJoinMode to be other than Round but for rounded shapes even if its 1px, it needs to be Round and that will result in a weird stroke where its way more rounded than the frame, it would be easier if LineJoinMode didn’t exist and the stroke just fitted to the shape of the frame.
Some designs may require the corners to be in scale or offset, but AFAIK there is no way to tell that to figma so my plugin won’t know what unit to apply. I had the same problem with padding but I just realized that most of the times its better to keep offset. I think I will just stick to offset for corners too but I’m not 100% sure yet.
And yes, I need to include a placeholder for images, I will do that and set names for vanilla generator in the coming days. I appreciate your feedback.
Hey, I’ve worked on another Figma exporter plugin that handled strokes. It certainly doesn’t solve everything you’ve pointed out, but I think having some support for UI Strokes is better than having none.
I’m more than happy to implement this and make a pull request, but I wasn’t sure if you’d consider it without having all the other issues solved.
You can view how it was handled here (PS: This is not my codebase, so please don’t judge me for it lol) https://github.com/MonzterDev/Figma-to-Roblox/blob/main/src/code.js#L476
This resource is also very, well, resourceful, let’s try and make it more popular!!
Hello! Thanks for your interest in the plugin, I agree that some kind of strokes support is better than nothing. However there is a problem:
On January 31, 2024, the Dev Mode beta will end and Dev Mode, including plugin use and development, will require a paid seat.
This plugin is a dev-mode one (because of the codegen capability) so it requires a paid seat in Figma. I’m thinking on creating a UI (with code preview and whatnot) so we don’t rely on dev-mode and so the plugin development becomes free again. It shouldn’t impact in the plugin core itself, I’m not sure when it will be done but I’ve created an issue to keep track of it.
I’m happy the stroke suggestion was well received! I didn’t even consider the plugin might’ve used dev-mode, but that’s unfortunate news considering the changes. I’m happy to hear there’s an alternative though!
Does this work with scripts? Like if I have a button that turns blue when i press it will it do the same on roblox?
I’m assuming you are talking about Figma prototyping. No, it’s not supported, that would be too much complexity and may not be worth as you probably will need to tweak it yourself. Also I don’t believe that Figma exposes an API for it?
It doesnt let me use it, i have to pay…
Is there a way to bypass the payment?
Yes, it will require me to create an external UI so we do not depend on Figma Dev Mode, hence the tracking issue I made, but I’m not sure when it would be done
