Dashboard Design Tutorial - MUI for Figma

🔗 Logoipsum: logoipsum.com/
🔗 Product page: mui.com/store/...
🔗 Adrian's Twitter: @shpadrian
🔗 Figma file: www.figma.com/...

[@logistics_guy]

Nice. It helps me save alot of time! Please make more tutorials like this.

[@rennaynay88]

I'm interested to do a few tutorials. Anything specific you are looking to learn?

[@patrickjreid]

Would love to see more like this! I am a software engineer and design does not come naturally to me.

[@adrianstefan6349]

Hey! We're working on some tutorials with the kit right now. Thanks for the suggestion.

[@stusmith1201]

Our MUI library does NOT contain "layout" components. I searched and says none found! MUI for material v5.16. How do you edit the hover and other states of a menu item in your sidebar?

[@adrianstefan6349]

Hi, search for "Container" this is the updated name.

[@yesongkim5824]

fast, quick, down-to-earth tutorial, thank you!

[@adrianmanea413]

That's nice to hear, thank you!

[@user-in1qg6ku6n]

I appreciate you all making these videos but as someone who is very advanced at Figma, I found myself really struggling to keep up with this video. You're just pulling in things and within a half second doing stuff to the components without explaining it. Like are you detaching instances before making changes? Creating custom frames to place some of these components into?

[@adrianmanea413]

Totally understandable. Will schedule a more detailed tutorial, thank you for the feedback.

[@afrojaaktar2210]

Please make more tutorials like this.

[@binwangcu]

As someone new to Figma and design in general, I am have purchased the library and tried to follow through this tutorial. It turned out this is the "timeelapse" version of probably a few hours of hard work. Is there a "slowmo" version of this very tutorial that I can refer to?

[@adrianmanea413]

Hei Bin, there are examples in the library which defines the blueprint of how one can design screens. Are there any particular topics you'd like see covered in a video?

[@txbynbr9555]

Unfortunately this seemingly good tutorial became very hard to understand with new figma UI updates + the rather quick style of your explanations :(

[@adrianstefan6349]

An updated version coming next week (hopefully)!

[@louisewasteney2696]

The 'layout' asset he chose doesn't exist in this version of MUI...failed at the first hurdle! I wish what he was showing actually matched what it really looks like.

[@adrianstefan6349]

Hi Louis sorry for the trouble. We're uploading an updated video in a few days! Will send a message here once that's done.

[@SebastianSativaLivemore]

Looks awesome and flexible to work with! How easy would this be to export to React with something like Anima? I know Anima does support mterial UI components, but do they roll their own or are they fully compatible with the MUI Figma library of today?

[@MUI_hq]

Anima isn't compatible with this kit. You can check www.quest.ai/ that is.

[@harryhamilton8769]

Loving this design system! One thing I don’t understand is why the margin on the right is so big. I feel like it makes the interface look awkward with that gap. Is there a purpose for why it’s like this?

[@MUI_hq]

The margin aims at having the main chunk of the page horizontally centered, not taking into account the sidenav.

[@jetmartin9501]

If you're looking for a video to learn something by following along...save yourself some frustration and don't bother watching this video...you'll thank me later. Trying to follow along with this "Tutorial" was nothing short of an absolute exercise in pure frustration.....From other comments you'll see even those with lots of experience with Figma couldn't follow what he was doing. Sorry but if I had to give it a grade I'd give it a "D-" as a teaching tool....and that's probably being generous. As others have eluded to this video was WAY WAY WAY too fast. Most of the steps were done with key strokes with no details of how or what he was doing....It makes one wonder what was the objective of this video? Impress you with his speed or actually teach the viewer something. SMH. To the author: If you want this to be a tutorial you need to explain things....I had to put this at 25% speed and even then I could catch all of what key strokes that were being performed. This video certainly makes me question whether I'd want to purchase the Figma MUI library if this is an example of the type of support I would get.

[@adrianmanea413]

Hei Jet, totally agree with you here. I'm working on a much detailed video on designing with the library.

[@MultiLeechCZ]

Its good, but im also interested how you to export it to react? That is very important for beginner's as well. Simple do some page and show us conversion pls..

[@MUI_hq]

Once you have finalized the design in the free canvas that is Figma, you can use mui.com/material-ui/ to reproduce the look & feel with React, this time with hard constraints. We expand on a bit more on how in github.com/mui/mui-design-kits/issues/9#user-content-migrate-from-design-to-react. We have taken notes about your request. It could help to have more documentation. On a different note, we also have github.com/mui/mui-design-kits/issues/43 to keep track of our progress to unify Figma and React, fundamentally two different paradigms.

[@brizoladev]

Good afternoon, sorry for the question because I'm new to figma, I'm a developer and I really like working with UI material. Now I'm learning how to use figma with UI material to prototype the screens before developing them... then comes the question, all the configuration I would do in the coding component, could I also do the prototyping? including no theme settings, placing default values? Of course, for this I must buy the package on the Material UI website for Figma for 79 dollars, correct? Is there a course to help me better understand how to use the components?

[@adrianstefan6349]

Hi! You can freely customize the Figma library but you have to translate these changes into a theme provider, where you overwrite the styles. For the course, we haven't gotten this request before, but we'll definitely keep this in mind.

[@tkeo12]

Could you please tell how to add extra column to the table? Thanks

[@MUI_hq]

This might help: www.loom.com/share/6dd71cc374bc4d84af35ebb75d107d38

[@tkeo12]

@@MUI_hq Thanks, this works

[@lucaspaul5478]

nice videos, thanks for these tutorials! I bought the full version of this and mine looks different. I can't search for layout... my file in Figma says "Figma Joy UI 5.0.0 alpha.60"... yours is 5.4... what happened here?

[@MUI_hq]

You should have access to different design system Figma files. This video covers Material UI, it looks like you open Joy UI.

[@daymxn]

@@MUI_hq I'm also running into this issue. I don't have any layout components (like the one you pulled in at the very start), and I have the correct library imported (the full version of the MUI- not the Joy UI one). I see all the other components- but those layout ones are missing.

[@olivtassinari]

@@daymxn could it be a bug of Figma? What happens if you try to import it again?

[@Prithviraj-sj7op]

file not available?

[@adrianstefan6349]

Sorry this video is based on an older version of the library. Many practices do not apply anymore. We're working on a new design video.

[@chunjyebeh3603]

@@adrianstefan6349 Yes please. I am trying to follow the tutorial but it looks very different from v6.0

[@MultiLeechCZ]

Can you please do some tutorial how this work without Figma prof plan ? I cannot make another page otherwise.. Just spend 69$ for this and i cannot even use it :(..

[@MUI_hq]

I assume your question is about how to use this kit with the Starter plan of Figma. There are no specific requirements. It should work as long as you stay within the Starter plan of Figma (max 1 project, max 3 design files, max 3 pages per design file). If you are limited by the number of pages, you can either create a new "Frame" inside an existing page or upgrade.

[@adrianstefan6349]

Hei Mike, you can work inside the exact library document instead of having to define it as a library!

[@manoval1000]

The figma file have been deleted or removed

[@MUI_hq]

Thanks for raising, the file was restaured.

[@surendrawagle1896]

Is there the source code for this dashboard??

[@MUI_hq]

Hi while we don't have the React source available for this dashboard, we do have the Figma file www.figma.com/file/4DMb4AYMiXEWTcSIh9eAnw/MUI-for-Figma---Dashboard. You could start from the design to create a React version of the dashboard (if you open source it, it would be awesome). If you need a premade React template, we have a few options at mui.com/store/. Good luck!