Figma design all over the place when imported

I am trying to import screens I have created in Figma however once imported the design is all over the place, sizing is off, elements moved etc.

Anybody has any suggestions on how can I import a like for like version from Figma?

1 Like

I have yet to see a successful implementation of Figma in Thunkable. The little I tried when it first was added to the product was a failure. I’m sure part of it was my fault but I’d love to see a proper tutorial on how to do this well.

3 Likes

@vvaroczii can you try delete Screen1 and then import into a “blank” Thunkable project?

Let me know whether or not that works for you, if not please PM me your Figma file

2 Likes

I have only tried implementing Figma once, just to test it out, and it worked quite well for me:


The sizing and spacing is also pretty on-point.

3 Likes

@domhnallohanlon I am unable to delete Screen 1, I get a blank screen and on refresh the screen is back.

On import I get the below.


Should me

Thanks @codeswept unfortunately I dont get the same result but hopeful that this will be resolved.

1 Like

Can you try importing before you refresh the page?

What does the alignment look like when you preview your app?

The only issues I can see are the icons at the top of the screen - right?

For the “My profile” and job title labels can you set the text alignment to left?

Icons displayed incorrectly, the line wasnt imported, some of the labels have been resized…
Also I have noticed when I link a block to a component e.g. on click action to a card, in the companion app the card is invisible…

Does it appear in your component tree?

Nope.


Can you PM me your Figma file so please?

Getting there @vvaroczii! :grinning_face_with_smiling_eyes:

2 Likes

Oh nice!!!