Figma to BabyonJS plugin!

UPDATE:
The plugin can be found here.

You can now all use the plugin!

Please share anything you make with this tool and feel free to leave any feedback or bug reports here.


OP:
Hi BabylonJS community, I have an exciting announcement.

I am working on my own game and I was getting frustrated that I was doing all my UI designs in Figma but then I had to painstakingly port them over to BabylonJS by hand using gui.babylonjs.com or writing code which are both painful.


Well not anymore! I wrote a Figma Plugin that loops through your Figma design and creates a valid BabylonJS GUI json file to be used with an AdvancedDynamicTexture!

Heres an ugly test page I made in Figma.

Here is the outputted BabylonJS GUI (.json file loaded into gui.babylonjs.com)


(first HEAD1 is using a custom font which is why its not showing correctly)

Now eagle eyed people may notice some differences. The biggest things are;

  • BabylonJS cannot draw gradients, so for now it just leaves it grey (may in future make these export to images).
  • Lines have also been omitted however this can be implemented in the future but the way that Figma handles lines is extremely annoying so I omitted it from v1.
  • Images right now will just use the default img src found on the public Babylon website, this will be changed to allow users to define where images live on your project so they should work.
  • Letter Spacing is not supported by BabylonJS.

other quirks to be aware of

  • Borders are always OUTSIDE.
  • Babylon doesn’t support per vertex corner radius, so I sample the top left corner and use that.
  • All output is using px, no % so you may need to tweak the output in GUI.babylonjs to fix that.
  • Shadows are similar but more stronger in BabylonJS. Also right now all shadows are assumed as opacity 100%, will improve this later.

For a v1 I am quite happy with it, the Plugin is currently under review by the Figma people, I already have a day-1 patch ready since I fixed a big issue with rotations which I am quite pleased about.

Things I still want to do:

  • Add support for lines.
  • Allow the user to define Images src in the destination project.
  • Allow users to export as a Component to be used in a Parse() function instead of assuming the output to be a full screen UI.
  • Convert Frames to use StackPanels
  • Allow users to define a custom string to mark components as buttons (fun fact, name a layer “Button” and it will export as a BabylonJS Button Control)
  • Fix Shadows to use opacity better.
  • (maybe) convert unconvertible objects to images (Polygons, gradient fills etc…)

I will update this post when I have a public link for the plugin. I plan on open sourcing it later once I cleanup the code. Please let me know if this is something you would use or not, again this was just to fix a “me” problem but hope it can help others!

19 Likes

This is awesome! Kudos :saluting_face:

1 Like

Great job! Will absolutely try this! If it also works for GUI 3D… :star_struck:

What a great addition to the tools. Anything that can drive more people to use the BJS GUI is warmly welcomed (by me… and I believe by the team too). I think it’s awesome that you can convert an existing Figma GUI straight to BJS. This should really help converting people who sketched and built a GUI (probably with the idea to use html/css overlay or simply because of project management and coordination) and instead, as a final use, make it a BJS GUI. Amazing. I love it. :heart_eyes:

1 Like

THIS IS FREAKING AWESOME !!! cc @PirateJC

1 Like

So cool!!! congratulations

@jamessimo this is awesome! Congratulations!

How would you feel about writing up some documentation about this and adding it to the community extensions section of the official docs?

I would be delighted to do that @PirateJC !

The plugin is still in review by Figma, I will start a draft locally now, please PM me details about getting FigmaToBabylonJS on the community extensions page.

Glad everyone likes the concept! Can’t wait to share the plugin and see what people make with it! I have also learned a lot about the BabylonGUI system so planning on making a post later with some “advanced” concepts to make the GUI work well with “data rich” UI concepts like dynamic lists, using reusable .json components, and other tips to speed up GUI workflows.

1 Like

You just made my day :beach_umbrella:. I think I’m gonna luv that. :smiling_face_with_three_hearts: I’m eager to read about it. Please cc me when you do… Wouldn’t want to miss out on that :yum:
Meanwhile, have a great day :sunglasses:

2 Likes

Are you sure? Its just canvas context Im pretty sure you can draw gradients.

Great work BTW!

@Pryme8 what I mean is, in Babylonjs 2d Control the background/color param is a string and not an array of colors/a mixin of colors. Babylon.js/control.ts at 9935f9ee87963b5db4b683262e0ac7db382426ed · BabylonJS/Babylon.js · GitHub

It’s alive!!! :partying_face:

You can now all use the plugin! I’m pretty sure this version has all the bugfixes but will need user feedback (Figma isnt verbose about how files get uploaded).
Remember to highlight the Frame/Artboard you want to export. I’m writing a full guide on the community page to explain any places that are not 1:1 as shown on Figma.

Please share anything you make with this tool and feel free to leave any feedback or bugreports here.


3 Likes

This is SO COOL! Amazing to see community support for the GUI :heart_eyes:

Btw, we’re starting to add gradient support, if you want to keep an :eyes: : [GUI] Gradients on GUI by carolhmj · Pull Request #13361 · BabylonJS/Babylon.js (github.com)

2 Likes

Yes and what I am saying is you can make your own element that you can pass regular color gradient stuff to and have it render it, I know because I’ve done it! :slight_smile: Ill see if I can find you and example but its rather easy so I figured you got it.

Update Just read carols response, looks like they got you covered!

Boom! You can now learn more about the plug-in in the BabylonJS docs!

5 Likes

YESSSSS!!!

AMAZING!!!

Thank you so much for doing this @jamessimo !!!

1 Like

Congrats !!!

1 Like