Figma To BabylonJS Runtime Issues

[MackeyK24]

Yo @jamessimo … I setup a playground to show this issue when rendering the json output from the Figma plugin directly (Without first loading the json into gui.babylonjs.com editor then re-saving)

This saved json from figma (Note: the json is missing corner radius)

root.json.zip (1.5 KB)

Note: When I hover over the button, the white panel disappears

Babylon.js Playground

If i simply load and re-save the root.json in the babylon gui editor. Then it works as expected and when i hover over the button the panel displays correctly and does not disappear

[jamessimo]

Thank you for this. I have found the rounding bug and that right now even frames without auto layouts still don’t have that corner radius applied. I have fixed this on my local and I am pushing a change today. Look out for version 6 of the plug-in.

I’m also debating if I should take some liberties and always apply a rectangle as a base even when dealing with stack panels and just apply the stack panel inside the rectangle…

[MackeyK24]

FYI … I still need to run Babylon Version 5

So can you make an additional plugin for version 6 and still keep version 5 available?

[jamessimo]

Ah don’t worry, I ment version of the plug-in, not BJS

[MackeyK24]

Sweet

[jamessimo]

ok, version 6 of the plugin is live and should fix the rounded corner issue, remember that you should NOT use auto Layout on the button. I will work on a solution later to that issue.

[MackeyK24]

Yo @jamessimo … Found another property that is not coming across on Frame… ClipChildren is not getting set in the json. Can you please check out when you get a chance

[jamessimo]

haha amazing. I was just about to update this thread telling you I fixed the disappearing content issues, it was due to not setting fixedRatioMasterIsWidth on the root it seems, and Ifixed some things related to Cliped Content

I have fixed this, I will also add the ability to respect the ClipContent on Figma, right now its default to false in all cases but you are correct this shouldn’t be the case.

I will update the plugin in the coming hours. I also want to thank you for using plug-in and giving me all this feedback. It’s really helped me make the plug-in much stronger because I’ve had to go back and correctly replicate the type relations that Babylon GUI has (like Rects inherit from Containers which inherit from Controls).

The next version of the plugin will be version 7. I will update this thread when its out and will make a post in the plugins thread later.

[jamessimo]

OK NEW VERSION IS OUT!

Full change log;

• Now respects Clip Content from Figma (note: clipping in BabylonJS is different than Figma.)

• Fixed bug where parts of UI disappear on button hits.

• Fixed bug where gradients don’t show on frames.

• Fixed gradients on components

• Outputted JSON is now on average 15% smaller due to removing redundant json

• added support for fixedRatioMasterIsWidth

• No longer add empty children in JSON

• Buttons now link to there textblock

[MackeyK24]

SWEET… Thanks a bunch, for all your hard work

[MackeyK24]

Yo @jamessimo … You might wanna add this feature on the main exporter under Button Code (-bjs).

What i am MacGuyver to the parsedJson to add support for ScrollViewer… so just like the -bjs suffix, when you add -scroll (or what ever you override on the export dialog) … If if the name ends with that suffix, set className to ScrollViewer with the default bar properties … Like so:

if (this.parseScrollViewers === true) {
 try {
  if (object.name != null && object.name.toLowerCase().endsWith("-scroll")) {
    if (object.className != null && object.className !== "ScrollViewer") {
        object.className = "ScrollViewer";
        object.wheelPrecision = 0.05
        object.scrollBackground = "";
        object.barColor = "grey";
        object.barSize = 15;
        object.barBackground = "transparent";
     }
  }
 } catch (error) {
   console.warn(error.message);                            
 }
}

But it would be sweet to set the -scroll prefix on the rectangle, like -bjs and get Scrollable content views that we can fine tune in the Gui Editor

[MackeyK24]

Yo @jamessimo … Version 8 is making cornerRadius back to Zero… There must. be some regressions on your latest version 8 update.

Snippet from version 8 button json:

                        "cornerRadius": 0,
                        "cornerRadiusX": 0,
                        "cornerRadiusY": 0,
                        "cornerRadiusZ": 0,
                        "cornerRadiusW": 0,
                        "textBlockName": "PLAY NOW!",
                        "backgroundGradient": {
                            "colorStops": [
                                {
                                    "offset": 0,
                                    "color": "#ffc45dff"
                                },
                                {
                                    "offset": 1,
                                    "color": "#c75610ff"
                                }
                            ],
                            "className": "LinearGradient",
                            "x0": 1090.999966621399,
                            "y0": 922,
                            "x1": 1090.999966621399,
                            "y1": 1026
                        }

[jamessimo]

what kind of control is this?

[MackeyK24]

Yo @jamessimo … Its a frame with a -BTN (renamed from -bjs)

Renders in BabylonJS without cornerRadius for Buttons

