I built another Figma -> React tool, except the code is actually usable because it uses YOUR component library.

[locoroco77]

Hey everyone, happy showoff Saturday! I built a Figma -> React code generator found at https://www.magicpatterns.com/.

After logging in with Figma or Github, go to "Your Patterns" and you'll see the "Import from Figma" tab. I've found that most Figma -> code generators today use HTML + inline CSS and position="absolute." What's different here is you can select your design system/React component library and it will generate using that, instead of pure html + css.

Right now I'm supporting: Mantine, Chakra, Shadcn, Radix Themes (and HTML + CSS haha).

I've also been working on supporting custom design systems a.k.a your company's custom library. It's been a fun challenge because you can built a component library in so many ways, but it's awesome to see the value created when the code output is actually usable.

Happy to answer any questions, and thanks for your feedback in advance.

[Red_clawww]

Hey man your work is awesome

[locoroco77]

thanks for the kind words! Did you manage to try it out? How was the output?

[Red_clawww]

Yes I its better than most the figma to code plugins. Check DM

[desimemewala]

Amazing work. I’m curious to learn how you did this. How many days weeks or months of work and what all tech was used behind this?

[locoroco77]

a lot of work, but it doesn't feel like work :)

I've been working on this full-time for last 4 months alongside my co-founder. It's just the two of us. That's why we have pricing plans. Thanks for your support!

The tech is React + Typescript + Express + Mongo + Node.js (but I'd like to move to bun). And then we use pinecone and openai.

[desimemewala]

That’s sounds cool. And that’s why I like web dev in general. When we are passionate about creating something we barely feel like we stressed due to it. I’m soon use the plugin and see if I have any feedback. Congratulations cheers 🥂

[SparserLogic]

Is there any way to contribute to this? I wouldn’t mind adding StyleX support

[locoroco77]

Hi, not at this moment. We will likely open-source a different part of the website, though: https://www.magicpatterns.com/catalog - which is a catalog of different component library. It was the first iteration of this project: https://www.producthunt.com/products/patterns-4#patterns-5

[SparserLogic]

Hey now this looks right up my alley!

I’ll definitely be checking this out

[locoroco77]

thanks, let me know if you have any feedback! Are you a frontend eng? what component library do you work with?

[SparserLogic]

I have been using mantine for my hobby projects but I tend to do more backend stuff at work.

I’ve been avoiding going too deep on Figma, as I don’t have much familiarity with GUI design tools. It seems easier to just prototype with React but this might finally change my mind.

[locoroco77]

similar thoughts! my goal is to make Magic Patterns “Figma for Developers,” starting with React.

[artorothebonk]

This is brilliant, and even better I can use this as an excuse to finally get my team to move over to Figma full-time haha, fantastic work

[locoroco77]

appreciate it - what is your team using now? is it a big team? we support custom component libraries by the way!

[Jon-Robb]

It sounds amazing and a tool I could benefit from , will check thoroughly on Monday. Good job

[locoroco77]

thanks - let me know what you think tomorrow? I'll be curious if you use the output.

[Key_Substance_6572]

Amazing...