How to Use `MaterialUI` in `Figma`?

[nelsonic]

At present our Figma designs are using basic boxes we created by hand:

Direct link to Figma page: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=246%3A2

It's not ideal. 😕

We risk creating more work when it comes to building the screens/interactions because engineers will be tempted to re-create the screens as they are instead of using built-in MaterialUI Components.

https://m3.material.io/develop/flutter

So ...

Todo

• [ ] research how to add MaterialUI to Figma 🔍

[nelsonic]

https://docs.flutter.dev/development/ui/widgets/material

[nelsonic]

Trying this one out now: https://www.figma.com/community/file/912837788133317724

[nelsonic]

After opening that previous link in Figma you will see the following:

"Thank you for duplicating our free demo of the MUI for Figma: a comprehensive component inventory for Figma, including over 1,500 unique elements that cover the full range of states and variations of each component."

Clicking the link takes you to: https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta#design

The cheapest version is $69 but then if you want the components (only if we weren't using Flutter) it's more:

I don't mind spending a bit of money on this. But it feels like something that could be free ... 🤷‍♂️

So ... a bit more googling ... https://www.figma.com/community/file/1035203688168086460

Trying this one now.

[nelsonic]

That's a lot of lavender ... 🟣

Example components:

@iteles this is right up your street. 😜

[iteles]

😂🙃🙅🏻‍♀️

On the plus side, I'm SUPER keen on the idea of using a UI component library like Material UI to keep the MVP functional but also usable and consistent so that poor UI design doesn't detract from what we're actually trying to test, ie so it's not fugly.

Not to mention time gains from not having to manually write the CSS for every component from scratch.

[nelsonic]

FYI: Using the official Google Material Design icons: https://fonts.google.com/icons