yes but what element is the canvas in that you are rendering it, the adt is based off the canvas size. If your root element is that size then so will the adt be.
Adding @carolhmj our GUI expert to the thread 
Just to be sure @MackeyK24, what do you mean by “FIXED resolution of 320 x 568” do you speak about the ratio only or a real fixed size ? I have some trouble to understand how it could be fully fixed and fullscreen ?
Dedicated monitor/touchscreen.
He just needs to ensure the dom element the canvas is in is hard set to that size and his adt scaling is set to one. Everything will just fall into place.
If you look at the root object of that JSON. You will see it has a Width and Height in it. You can change that to be the exact pixel values. There may be some other things you need to change in regards to adapting size to children. If you use the gui.babylonjs editor for your GUI remember that by default it targets adaptive 1080 screen sizes. You can force this size in the top of the editor.
I am using the width and height from the JSON (gui.babylonjs.com). So i guess the second param to Scale the adt to is what explicitly sets the width and height:
adt.parseSerializedObject(parsedJsonObject, true);
I guess adt.scaleTo() would also explicitly do what i want, instead of trying to set the width and height using idealWidth and idealHeight
Yo @jamessimo … the current Figma To BabylonJS gradient does not seem to be working.
The figma has a gradient play now button:
But when i load into gui editor… there is no rounded corners or gradients. The align is off as well:
If I load directly into bjs … it looks a bit plain
Hmm, I don’t think gradients are supported in the editor (but I could be wrong). Best to make sure from the gui-angel 
@carolhmj
I think its the way your frame is setup as the frame holds the corner radius and gradient so it will be a stack panel but stack panels cant have corner radius… should have gradients tho. You can change it to use a rect as the button bg instead of relying on the frame to manage it all.
Could I get access to a version of this design on Figma and I can test it. Please DM a link to a public Figma and I can see what’s going on.
@mawa
The gradient should work in the live app, the editor does show gradients but they look bugged just due to the editor not scaling gradients with zoom.
thx for the info. Have a great day 
Yo @jamessimo … how do i turn off that StackPanel feature ? I see its making almost everything a Stack Panel
Frames with a AutoLayout get translated to stack panels. If you remove the auto layout it should use a rect instead.
I have noticed a bug that gradients are not being applied from frames, so working on that. I will update the main thread for the plugin when its ready. Figma to BabyonJS plugin!
EDIT: Actually gradients are working on frames regardless of autolayout.
Here is an example.fig file showing a button and a rectangle… Both with corner radius set. When i save from figma using the plugin so save TestScreen.json all the cornerRadius in the json are zero.
Also… when i render the TestScreen.json in the BJS scene using adt.parseSerializedObject there are NO GRADIENTS on the button. Looks like a flat orange color
FixMe.fig
FixMe.fig.zip (627.5 KB)
TestScreen.json.zip (2.3 KB)
Yo @jamessimo … I think i found the Gradient issue… Apparently the render scale has to match the design.
So if the gui was design with the root height of 568 and the actual canvas is at something 800 you have to either set the adt.renderScale = interfaceHeight / CanvasHeight
OR
set idealHeight = 568 and adt.renderAtIdealHeight = true
If the actual canvas render is at a higher resolution than the gui with elements that have gradients… they dont show.
I made a playground that shows this
As you can see there is no gradient on the play now button.
But if you set line 49 to:
adt.renderAtIdealSize = true;
That will force the the canvas render scale to match the gui size
So @sebavan / @carolhmj … Is that by design that the GUI gradients DONT render when using idealHeight and renderAtIdealSize = false… Or is that a bug… it should still render the gradients regardless … Right ???
I noticed your text in the button is now correctly aligned, what did you do to fix that?
I added the -BTN as the button suffix so it makes an actual button in BJS
Also I think the issue with the gradients are the gradient coordinates are in global space. For the backgroundGradient property. When I set everything the same dimensions as the original figma design… Basically make sure renderScale matches… Then I see gradients in BJS at runtime. But still don’t show in gui editor… but it does show in BJS project
The cornerRadius is still an issue, even for buttons and rectangles WITHOUT AutoLayout set… so they Frames actually come over as rectangles… but cornerRadius is still 0
Yep the GUI gradients coordinates are on global space, so that they map directly to canvas gradient coordinates. If you need gradient coordinates to change you can also create a new gradient for it at runtime: Test 2 | Babylon.js Playground (babylonjs.com), but remember that every time it’s going to have to create a new canvas gradient object on the canvas size.
1 Like