Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Use MaterialUI in Figma? #12

Open
1 task
nelsonic opened this issue Feb 7, 2023 · 6 comments
Open
1 task

How to Use MaterialUI in Figma? #12

nelsonic opened this issue Feb 7, 2023 · 6 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed priority-1 T25m technical

Comments

@nelsonic
Copy link
Member

nelsonic commented Feb 7, 2023

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

image

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

image

So ...

Todo

  • research how to add MaterialUI to Figma 🔍
@nelsonic nelsonic added enhancement New feature or request help wanted Extra attention is needed priority-1 T25m technical labels Feb 7, 2023
@nelsonic nelsonic self-assigned this Feb 7, 2023
@nelsonic
Copy link
Member Author

nelsonic commented Feb 7, 2023

@nelsonic
Copy link
Member Author

nelsonic commented Feb 8, 2023

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

@nelsonic
Copy link
Member Author

nelsonic commented Feb 8, 2023

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

"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
image

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

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
image

Trying this one now.

@nelsonic
Copy link
Member Author

nelsonic commented Feb 8, 2023

That's a lot of lavender ... 🟣
image

Example components:
image

@iteles this is right up your street. 😜

@iteles
Copy link
Member

iteles commented Feb 10, 2023

😂🙃🙅🏻‍♀️

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
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed priority-1 T25m technical
Projects
Status: No status
Development

No branches or pull requests

2 participants