Figma to Roblox (Beta)

NTwistedHere · April 3, 2023, 4:31pm

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 )

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

How to use:

Run the Figma to Roblox plugin (in figma)
Select the item(s) you wish to export
Click ‘Convert Selection’
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

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

R0bl0x10501050 · April 3, 2023, 4:35pm

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).

COUNTYL1MITS · April 3, 2023, 10:03pm

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

KinderDev · April 3, 2023, 11:13pm

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

xChris_vC · April 4, 2023, 5:26am

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

gist.github.com

https://gist.github.com/ChrisvanChip/c7bdf7e15353fbe8c77432f28cf3147f#file-figma_to_roblox-lua

Figma_To_Roblox.lua

const __html__ = "<a id=\"download\" href=\"#\" download=\"export.rbxmx\" style=\"display:none;\">Download</a>\r\n<button id=\"convselect\">Convert Selection</button>\r\n<button id=\"closeplugin\">Close Plugin</button>\r\n<script>\r\n    document.getElementById(\"closeplugin\").onclick = () => {\r\n        parent.postMessage({ pluginMessage: { type: 'close-plugin' } }, '*')\r\n    }\r\n    document.getElementById(\"convselect\").onclick = () => {\r\n        parent.postMessage({ pluginMessage: { type: 'exec' } }, '*')\r\n    }\r\n    \r\n    onmessage = (event) => {\r\n        const { type, data } = event.data.pluginMessage;\r\n        \r\n        if (type === \"Download\") {\r\n            const DownloadLink = document.getElementById(\"download\");\r\n\r\n            DownloadLink.href = \"data:text/xml;charset=utf-8,\" + encodeURIComponent(data);\r\n            DownloadLink.click();\r\n        }\r\n    }\r\n</script>";/*
    BETA VERSION

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@bbbbbbbb@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@FFFFFFFFFFFFFFFFFFFFFF@@iiii@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@tttt@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@RRRRRRRRRRRRRRRRR@@@@@@@@@@@@@@@@@@@b::::::b@@@@@@@@@@@@lllllll@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@F::::::::::::::::::::F@i::::i@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ttt:::t@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@R::::::::::::::::R@@@@@@@@@@@@@@@@@@b::::::b@@@@@@@@@@@@l:::::l@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@F::::::::::::::::::::F@@iiii@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@t:::::t@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@R::::::RRRRRR:::::R@@@@@@@@@@@@@@@@@b::::::b@@@@@@@@@@@@l:::::l@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@FF::::::FFFFFFFFF::::F@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@t:::::t@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@RR:::::R@@@@@R:::::R@@@@@@@@@@@@@@@@@b:::::b@@@@@@@@@@@@l:::::l@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@@@F:::::F@@@@@@@FFFFFFiiiiiii@@@@ggggggggg@@@ggggg@@@mmmmmmm@@@@mmmmmmm@@@@@aaaaaaaaaaaaa@@@@@@@@ttttttt:::::ttttttt@@@@@@@ooooooooooo@@@@@@@@@@R::::R@@@@@R:::::R@@@ooooooooooo@@@b:::::bbbbbbbbb@@@@@l::::l@@@@ooooooooooo@xxxxxxx@@@@@@xxxxxxx@@@@@

This file has been truncated. show original

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

NTwistedHere · April 4, 2023, 9:30am

I’ll open source in a bit in a new repository
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).

NTwistedHere · April 4, 2023, 9:30am

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

COUNTYL1MITS · April 4, 2023, 10:39am

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.

AllabyAIIaby · April 4, 2023, 11:31am

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!!!

R0bl0x10501050 · April 4, 2023, 7:20pm

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.

NTwistedHere · April 4, 2023, 7:42pm

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

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

cosigyn · April 8, 2023, 10:30pm

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

NTwistedHere · April 9, 2023, 11:42am

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

AllabyAIIaby · April 9, 2023, 5:55pm

Requirements have been changed. Again…

Even paid resources are allowed now.

Null_OS · April 16, 2023, 3:00pm

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 +

iGottic · April 22, 2023, 3:22pm

Does this happen to be uploaded to Wally?

kernelvox · April 22, 2023, 3:52pm

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!

commitblue · April 22, 2023, 4:57pm

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

NTwistedHere · April 22, 2023, 5:39pm

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

VSCPlays · April 23, 2023, 4:52pm

I think this is a good idea, intresting concept here

to

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