Figma Design Issue

Hi I’m using Thunkable for a week now and I have find out that we can import our Figma Design to Thunkable but I’m facing many issues :-

  1. The Design I created in Figma when I import it in Thunkable its completely incorrect and the dimension and everything got messed up, I have tried all the screen size in Figma and also custom sceen size of Thunkable too but not working,


  2. Also it is showing completely different in Live Smartphone testing, totally different then Live preview as you can see, but the other screen which are made Directly in Thunkable they are working fine.

2 Likes

Hi Thunkers !

First of all, I’d like to say that I’m really glad that Thunkable improve the UI functions with great tools such as Figma. Thunkable X is the best nocode app and with Figma, the combo is going to be awesome.

I’m trying for 2 days now to import “correctly” my Figma project into thunkable and it seems to be a hard work… I mean, I did the import with my Figma link, I choose the pages… Easy task.
But even if I choose the Android Frame and only use “Rectangles” to build buttons and pictures, my design appears to be messy when I import it.

Like @bakchodpubg123o3x my design is completely out of scale and it took me a while to rearrange the whole page.

So my question is ? Does anyone has a “template” or a quick way to do things properly in Figma so it can be easier to import it without issues ?
I really want to finish this big project and Figma design could save me real time.

Have a good day y’all !
Sam

1 Like

Welcome to Thunkable.

You need to set the screen size in Figma to fit the design in Thunkable.

I suggest you see this demo as part of another post but should be a good start.

1 Like

Hi @muneer ! thanks for answering me so quickly :wink:

I watched the video you send me and it helped (mostly on frame sizes), so thank you for that.

In the video (and also on the figma project of the game), I saw that a “group” in Figma (a rectangle shape and a text block grouped) was used as a button in Thunkable.
I tried to reproduce it but when I set a nocode block on this group, nothing happens, I can’t click on it.

Do I miss something in the integration ? I understand that position of each element in Figma’s layers is important and I played a little with it to do some tests but I still can’t find my way into this ^^

If you have (or anyone else) a moment soon, I’d be glad to hear a tip on it !
Have a good one :slight_smile:

1 Like

Yes, this is common. The action is done on Thunkable side not in Figma side. So once imported, set the click event to whatever you want.

1 Like

Thanks a lot ! I think I manage to import “correctly” my Figma project and it keeps me going forward on my project :wink: What a community !

If I may ask another question about UI, I’m struggling with a feature I don’t understand…

My application offers at one time to choose between three options. To visually signify this choice to the user, I want to color the button differently. I am well aware that with the import of Figma I cannot change the color of the button background (or group), so I created a series of colored buttons (same size and font than the first ones) in another group. The problem is that I can’t manage to change the button properly. I tried to download the new buttons in PNG and add them as assets but when I ask Thunkable to change the image of the button by the new one when clicking, he overlays the new one over the old one (with a different size, which doesn’t look very good ).

Does anyone have an idea to carry out this manipulation “properly”?
Thank you in advance for your help;)

p.s : a screenshot of my issue is attached

1 Like

I made a quick demo of what I understand from your description,
https://x.thunkable.com/projectPage/6202a03590eee10010f11ea3

Please check.

1 Like

Hi @muneer
Thanks again for your quick response.
I was able to watch the project you share and it’s interesting to see how you designed the programming side. I always appreciate the work someone shares with me.
In my case, I really want to leave the 3 buttons active, so that the user can always change his mind (sort of). Hence my desire to change the color of the button to show him the choice he made.
So would you have an idea to correctly assign the alternative version of the button that the user checks?

I enclose the link to my project, it may be easier for you.
https://x.thunkable.com/copy/a75596ee7b60cd40aba309fa1ce7283a

1 Like

I have changed the demo app to show what you just described. You can remix the demo app again to get the latest changes

See a sample

[Edit]
I noticed in your code that you have the click block attached to the Group component which contains an SVG image and a button imported from Figma.

I tested button 2 and I can see a brown rectangle which means what even you are doin actually works.

Well, that’s the problem! The image I want to import (the green button) to replace the original (brown button) does not replace it. It is displayed from above (and also in the wrong size :frowning: ).

Is it possible to simply replace the group with another? Is there a way to change the image of the button (not the text) by replacing it with an empty button?

There’s an exemple of what I did before making the design with Figma. I just want to do the same but with a Figma design : Thunkable

1 Like

is changing the button image via blocks not working for you?

1 Like

Hi @jared !
Thanks for answering me too ! I’m lucky :wink:

Nah… that’s what I tried but I got the weird overlay you can see in the last muneer’s post…
Actually, the thing is, with the Figma import, I’m having a little trouble figuring out what I can change or not. Since I created groups, I don’t know if the button (square shape) can be changed independently of the text (in .svg) above it.

I tried to only change the color but I have the impression that it bugs the import of Figma because the buttons empty soon after (see the screenshot attached)

I would like an explanation of that and I will continue to look into it. Thank you again for taking my question into consideration.

Do you mean changes inside of thunkable after an import? such as changing an elements image, border etc?

or

You want to make changes in figma after importing your app and you want to see the changes automatically appear in your thukable app?

1 Like

This one ^^ I do my best to make my Figma project looks good and I just want to use some of the imported items into Thunkable in order to add some cool features (like the one I talked about earlier with the button changing colors)

I would recomend making both buttons in figma. layering them on top of each other.

check out this quick example i put togetheer

https://x.thunkable.com/projectPage/6203df367bbf0500115d0cb0

here is the figma link

the import system isn’t perfect yet. Sometimes you’ll still want to replace an imported element with a native element (at times)

1 Like

I duplicated the Group Btn2joueurs to make 2 groups one with the background picture and one without then I changed the blocks to show/hide respective group. The newly copied group is by default hidden (visible switch set to off).

image

I tested it in my computer and in my phone and it works.

[Update]

I just noticed that all imported buttons from Figma are hidden (visible turned off) but in the computer preview they actually show. This blocks the background image that you are placing in the group component.

I think @jared needs to look into it with the development team.

1 Like

Thanks for looking into this and helping debug here, guys! Not sure I understand here.

So are you creating hidden components in figma and importing them? Or are you importing visible components and they import as invisible?

1 Like

I just did more testing and found out that Thunkable mobile app is viewing it correctly (the buttons are hidden). The issue is with the Web Preview.

I’m not sure if the buttons are hidden in Figma, I will leave this to @samuelbaudrillartwuc to answer.

1 Like

Wow! You guys are so nice :wink: There are some block connections that I didn’t think of and I can confirm that this will really help me!! This “trick” with the “not” block mindblows me ^^
mindblowing

Concerning the fact that some buttons seem to be hidden after their import from Figma, for the moment, I was not aware of it. I respected what is recommended in the Thunkable doc (very well done by the way) and I simply created buttons with rectangle shapes and text on top. Anyway, I did not at any time indicate that they had to be hidden.

I enclose the link of my Figma, in case you notice a manipulation on my part that could cause this problem… https://www.figma.com/file/Sk6zzdrK5Io4SL9fuQ5Mie/WW-Counter-App?node-id=0%3A1

I’m going to test your suggestions and see what comes out of it.
Thank you again for taking the time to help me, what a community!

2 Likes

Awesome! glad to see you chugging along here!

Be sure to share your app in #shareyourprojects when it’s more ready! We’d love to offer feedback and test it out for you!

1 Like