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 :-
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,
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.
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.
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
Thanks a lot ! I think I manage to import “correctly” my Figma project and it keeps me going forward on my project 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;)
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?
[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 ).
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
Hi @jared !
Thanks for answering me too ! I’m lucky
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.
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 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).
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.
Wow! You guys are so nice 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 ^^
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.
).
