Figma import is blank

[tatiang]

I’m just getting started with Figma. In the tutorial video, it looks like you can just copy and paste the Figma url for the design you’re working on into the Assets section in Thunkable. When I do that, I just see a blank screen with a + at the top:

If I click the +, a new blank screen gets created. But it’s the only screen in the project.

Here’s the Figma url: https://www.figma.com/file/Uuj6bXbuwImdT1osJrTBky/Untitled?node-id=0%3A1

And Figma layout:

And Thunkable project:

https://x.thunkable.com/copy/33c888458c428d27260761df1500cd07

[tatiang]

I was missing a frame. I had just created a rectangle containing a bunch of rectangles but the outer rectangle needed to be a frame instead.

[muneer]

The frame in Figma is the screen size in Thunkable. So not only having a frame but setting it to the proper size so that Thunkable can import it to fit the design screen. I saw that iPhone 8 from the frame selection is the most one that fits Thunkable design size.

[tatiang]

Thanks. The documentation does say:

At the moment, we are only supporting imports for mobile designs at 375x669 px in portrait mode.

So that’s the size I used for the frame.

[jared]

@tatiang

that’s the size I used for the frame.

you can experiment going taller, but not wider. hopefully we’ll have the import system nailed down over the next month or so! It’s tough but a powerful feature that will only get better as time goes on!