Please share anything you make with this tool and feel free to leave any feedback or bug reports here.
Original post
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!
(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).IT DOES NOW!
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.It does now! FYI please use Vectors not Lines in Figma, Lines have issues.
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 INSIDE.
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.
Figma Frames that use an Auto Layout will be stack panels, please not that stack panels in BJS don’t support things like Rounded Corners or Strokes (but Figma does)
Gradients look weird in the GUI editor, this is just a canvas sizing issue and it won’t look weird in-engine.
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 etc…)
Add -scroll tag to allow injection of Scroll Controls. added!!
make the plug-in respect “resize to fill” by setting any fill elements to use 100% of its parent.
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!
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.
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.
You just made my day . I think I’m gonna luv that. I’m eager to read about it. Please cc me when you do… Wouldn’t want to miss out on that
Meanwhile, have a great day
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.
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! 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!
To celebrate the incoming Babylon 6.0 I have finally got around to adding in the new Gradients that were added back in v5.43.2 AND also added support for Lines/Vectors.
Heres is a cheesy little snippet I made to showcase this feature
This update also comes with lots of other fixes and bug fixes.
3.0
Now supports new Gradient Fills!
Now Supports Lines and Vectors
Shadows now inherit Alpha/Opacity
Groups/Frames now inherit shadows
Sets hidden layers to be hidden in BJS
Fills now accept Alpha channel and mixes it into the BJS HEX value
Fills now use top-most fill and not the “first” fill
I want to also say thank you to @carolhmj who really helped me in DMs whiles I was getting gradients to work!
Fun fact, Figma pretty much handles gradients the polar opposite of how html/web browsers do them so that was a lot of fun with matrices… Also Linear and Radial gradients are only supported at this time.
I ironed out a lot of bugs, the only strange thing is Lines are very tricky in Figma so your using (Figma) Lines please use Vectors with the pen tool as they translate 1:1 no issue. The lines have issues because BabylonJS wants two vectors whiles Figma treats them like glorified rectangle.
Really happy with FigmaToBabylonJS at this point, has been great for rapid development of UI and right now is the only way to have a visual way to edit gradients.
. I think I’m gonna luv that. 
I’m eager to read about it. Please cc me when you do… Wouldn’t want to miss out on that 
: 
Ill see if I can find you and example but its rather easy so I figured you got it.
but rest assured I will. Again, amazing contribution there 