Material UI Code from Adobe Xd

Developer Topics
1

Hi there, I just wanted to check the plausibility of something I’d ideally like to be able to do. I’m designing a web application using Adobe Xd which will be built in React using Material UI components. I’m aware you can use material UI components in Xd when designing, what I can’t seem to find information on is what happens when this code is exported in Anima? Does the generated code successfully include the material UI components or just some style code representing the style of that component?
Thanks

2

Hello Harry!

Thanks for your question!
Basically, the exported project adds the Material UI package as a dependency, and the code uses it.
Also, if you would like to, we have a 7 day trial so you can get a Pro subscription and export so you can see the code for yourself!

Let me know if this was helpful to you and we hope you have a great day!

3

yea you should just try it
it does export as actual and functional material UI react code
great for single page app
for multiple pages, good luck lol

4

Hello Hauser!

Thanks for commenting. What specifically did you find troublesome when working with Anima for multiple page desings?
Perhaps we can help you :slight_smile:

Thanks!

5

hi @Andres i’m interested to see if.i can speed up my front end development of a multipage app with an adobe xd export to anima Material UI export workflow. The complexity of working with MUI lies in overriding and/or customizing MUI components to fit custom designs specs. It can be a painstaking process. Typically the sx prop is the easiest way to do that in MUI. That said, how does figma handle this, specifically how does it customize MUI overrides. If you think it’s possible to achieve a workflow please let me know. If you can be as detailed as possible that would be great! thanks in advance!

6

Hello!

Thanks a lot for your patience and my apologies for the delay!
So, currently we are not supporting MUI anymore, that might change in the future and we can keep you updated with this.

Additionally, Anima doesnt support overrides within the plugin, any override would have to be done on the exported code itself. What Anima is doing is basically translating the design you created in Figma or Adobe XD into React, HTML or Vue code.

Let me know if this answers your question and thank you very much!

7

Hi Andres, thanks. So, how is it styling adobe xd component exports as well as selecting between say a tab component and a menu? How’s it not getting components confused. thank you.

8

Hello Kman,

Thanks a lot for your message and patience!
So, may you please clarify a little bit what you mean?
I couldnt fully understand.

Thank you so much and I appreciate your understanding with us :pray:

9

hi Andres,
so how does it recognize the differences between related or very similar react components if they’r coming from XD? and in terms of style is it using a style = {{ }} prop?
If you’ve a video to an xd export to anima react, that might be very helpful?
Thank you!

10

Hi Andres,

I’m currently evaluating the Figma-Plugin “Anima” in regard to code-generation (Vue+CSS). Could you please elaborate your statement:

So, currently we are not supporting MUI anymore, that might change in the future and we can keep you updated with this.

We plan on integrating designs, translated to code via anima into a scaffold app, consisting of

  • spring boot
  • vue
  • primevue
  • material ui

Would you advise such an approach?

1 Like
11

I would also like to know this