Figma to BabylonJS plugin!

Demos and projects
, , , ,
21

Well I can’t stop adding features and the plugin breached over 100 installs! So here is

Version 4.0! "Stacking & Buttons

The core two features are;

Stack Panels!
I wanted to make my components more reusable and it was a little bit annoying going into the code to inject stack panels when needed. So now what I do is that if the Figma component uses an auto layout it will automatically convert over to a stack panel control and use the correct spacing and orientation as set in Figma. This works pretty darn well my only issue is stack panels do not inherit any outline or stroke so those are ignored when Figma allows it.

Button… Marking? Highlighting?
Pretty hidden feature was that you could name any layer to “Button” and whatever that component is will be made into a BabylonJS button control. I have now exposed that and with some clever regex, you can now type whatever you want to be custom string to be and mark off any layers in your Figma file should be treated as buttons by Babylon JS.
I want to make this a little bit more programmable by using Figma properties however they’re very strange and esoteric in what they allow plugins to access. I may expand this in the future but for now you just gotta put the string in the layer name.

Others
I’ve added some other niceties like having Text blocks inherit if it’s a strike through or underline. I actually didn’t know BabylonJS supports this, only going through the code I noticed this because that is not exposed on the GUI editor. Something weird I’ve noticed is that the underline or strikethrough inherits the stroke color and not the font color like most text editors do.
Lines got some TLC and so did gradients to make them account for more strange occurrences like “what if its inside a component that is inside a group”. Just Figma things. I attached the change log below.

4.0 April 9th 2023

  • FULL STACK PANEL SUPPORT
    • Any Figma Frames which have an autolayout applied will now use a BabsylonJS StackPanel control instead of an empty rect.
    • This has a minor Inconsistency with Figma in that Babylon JS stack panels do not have an outline stroke appled to them. If you need your stackpanel to have a stroke its recomended to place a rect underit that its set to “Fill Container” in figma and group them.
  • Now supports marking buttons
    • You can define what Figma objects should be treated as a BabylonJS Button control by adding a string anywhere on the layer name (by default this is -bjs)
  • Now TextBlocks inherit Strikethrough and Underline
    • This feature is as little different from normal stikethrough and underline as the line inherits the outline color and not the texts color.
  • Lines and Vectors re-written to be much more robust
    • Vectors now correctly follow vertex ordering
    • Vectors of more than 1 line will automatically be placed in a group.
  • Gradients bug fixes when used in Instances.

There are a few more niceties I want to add in future updates, I really gotta start hooking into Figma’s local storage so I can save user preferences. I also want to build in a system to export items as single JSON components instead of full screen UI.

I’m also planning on making a YouTube video going through the plugins features and a minor tutorial on some things I found helpful when making scalable & reusable BabylonJS GUI.

Again I would love to see anyone using the plugin to share their experiences, I’m not sure if I design my Figma files knowing that they will be exported in a way that would be different than say just a normal UI designer who is just making UI and not thinking about exporting to an engine.

Try it here Figma to BabylonJS | Figma Community

2 Likes
22

I have officially launched a YouTube video of the plugin in action with my dry dictation over it trying to explain how the plug-in works and some helpful tips!

I’m hoping time will permit me in the future to make another video demoing how I use the BabylonJS GUI to its fullest extent by breaking components into adjacent files and dynamically changing UI elements whiles having pseudo-reactive UI within Babylon JS!

This is my first talky Youtube vid so please feel free to leave any comments or critiques on the vid!

4 Likes
23

BOOM! Version 5!

Version 5 marks a large breakthrough in that now you can export single controls in the Figma file.

Pressing the new “Is Component” (which I may rename) will just export that selection as a single control that can be parsed into a control that has already been setup in code.

Also just added in the latest update that we can now have “free corners” on rects since it was added in 6.5.0 Release 6.5.0 · BabylonJS/Babylon.js · GitHub

