I am a designer and wanted to try Anima to generate MUI react code and preview it to see how well it can produce a working prototype. I created a working prototype mostly using mui components with the exception of the top bar and left nav.
Do I need a paid account to do this?
How might I do that? Can someone walk me through it - realize its a lot to ask. I have no developer experience. I have been using AI to ask all sorts of questions but the answers are all over the place and trying all kinds of things, but nothing that clear. Have been working on it for several days.
Hi there! Our Figma plugin does support code export into MUI, but only in Inspect mode. That mode’s advantage is that you can choose from a wider range of styling and UI libraries options than what’s available through Sync mode (which is the one you were using now, judging by the screenshot).
To switch to Inspect mode, simply click the “Switch” button, as indicated by the red arrow:
The main limitation for the Inspect mode is that it doesn’t support full prototype exporting, but rather single screens / components / frames. So if exporting your design to MUI specifically is crucial, you’ll need to be using this mode. You can read more about the Inspect mode in this article from our documentation
ok, thanks for the explanation. I took one frame/screen and selected playground, it generated the code and then I selected open in playground. It isn’t generating a preview of what the code is generating but giving me an error message. My network is working fine but I am inside a company vpn. Is that the issue?
I see. Could you please share with me the link to that Playground? Also, if you can share the link to the specific Figma frame you’re exporting, I could take a look at it. You can send them to me via support@animaapp.com