Here is the Button Json section from the Figma To BabylonJS output

                    {
                        "tags": null,
                        "isHitTestVisible": true,
                        "isPointerBlocker": true,
                        "isFocusInvisible": false,
                        "clipChildren": false,
                        "clipContent": false,
                        "useBitmapCache": false,
                        "shadowOffsetX": 0,
                        "shadowOffsetY": 12,
                        "shadowBlur": 60,
                        "shadowColor": "#0000009a",
                        "hoverCursor": "pointer",
                        "alpha": 1,
                        "scaleX": 1,
                        "scaleY": 1,
                        "rotation": 0,
                        "transformCenterY": 0.5,
                        "transformCenterX": 0.5,
                        "horizontalAlignment": 0,
                        "verticalAlignment": 0,
                        "fixedRatio": 0,
                        "fixedRatioMasterIsWidth": false,
                        "width": "560px",
                        "height": "104px",
                        "color": "#000000",
                        "zIndex": 0,
                        "notRenderable": false,
                        "isVisible": true,
                        "descendantsOnlyPadding": false,
                        "paddingLeft": "0px",
                        "paddingRight": "0px",
                        "paddingTop": "0px",
                        "paddingBottom": "0px",
                        "left": "40px",
                        "top": "922px",
                        "linkOffsetX": "0px",
                        "linkOffsetY": "0px",
                        "isEnabled": true,
                        "disabledColor": "#9a9a9a",
                        "disabledColorItem": "#6a6a6a",
                        "name": "PlayNow2-BTN",
                        "className": "Button",
                        "renderToIntermediateTexture": false,
                        "maxLayoutCycle": 3,
                        "adaptHeightToChildren": false,
                        "adaptWidthToChildren": false,
                        "background": "",
                        "thickness": 0,
                        "children": [
                            {
                                "tags": null,
                                "isHitTestVisible": true,
                                "isPointerBlocker": true,
                                "isFocusInvisible": false,
                                "clipChildren": false,
                                "clipContent": false,
                                "useBitmapCache": false,
                                "shadowOffsetX": 0,
                                "shadowOffsetY": 4,
                                "shadowBlur": 8,
                                "shadowColor": "#760e0f67",
                                "hoverCursor": "",
                                "alpha": 1,
                                "scaleX": 1,
                                "scaleY": 1,
                                "rotation": 0,
                                "transformCenterY": 0.5,
                                "transformCenterX": 0.5,
                                "horizontalAlignment": 0,
                                "verticalAlignment": 0,
                                "fixedRatio": 0,
                                "fixedRatioMasterIsWidth": false,
                                "width": "227px",
                                "height": "44px",
                                "color": "#ffffffff",
                                "zIndex": 0,
                                "notRenderable": false,
                                "isVisible": true,
                                "descendantsOnlyPadding": false,
                                "paddingLeft": "0px",
                                "paddingRight": "0px",
                                "paddingTop": "0px",
                                "paddingBottom": "0px",
                                "left": "164.5px",
                                "top": "28px",
                                "linkOffsetX": "0px",
                                "linkOffsetY": "0px",
                                "isEnabled": true,
                                "disabledColor": "#9a9a9a",
                                "disabledColorItem": "#6a6a6a",
                                "name": "PLAY NOW!",
                                "className": "TextBlock",
                                "resizeToFit": false,
                                "textWrapping": 0,
                                "text": "PLAY NOW!",
                                "textHorizontalAlignment": 2,
                                "textVerticalAlignment": 0,
                                "lineSpacing": "0px",
                                "outlineWidth": 0,
                                "underline": false,
                                "lineThrough": false,
                                "outlineColor": "#ffffffff",
                                "wordDivider": "",
                                "forceResizeWidth": false,
                                "fontOffset": {
                                    "ascent": 17.64,
                                    "height": 23.52,
                                    "descent": 5.88
                                },
                                "fontFamily": "Montserrat",
                                "fontSize": "36px",
                                "fontWeight": "900",
                                "fontStyle": "normal"
                            }
                        ],
                        "cornerRadius": 0,
                        "cornerRadiusX": 0,
                        "cornerRadiusY": 0,
                        "cornerRadiusZ": 0,
                        "cornerRadiusW": 0,
                        "textBlockName": "PLAY NOW!",
                        "backgroundGradient": {
                            "colorStops": [
                                {
                                    "offset": 0,
                                    "color": "#ffc45dff"
                                },
                                {
                                    "offset": 1,
                                    "color": "#c75610ff"
                                }
                            ],
                            "className": "LinearGradient",
                            "x0": 1090.999966621399,
                            "y0": 922,
                            "x1": 1090.999966621399,
                            "y1": 1026
                        }
                    }

Note: The cornerRadius is all zeros

[jamessimo]

found the issue, trying to fix, have a feeling this has always been an issue but only now caught it.

[jamessimo]

Ok the latest version 9 has the fix.

[jamessimo]

I will investigate this, it would be really hands off tho as the connecting the scroll viewer and styling would be done in the editor.

I would almost prefer to maybe offer a “template” scroll bar which has all the correct buttons and styles in it that you can edit in Figma then I export it to BJS and style the BJS control for the user.

[MackeyK24]

That sounds good to me

[MackeyK24]

Yo yo @jamessimo … I found another few small bugs in the Figma To BabylonJS exporter

Here is a screenshot of a figma board. The is an Game_Background1 frame that has a Background1 image in it. Both the Game_Background1 frame and the Background1 image have the TOP LEFT set to 0 x 0 but when thex exported output json show a LEFT of 8px for Game_Background1 frame and the inner Background1 image has a TOP LEFT of -2px … They all should be ZERO… Where are these phantom TOP LEFT values coming from

Snippets showing wrong output json

Game_background1 frame

AND Background1 Image

Please take a look… the runtime exports are slightly off because of these wrong exported values. Thanks

[jamessimo]

Humm I may have seen this before quite recently. Will get to the bottom of it later in the week.