I’m also excited because I will finally make a Youtube video that I always wanted that goes into detail about the GUI system and how to make it scale with large game projects!

Full change log here;

5.0 May 22th 2023

  • Export Stand Alone Controls!
    • You can now export frames as stand alone compnents. These are not for use as a full image textures but to be parsed into exisiting GUI controls set up via code. This is useful to help manage larger projects with lots of dynamic content.
  • Per-corner radius
    • Added support for per-corner rectangle radius (supported by 6.5.0+)
  • Backgrounds can now be gradients on root ADT.
  • Strike though and underline text will now be set to the same color as the font (will be overwritten if you have a stroke applied to the text)
24

WOOOOOOOOHOOOOO! Congrats!

tenor

1 Like
26

Boom! Version 6?..7…8!!

I have been busy at work making the last few versions of FigmaToBabylonJS much more robust and can say its starting to be battle tested by users like @MackeyK24 who have given some great feedback and found some issues that only appear in engine.

I have combined the release notes here, Figma versioning is a little misleading in that you cant make .0 versions, so even a hot fix to fix a typo gets a whole version number bump so features are not crazy but stability and flexibility has expanded massively.

Change Log for version 6 7 8

Features

  • Now respects Clip Content from Figma
    • note: clipping in BabylonJS is different than Figma in that when a Container of Items parent is smaller, it doesn’t cut off the children unless its totally engulfed.
  • Outputted JSON is now on average 15% smaller due to removing redundant json
  • Buttons now link to there textblock

Fixes

  • Fixed bug where parts of UI disappear on button hits.
  • Fixed bug where gradients don’t show on frames.
  • Fixed gradients on components
  • Fixed issue with frames without autolayout not updating corner radius.
  • Fixed miss matched word wraps.

Minor changes

  • No longer add empty children in JSON
  • Added support for fixedRatioMasterIsWidth
  • Backend code is much closer to how BabylonJS builds UI

Again I welcome all feedback, really love seeing the plugin being used, we are now over 200 users! I will next be working on a way to either bring over all images from Figma to be used by the JSON or give users a way to map images to where they would be in the project. I also have been dabbling in the idea or backward converting BJS json into Figma so that people with existing projects could bring there programmer art into Figma and re-export it to Babylonjs!

2 Likes
27

It keeps getting better !!!

1 Like
28

Well, I got a massive update in the works, I wanted to launch before my vacation but seems I won’t have time.

firstly, to catchup;

Change Log for version 9 10 11

  • Scroll Views!
    • The same way we can define a button, you can now define what frames should be treated as a scrollViewer.
  • Added support for UnionShapes
    • It’s a bit rough, but works well enough
  • Fixed bugs with rounded corners not working on buttons
  • Fixed some minor bugs with outlines

but the really big news is… IMAGES WILL BE SUPPORTED!! (in the next version)

I found a nice way to get images to export from Figma and package them into a zip which you can unpack in your project and just have it work!

I also wanted to ask an open question, would you be ok only exporting images as PNG or would you ever have the need for JPEG?

The plugin will export all images as PNG and you can choose x1, x2, x3 or x4 scale. So you cant pick and choose what images export as what. I personally only use PNG but wanted to know if there is a reason I should support JPEG too.

2 Likes
29

you can or you can’t?

Personal opinion and it might be odd to say. Whenever the image is opaque, the JPG compression makes for much less heavier images. Although I do agree that, in a GUI, the definition of PNG looks a lot better.

Cheers for the update and have a good time on your holidays :beach_umbrella: :sun_with_face: :sunglasses:

30

You can’t pick what images you want to export, it will just find any and all images and export them.

31

Makes sense. Thx for clarification.

32

Hello BabylonJS, today I have one of the biggest updates to date and I am really pleased with it.

The headline new features are;

IMAGES! OH THE PIXLES!

Screenshot 2023-08-07 at 11.58.48 PM
Screenshot 2023-08-07 at 11.58.48 PM634×1018 53.9 KB

