Well I can’t stop adding features and the plugin breached over 100 installs! So here is
The core two features are;
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.
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.
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