[Solved] How to Synchronize Figma Files with Thunkable

Tutorials and DIY Guides
,
1

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

Click Log In With Google

image
image1366×768 111 KB

image
image1366×768 110 KB

Click the Plus Icon in front of Drafts.

Bar figma
Bar figma1366×48 6.53 KB

Now click the Icon icon.

In it Select Frame.

Then you will see this-

Phone Options
Phone Options292×537 12 KB

Click Android.
Google Pixel
Google Pixel302×521 1.13 KB

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.

image
image1366×768 100 KB

Click the add button in front of Figma Files.

image
image1366×768 102 KB

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
2

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

2 Likes
3

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?

6

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
7

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

8

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
9

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
10

It is explained in the tutorial.

Sorry for the late reply

11

4 posts were split to a new topic: How do I import designs from figma?

12

Great question @tatiang - for any element or vector that you import from Figma you can choose in Thunkable which component to assign it to with the following dialog:

figma_assign_component

Even without going through this step the blocks section for each imported component will allow you do things like event handling that you can do with our built-in UI components:

figma_assign_event

cc: @muneer @tchind

@lukas_b_98knm - this is just referring to the frame size you should use in Figma. My preference is to use a frame that’s the same size as the phone screen in Thunkable, we can handle all the scaling from there.

figma_frame_size

Can you share your Figma file @cihan please? It’s hard to say what’s happening here without seeing the file structure

1 Like
13

I figured this myself but I had what I can refer to as click sensitivity issue. When you have a rectangle inside another it becomes hard, at least for me, to select one of them in Thunkable designer. Is this something you encountered?

14

I know this is a side issue but I think it’s an important one for maybe a separate topic or bug report. Selecting one component when two or more components are overlapped is much harder than I expect each time. It seems like the tolerance for where you click to select a component might be too much. So when I have the top-left point of my mouse cursor on top of a component that is behind another, it doesn’t always select it; it often selects the component in front even though my cursor doesn’t seem to be touching it. I know, hard to picture!

1 Like