How to Synchronize Figma Files with Thunkable

How to Design in Figma
First Of all, open figma.com

Click Log In With Google


Click the Plus Icon in front of Drafts.

Now click the Icon icon.

In it Select Frame.

Then you will see this-


Click Android.

Now in the screen, create the design of your choice
by clicking square icon. Under That, u can see all shapes.
Options
Please note only to add text or Place image in the project

Synchronizing with Thunkable X

Now that you have done funking let us synchronize figma with Thunkable.

New Project

Note : Please tick the box in front of Try it Out. It is not appearing in the screenshot because of a technical issue.

Now, Click the Image Like Icon.

Click the add button in front of Figma Files.


Jump to Figma for a sec and open your Project.

And Tick the box infront of android 1
Now click add as screen.

You are done!

2 Likes

Thanks a lot!
This gives thunkable a huge competitive advantage vs adalo and bravo
You made me go back to thunkable ^^

2 Likes

Done with what? That imports the Figma file. But do the objects I’ve created in Figma become actual components in Thunkable? Or is it just a visual template/grid that I can use to then drag components on top of?

Oh… i totally forgot to mention.

Tick android 1 and add as screen

I will add it.

Thanks

@tatiang

I Guess it is a visual template…i mean more of that… but components like Place Images and text which are supported in thunkable could be edited with the blocks figma section.

3 Likes

Hi, what do you mean with ‘Tick Android 1’? Where can I find that?

Hi all,

I add my figma desing on new UI. When I select the screen to add the thunkable from the asset menu, I couldn’t do anything on the screen. There is a too much delay. Did u get it? And how to delete figma file from the asset?

2 Likes

I tried importing Figma file as a screen in Thunkable but the result was not at all usable. I did not find any option to remove it from asset list.

2 Likes

It is explained in the tutorial.

Sorry for the late reply