Figma to Roblox (Beta)

For a long time now Figma has been my go to for ui designing, and after a lot of thinking I decided to create a simple plugin that allows you to export your designs from Figma to Roblox (as the name suggests :slight_smile:)

Going to keep this short so let’s get into it.

How to use:

  1. Run the Figma to Roblox plugin (in figma)
  2. Select the item(s) you wish to export
  3. Click ‘Convert Selection’
  4. Download the rbxmx file and import it into roblox

Figma Plugin: Figma To Roblox | Figma Community
Example usage: Figma to Roblox example use - YouTube
Example usage (With Images): Figma to Roblox (Images :O) - YouTube
Source: GitHub - NoTwistedHere/Figma-to-Roblox (really isn’t the best)

Do note there are some limitations:

  • Only Linear gradients are supported
  • Only one fill layer is supported per element (except on Text)
  • Effects are not supported (such as Drop Shadows, Inner Shadows, etc)

This may not always be up to date, so check out the plugin for an up to date version along with changelogs :slight_smile:

Feel free to suggest updates and/or report any bugs to me via Discord (NoTwistedHere#6703)

62 Likes

Please open source this (#resources rules) or move it to #help-and-feedback:creations-feedback.

If I’m not mistaken, you could use pre-uploaded blurred boxes to somewhat replicate a drop shadow (for primitive shapes).

3 Likes

This post can stay here because it is a free plugin.

6 Likes

Whenever I try to export anything from Figma I get an error telling me a frame is not valid

1 Like

For your interest, the source code of all Figma plugins are publicly readable:

There’s no license included so it can’t be assumed “open-source” yet, this would be something for the OP to do.

4 Likes

I’ll open source in a bit in a new repository :smile:
The reason I didn’t ‘open source’ it was due to it being in a private repository of mine with other stuff (sorry about that, although the code isn’t the best).

2 Likes

Thanks for letting me know, I’ll take a look into it.
Edit: added support for frames

2 Likes

It clearly states, “a free or open course component,” signifiying the resource must be at least one of the following: free or open source. This is a free, so OP does not have to open source this if they do not want to as long as it is free.

6 Likes

Omg. This is a lifesaver I am so bad at exporting UI. This is literally a lifesaver paired with things like Reclass or OS in order to switch everything to buttons. I love this!!!

2 Likes

Please read the attachment from my last post. Code is specifically required to be open source (see bolded content). Free can refer to any form of asset, such as a model or audio, but code is required to be open-source.

Well the rules about that are stupidly unclear so I couldn’t agree or disagree, however the post wasn’t taken down after 24 hours of not having the source linked :person_shrugging:

Anyway the source is available on github after some ‘housekeeping’ so to speak.

5 Likes

You should add a feature to automatically upload unsupported types (radial gradients, vector shapes, etc), as images via open cloud api

4 Likes

Didn’t realise I could upload assets via open cloud, I’ll see what I can do :wink:

4 Likes

Requirements have been changed. Again…

Even paid resources are allowed now.

2 Likes

I quite like this and think it will boost workflow. I’ve actually been looking for something like this, so thank you for this resource. However I have a few feature request you could work on.

The ability to rename certain frame/groups/elements with a special character so it could be uploaded as an image with the open cloud api .

An example of this being renaming the plus icon ^ with a ** before and after the name so it would be uploaded as an image instead of it being uploaded into frames with rounded corners to make it look like a circle and a textlabel for the +

1 Like

Does this happen to be uploaded to Wally?

My Feedback
Amazing! this thing will sure help me making amazing figma things and import it to roblox, what a nice plugin! also good job.
Overall;
great job on the UI, it’s modern and amazing!

Keep it up!

2 Likes

I think you are confused with wally. This resource does not run in the runtime, so no.

1 Like

No, there is nothing required on the roblox side of things.
It is a figma plugin (it handles mostly everything - except from uploading images which requires a proxy), it basically converts your figma design(s) into xml which you can then import into roblox via a single built-in button :slight_smile:

2 Likes

I think this is a good idea, intresting concept here :slight_smile:

Figma to Roblox


this isn’t a model, it’s a figma plugin which you can use to export your figma UI to roblox