Yes, something I have wanted since day 1 is now possible! You can now toggle the “include images” and now instead of just JSON, the plugin will deliver the json along with all the images used in a zip file. You can define what folder they should live in and even make deep nested folders if you so choose!
Remember to add a trailing / and its normally good practice to put a ./ at the start if the images live in the same project as your code, but you could even make the folder path an absolute http address! The sky is the limit!

You can also chose at what scale to export these images and even the folder location!

Whiles this feature is a game changer, it does have a side affect that sometimes the plugin will crash when exporting images due to the way Figma manages memory. To fix this, you need to restart Figma and should work again. I am working on ways to try to avoid this or have the plugin detect when its out of memory.

Check box support + improved buttons

Figma to BabylonJS now supports Checkboxes alongside buttons and scroll views! Checkboxes are quite simple and can be generated from either a rectangle or frame.

Buttons can now be just bank rects too if you so desire.

Brand new UI

To pack all these new features in, I had to make the hard (but rewarding) decision to practically rewrite the ui code from scratch. With this I also included some nice QoL things like

  • Buttons reacting to when there busy
  • Fixed a small bug where you could double tap the button
  • Made Single Component export its own button so it can inherit the new Image export features.

Bug fixes!

fix minor position offset bug when using frames. Framers were like 2px off there absolute positions, this was a bug introduced when trying to make strokes more uniform.

Fixed an issue where groups have problems rotating. This fix is not 100% fixed, but its more stable now.

Found a bug where “Union” Shapes could cause the plugin to hang. Now catch this but sometimes the plugin is forced to shut down. You should see a warning message but if not, avoid union shapes(or, make them into bitmaps and use the plugin to export them!)

Trouble shooting

Both buttons turned grey and nothing is happening!

If you were exporting images then its most likely figma ran out of memory, please restart figma.

If the problem consists, make sure your design has no “union” shapes in it.

Added a donation link

So needless to say I am quite proud of what I have done and hope lots of people use it! I did add a small KoFi link to the bottom of the app so if anyone wants they can “buy me a coffee”. I am not asking anyone to donate and you do not have to donate to use the plugin, its just for anyone who wants to help fund my work on Figma to BabylonJS.

Whats next?

I am working on updating the docs for this but wanted to push the update out now so I can get some feedback from users first. I got more I want to do and there is still work to do in regards to memory management.

4 Likes
33

You came along way from the first version. Looks great @jamessimo

It’s a shame I redid my UI the other day else I would have used it for sure :slight_smile:

Next UI iteration, I will try it and give feedback!

1 Like
34

Version 13 and 14!

Hey guys, some updates to the plugin, mainly all bug fixes;

  • Added experimental auto resize option. Only applies to Stack Panels at this time but will be expanded on in future.

  • Fixed bug where the image folder name is not correctly set if you do not chose to include images

  • Fixed bug around lines being incorrect due to incorrect offset

  • Fix drop shadows showing when hidden

2 Likes
35

Another video!

I wanted to make another video that would showcase the new features of FigmaToBabylonjs, but I also threw in a mini tutorial on parsing JSON to ADT and single controls + some other rambly bits.

I’d love any feedback on the video. I try to put a bit more production value into it however I also may ramble a bit too much but I hope somebody finds it useful!

5 Likes
36

Hey I saw you plugin and I like what it does. I believe that is probably the way to go regarding the workflow of creating Babylon UIs. Is there a way I could contribute?

37

I am still formalizing the code before making it public but the plan is to get it hosted on github, its already on github but private so the whole commit history will be intact.

I am currently making it so that the type mapping (BabylonJS UI control > Figma Node) is done automatically by checking the BabylonJS codebase. Right now this is hard coded which isn’t great since any new GUI comps or additions I have to catch and update. (*That and making the code less embarrassing)

I will update this thread when its public. my github is the same as my username so feel free to follow me there.