React export from figma not formatted or inclusive

I am trying to export my website as a react site but the formatting is incorrect when deployed and not all my assets and links are included. Some links work, some don’t through the prototype section. any suggestions welcome - please let me know if I should include other information.

Hey @momoja thanks for writing, sorry about that!

If you could share a simple version of your file along with some visuals (screen recording / screenshots) of what exactly is missing in the react export, I can definitely look into this for you and hopefully find a solution! Thanks :pray:t3:

Below I have attached screenshots. Going from FIgma to REACT, in your preview shows the errors

one, the mint now button does not look the same
second, the mobile version doesnt carry over with the breakpoints

When exporting to REACT some of these components disapear completely, and while the links and anchors work in your anima preview they do not work when deployed once exported in react.

image

image

I have invited the email provided to me for support with access to the file, is that suitable to access the file itself? Is it required for me to post this all in public forum?

Hey @momoja thanks for writing all of that! A few things:

• I have to look into the ‘mint now’ button to see why it’s not rendering properly.
• What do you mean by ‘the mobile version doesn’t carry over with breakpoints’? Check out this video about how to Add breakpoints in Figma, you can add the mobile and desktop versions together as breakpoints. But it doesn’t look like you set the constraints properly, everything is set by default to top, left, so best to fix those constraints and make sure to check ‘use figma constraints’ in the responsive tab in the Anima plugin.

Which components are missing when you export to React? I exported the screen to code sandbox and actually the anchor and external links worked, can you resync and try again?

Thanks!

1 Like

For the mint button, it seems I can make it render by removing it and readding it, perhaps it is a glitch?

And my main issue is when exporting to React - the export file when ran locally does not render the same way. It becomes out of alignment, so the preview is not always accurate. This includes loss of links when going to react also.

Note also, in preview not all of my links and anchors do make it through the process. It seems the top nav bar commonly fail while the bottom links seem to be reliably working.

Glad to hear you managed with the button by removing and re-adding it!

Can you please try resyncing to a new project and see if the links still don’t work? Because actually in my Anima preview they’re all working properly. Let me know which ones you’re struggling with, if any.

We’ll look further into your file and the alignment discrepancies in React and I’ll follow up with you via email once I hear back from my team :+1:t2:

Thanks!