[figma] Export to React code

[oliviertassinari]

I'm creating this issue as it seems to be growing in terms of demand from our Figma kit users. It's about step 3 of #10 (comment), where #10 focuses on step 1.

User requests

I have started keeping track of this early 2022:

• Its good, but im also interested how you to export it to react? That is very important for beginner's as well. Simple do some page and show us conversion pls..

  https://www.youtube.com/attribution_link?a=dkzVlr8oOCkJxesn&u=/watch%3Fv%3DhCGiyI_NmRY%26lc%3DUgz1vAyDlJ7L8pEJlgR4AaABAg%26feature%3Dem-comments

• It's possible to export the design generated with the Figma tool as React code?

  https://mui.zendesk.com/agent/tickets/1844

• Can we designer give developers a Figma prototype with MUI components and they can download the code of each component? How does this work? Can we see a demo for this?

  https://mui.zendesk.com/agent/tickets/1867

• Is there any way to export from Figma and get the output to be React Web code that imports and utilizes the actual MUI components instead of creating react components?

  https://mui.zendesk.com/agent/tickets/1913

• "How easy would this be to export to React with something like Anima?"

  https://www.youtube.com/watch?v=hCGiyI_NmRY question by Sebastian

• "We subscribed for the purpose of converting MUI Figma Design to React Code"

  https://mui.zendesk.com/agent/tickets/6969

Benchmarks

• https://platform.uno/unofigma/
• https://www.notion.so/mui-org/Low-code-directions-available-10aeeb10596d41ac97593c6928c361aa#6493eca06cd14ba1bec7ca39e7303271
• https://quest.ai/
• https://www.animaapp.com/. A video demo https://www.youtube.com/watch?v=0jOoOmbcW04
• https://www.figmachine.com/
• https://www.overlay-tech.com/
• https://docs.amplify.aws/console/uibuilder/figmatocode/
• https://clapy.co/
• https://www.fae.dev/
• https://twitter.com/chakra_ui/status/1613267652717191191 & https://figma.chakra-ui.com/

[nareshbhatia]

Reposting my comment in the Figma community:

Please consider using the Figma Tokens plugin to drive this template. This will not only reduce the designer's effort when making changes but also the developer's effort to synchronize to design changes automatically. Here's Jan Six's introduction to the plugin.

[oliviertassinari]

@nareshbhatia This GitHub issue is not about synching the theme, see #10 instead that focus on this problem.

[nareshbhatia]

Thanks for clarifying, @oliviertassinari. Also I see a reference to Figma Tokens in issue #10. So all set there.

[lawrence910426]

Really hope this feature could be implemented! Wish all you guys a nice day :D

[msmikesm]

Any updates?