Figma to Roblox (Beta)

Oops, I accidentally replied to the wrong post. Of course it’s not uploaded to Wally haha
(cc: @VSCPlays)

1 Like

I just tried out the image uploading feature, great update! I’d also suggest that rotated components should use this rather than outright removing the rotation

The reason why rotation was removed (or well, never actually released) is due to an error in my maths which I’m yet to figure out.

While I won’t be doing what you suggested, I am adding a way to tell FtR to export certain components as images via a certain character in the name (or something similar) as @Null_OS has previously suggested.

But I enjoy the feedback nevertheless :smiley:

1 Like

hey, i need help getting this to work
studio:
image
figma:
image

Ah, sorry about that. I’ve just tested and experienced the exact same issue.
Had a look at my code and realised I made a little mistake in the previous update - which is fixed now.

1 Like

Works great! However, I’d recommend changing LineJoinMode on UIStrokes to Round if there’s a UICorner
image

That’s roblox for you :man_shrugging:
If you want it to be set to Round (or any other for that matter) change the join mode in figma.
image

2 Likes

Is this maintained? What types of functionality is it missing?

Hey, I can do this. I just started Figma today, and to be honest, this is a life changer. I do have one problem, when importing a UI. Some parts are invisible and not imported and will not show up. It’s very annoying, any fix to this?

It looks like you’ll need to manually adjust the zIndex on a few of the frames.

What would be really cool is if you can hook it up to components similar to what google has for android studio relay extension

Does this work with scripts? Like if I were to make a functional ui on figma would it work in roblox?

No, it does not support the animations from figma (yet)

1 Like

Let me know when it does! That will be a great addition

I’m super happy to have discovered this tool, thanks a ton!

I’m curious if anyone else was experiencing their UI Stroke color not getting carried over. I applied a black colored stroke inside of Figma, but it turned to white once imported to Studio.

1 Like

Hey, I’ve just sent a pull request to add the following features and fix the following bugs:

  • Added UI Padding if Frame has padding
  • Added UI Grid Layot to Auto Layout Frames
  • Made the default fill color white instead of black
  • Feature: If an element is named “Container” or “ScrollingFrame” its class will be a Scrolling Frame
  • Fixed font names containing spaces not exporting correctly
  • Fixed rgb 0,0,0 not working for UI Stroke

If you want to build it yourself rather than waiting for the pull request to be accepted, you can find the repo here: GitHub - MonzterDev/Figma-to-Roblox

1 Like

hey man is there any way i can use your updated version of the plugin?

1 Like

Originally I planned on my changes being merged into the original repo, but it seems that the author is inactive.

Because of this, I quickly threw together the Figma plugin page to see if it would even get approved.

Figma has now approved the plugin fork and it can be used here: https://www.figma.com/community/plugin/1311848700208641478

Please don’t mind the description or images used on the page. I didn’t plan to publish a Figma plugin, so this was quickly put together to make these changes accessible. I plan to improve the plugin page and better document what changes I have made and plan to make.

If you’re curious about the changes, you can take a quick look at my commits until I have organized them: Commits · MonzterDev/Figma-to-Roblox · GitHub

CC: @Lord_BradyRocks

2 Likes

I’ve just implemented a method for easily importing Images to Roblox

  1. Upload the images to your Roblox game. You should see them all in the Asset Manager.
  2. Upload the Images to Figma and we will want to add them as custom local styles.
    2.1. Click the Icon on the Fill property
    2.2. Click the New Variable + button
    2.3. Swap from Variable to Style
    2.4 Set the Description to the ID of your Image in your Roblox game. It does NOT need to be prefixed with “rbxassetid://”, but it can be.

Image guide

Your Image Labels will now have the Image property set to the ID whenever this Style is used. (Make sure to use the style, rather than reuploading the image.)

This seems cool but I’m afraid most UIs won’t work, a better implementation would just be to just turn it into an image and upload it per component, I know that sounds like cheating but that will deliver better results because many Figma features no matter how hard you try cannot be brought to Roblox.