I feel like there's pre-Designer Up, and post-Designer Up levels to design. Your channel's content is incredible and this video just blew my mind even more. Thank you so much, I've been really enjoying and learning a ton from your videos!
This comment really made me smile 😁I so appreciate you taking the time to share your thoughts and so happy that you are learning a lot from the content!
This is amazing, as a newbie, this is the very definition of not reinventing the wheel. Let the senior designers creative a design system. Thank you, Thank you.
I used to think that using pre-made design components was a bad thing, but after watching your video, I realize it's actually efficient and smart. Thank you for helping me understand that there's no need to create all things on my own. I feel much better now! Thanks a lot 😊
@@KuldeepSingh047I’m so glad to hear that!!! Yes, we borrow things all the time whether it’s icons, illustrations or UI components, it’s all about how you put it together to make great things and solve problems for users. Good luck❤
Unfortunately, I do not know English. So, I understand something but not everything. But that's not the case at all in this video. No hectic lecture. Clearly and distinctly spoken. And everything explained to the point. TOP. This is really fun. I understood everything. Thanks a lot
@@DesignerUp So, in the video here, I understood everything. That fits. But 85% of all tutorials from others I understand only with difficulty or not at all... I must soon look at your other tutorials 🙂
Thank you so much for sharing this information. One of my in interview, the interviewer asked me that "why material design system is famous?" That time I did not understand but now I understand and know the answers. Thank you for sharing this 😃
This is so incredibly useful! Been procrastinating for a while on building my portfolio website, because design isn't my strength, but this should help a lot. Thank you!
Thanks for the review, the introduction to some of the design kits is useful. I would not title this a 'Full UI Tutorial'. It is more like a high level overview of Figma and its evolving ecosystem of design kits.
This video is a valuable resource for designers everywhere, and I'm grateful for the time and effort you put into creating it. Thank you for sharing your expertise with the community and helping us all improve our design skills. 👍
06:41 "...harmonized and accessible ..." . . . SOMETHING HAPPENS HERE . . . "...and then when you find something".... You kind of jumped from nothing in the background to a color palette appearing in the background out of nothing. Can you please explain how you did it?
Very comprehensive review. i am now familiar with the design process, using Design Toolkits and Figma itself, even though i am a complete stranger to it. thank you so much! you are really good at this!
Thank you! I have one concern however. The way you're adding the instance-frame at 03:35 is not gonna work because you don't create a frame and hence - it cannot be viewed as a prototype (preview won't work).
From a survey I recently did, these can be helpful up to a point but you eventually come to find that the user experience you’re trying to achieve and problems you are solving will have specific implications on your own product and UI flows as you scale. Ultimately many end up using a combination of these kits + thier own UI kits. Short answer: it’s common, but not exclusively and only up to a point.
Thanks for the overview. I'm a newbie to Figma but a long-time front-end dev. I'm confused about the next steps after laying out the components. How does this translate into styles for an app or website? Can you point me to a video that addresses this?
Thank you so much for putting this content together. I love the simplicity of how you walk us through the kit usage. I have been struggling with how to use kits for my design. I did have a question, you chose the small screen to start your design and it was a 600*800. When I dont use the kit and I choose from frames to build my design and I select iPhone 14 as an e.g. the size I get is 390*844. What am I not understanding here?
please describe how to use the prototype of these components for example If we drag and drop the menu from the material to our design then will it be responsive or will we have to make it by ourselves.
I have a few questions: 1. Is it okay to admit to a recruiter that I used Google Material Design system? 2. How should I share my work with others? Should I hide that I'm using the Material Design system? 3. When creating a case study, should I share the Material Design components, typography, and colors I've used?
1. Yes, you can share with a recruiter that you used MDS as a starting point just make sure you are customizing it and creating flows that meet your own user research requirements. 2. You ultimately should be customizing this and just using it as a starting point. Perfectly fine to share that you are doing so 3. Yes you can. Ideally you want to be working on your skill and craft and learning how to create your own UI components but it’s fine to disclose whenever you are using an existing kit as a starting point.
Nice! But allow me one question to ask: What to do, when the Angular Material Kit is realeased in a new version? How to update my own copy in Figma? Thanks in advance 🙂
Great video! Thank you so much for making this! one question, how did you generate the color platte?? I didn't see that part.... and the typography too...
Hi, and thanks for your tutorial, I don't know why I'm wrong or if my figma doesn't work well, but I can't get the plugin to work. It's really frustrating because I'm also very expert in Figma, but this plugin doesn't work for me and I could use it a lot. It practically doesn't generate the graphic elements when I click on diagram generation.
Thanks for the great content. A question on M3, when the theme builder generates a palette on custom color, some of the colors generated are not something we like. How would we use the DS if we wanted say a different shade for Secondary or a State?- can we pick n choose shades and auto-update the components?
A design system is just a set of rules components and implementation guidelines so although you can, ultimately the goal is to create your own based on your own product or project needs. Here’s another video that goes into more detail ruclips.net/video/BISC15OPeGA/видео.htmlsi=Agu6222a0ZIBfjyi
With the ui kits from the community, there are also updates from time to time. How does this affect my loaded kit? Especially because I might want to make my own adjustments. And because I might not want to have all components 100% Google conform.
That is a good question and a common complaint about Figma community files in general. At this time there is no way to pull down updates seamlesslessly. You would need to copy the file again and copy over components or make changes manually. Hopefully this is a workflow issue they will consider addressing soon. forum.figma.com/t/need-a-way-to-get-latest-updates-or-subscribe-to-changes-from-a-published-community-file/32571
I believe that many of them are. If not through the brand's site directly, then through the UI kits plugin for Adobe XD here helpx.adobe.com/sg/xd/help/access-ui-kits.html
Hi Elizabeth, thank you so much for sharing! Your content is super helpful, but I have a question: since it's much easier and quicker to build prototypes while design systems are widely used, do we still need to spend a lot of time learning UI/Figma skills if my goal is to become a UX/UI or product designer as opposed to becoming a UI designer?
It’s not your title so much that matters but the expectations and responsibilities dictated by the company you are working for or the product you are working on. For example an early stage startup might expect their UX/UI designer to be able to do lots of rapid prototyping with existing UI kits until they get funding and can invest in hiring a UI focused designer to do eveything from scratch. An establish company might hiring a UX/UI designer to work strictly on building out their own design system. These are just two examples, context matters. Here’s another video that should help clarify some of the considerations: ruclips.net/video/F09ZQUdzxVg/видео.html
I'm having trouble getting the material theme builder plugin to generate/create the color pallet and typography scale. It seems that the color diagram option in the plugin settings just links you to the Figma page of the material 3 design kit. Is there something I'm missing or can you not generate the color ramps/typography with the plugin anymore?
Hi, i don't understand, we can use the design system of material design/microsoft (or whatever), but each project have his own visual identity, so can use it for a real project ?
the thing is , there is a very important rule in design called Jakob's law, so this is very important to use ui kits for formal website where the purpose of the web app is to enable the user in navigating easily even on a website they have never used before, but because you adhere to the principles like Jakob's law, the user will still be very familiar with your website. This is the true purpose of ux design.
If you want to learn how to apply design systems like these to create real products and an impressive portfolio. Come join our course! designerup.co/product-design-ui-ux-course
You have started off from a point which is totally unknown to a beginner like me. Please start from the basics, else what you are talking about is pure gibberish
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
I feel like there's pre-Designer Up, and post-Designer Up levels to design. Your channel's content is incredible and this video just blew my mind even more. Thank you so much, I've been really enjoying and learning a ton from your videos!
This comment really made me smile 😁I so appreciate you taking the time to share your thoughts and so happy that you are learning a lot from the content!
This is amazing, as a newbie, this is the very definition of not reinventing the wheel. Let the senior designers creative a design system. Thank you, Thank you.
I don't know why I thought using things that were already created was a bad thing, but there's no need to reinvent the wheel. I feel so much better
That’s our secret haha. We all just borrow and steal like an artist and remix it all into something unique. Work smarter not harder! 😉
@@DesignerUp you’re amazing thank you so much
I used to think that using pre-made design components was a bad thing, but after watching your video, I realize it's actually efficient and smart. Thank you for helping me understand that there's no need to create all things on my own. I feel much better now!
Thanks a lot 😊
@@KuldeepSingh047I’m so glad to hear that!!! Yes, we borrow things all the time whether it’s icons, illustrations or UI components, it’s all about how you put it together to make great things and solve problems for users. Good luck❤
This really blew my mind. This could x10 the speed of any designer. Thanks for putting it up.
It’s true, design systems help me design 10x faster for sure!
thank you! After watching this, all I studied before in Figma, just now made all the sense to me!
Wow that’s amazing to hear!! Good luck with your designs!
I extend my heartfelt gratitude for the wealth of valuable knowledge you've shared
Unfortunately, I do not know English. So, I understand something but not everything. But that's not the case at all in this video. No hectic lecture. Clearly and distinctly spoken. And everything explained to the point. TOP. This is really fun. I understood everything. Thanks a lot
That’s so good to hear!! What language do you speak Michael?
@@DesignerUp German
I’m hoping to be able to add more translations to my videos in the future so thank you for sharing 🙂
@@DesignerUp So, in the video here, I understood everything. That fits. But 85% of all tutorials from others I understand only with difficulty or not at all... I must soon look at your other tutorials 🙂
Thank you so much for sharing this information.
One of my in interview, the interviewer asked me that "why material design system is famous?" That time I did not understand but now I understand and know the answers. Thank you for sharing this 😃
This is so incredibly useful! Been procrastinating for a while on building my portfolio website, because design isn't my strength, but this should help a lot. Thank you!
I do hope it does help! It helped me, even as a designer I procrastinated on my portfolio forever 😅Good luck!
Wow... 🔥🔥
As a newbie? I never knew designing was this easy. ❤️❤️
Thank you very much.
Wow...this is great Elizabeth...many thanks.
This is actually one of the most amazing video with practical example on how to use those Design Systems. Thanks a lot!.
So glad to hear that! You’re very welcome! 😊
Thanks for the review, the introduction to some of the design kits is useful. I would not title this a 'Full UI Tutorial'. It is more like a high level overview of Figma and its evolving ecosystem of design kits.
This is so helpful :) Thank you so much 😁
This video is a valuable resource for designers everywhere, and I'm grateful for the time and effort you put into creating it. Thank you for sharing your expertise with the community and helping us all improve our design skills. 👍
I greatly appreciate reading this Puneet. 😊Thanks a lot for taking the time to watch and comment and reccomend. It means a lot!
This is such a great video. Thanks so much - I enjoyed watching this half across the world while eating some instant noodles.
Haha that’s awesome, thank you. 😃Now I want instant noodles.
This is amazing Elizabeth
WOW! Great tutorial, I'm speechless. 😀😀😀😀😀
😃😃😊🙏🏽Thank you! Super appreciate you watching!
06:41 "...harmonized and accessible ..." . . . SOMETHING HAPPENS HERE . . . "...and then when you find something".... You kind of jumped from nothing in the background to a color palette appearing in the background out of nothing. Can you please explain how you did it?
Thanks a lot! Love this video ❤
You don't know how you helped me^^Thank you so much!
I’m so so happy to hear that! I wish you the best 💜
Very comprehensive review. i am now familiar with the design process, using Design Toolkits and Figma itself, even though i am a complete stranger to it. thank you so much! you are really good at this!
That’s everything I had hoped to get across!!! Thanks so much, I really appreciate it 😊
simply thanks 😊
You’re very welcome ☺️
This is extremely valuable! Thank you.
Wonderful to hear that! Thanks for watching and subscribing!
Woow!! ❤🔥 thank you so much!
your channel is incredible i learn a lot from you thank you so much\
I’m so glad to hear that! I really appreciate you watching 😃
This is awesome. Thanks for sharing.
Thanks for this amazing video
You’re most welcome!
this video just saved my time
That’s awesome to hear!!
I'm so grateful! Thank you sooo much :)
🙏🏽😊
wow Amazing YOu Just Saved my 1000 of HOurs.. THanks For Very Informative Video COntent for UI Designer😃🥰🥰
That’s amazing to hear! 😃 Thank you for watching! Good luck on your project!
Awesome Content... Thanks
This is so helpful. Thank you!!!
Glad to hear it!!
Great video, thanks!
Thank you very much! It was really usefull! I like it.
Glad to hear it! You’re very welcome.
Thank you! I have one concern however. The way you're adding the instance-frame at 03:35 is not gonna work because you don't create a frame and hence - it cannot be viewed as a prototype (preview won't work).
Yep, it’s just an example of dragging in the asset. You would def need a frame. You can also just use Material Design Kit with Figma’s AI now.
@@DesignerUp Thank you, I'll have a look!
Is it possible to change the colors on the palettes (in an easier way that going to look for each color specifically) ?
yeyy so helpful!!! Thanks bunches!🌻🥀💮
Omg thank you so much for this helpful video!
You’re very welcome!
Thanks a lot dear.
Thanks! Very helpful! Which one would be more suitable for a desktop/mobile recruitment webservice?
Absolute goldmine. I'm new to UX/UI, how common is it for designers to create UI from scratch, when they can just use these kits and modify them?
From a survey I recently did, these can be helpful up to a point but you eventually come to find that the user experience you’re trying to achieve and problems you are solving will have specific implications on your own product and UI flows as you scale. Ultimately many end up using a combination of these kits + thier own UI kits. Short answer: it’s common, but not exclusively and only up to a point.
How to prototype these components & add effects such as hover?
You can do that in Figma
Do we need to use only the sizes given or according to our requirements we can design the card size
The cards are responsive and set with autolayout so it will adapt to whatever size you need.
@@DesignerUp Thanks for the clarification
Thanks for the overview. I'm a newbie to Figma but a long-time front-end dev. I'm confused about the next steps after laying out the components. How does this translate into styles for an app or website? Can you point me to a video that addresses this?
Thank you so much for putting this content together. I love the simplicity of how you walk us through the kit usage. I have been struggling with how to use kits for my design. I did have a question, you chose the small screen to start your design and it was a 600*800. When I dont use the kit and I choose from frames to build my design and I select iPhone 14 as an e.g. the size I get is 390*844. What am I not understanding here?
Designing for responsive mobile breakpoints
What is the design system you looking at the beggining of the video ? the one that is saying colors ?
Thanks its great video
please describe how to use the prototype of these components for example If we drag and drop the menu from the material to our design then will it be responsive or will we have to make it by ourselves.
I've Frames X but I didn't find useful toturials about Frames X. Can you please make a video about it? Thank you,
Never heard of them. What do they do?
Thank you so much
You’re very welcome! 😊
Thanks for the amazing video. If I want to use Material UI but they don't have Rich text editor component, should I just design it from scratch?
I have a few questions:
1. Is it okay to admit to a recruiter that I used Google Material Design system?
2. How should I share my work with others? Should I hide that I'm using the Material Design system?
3. When creating a case study, should I share the Material Design components, typography, and colors I've used?
1. Yes, you can share with a recruiter that you used MDS as a starting point just make sure you are customizing it and creating flows that meet your own user research requirements.
2. You ultimately should be customizing this and just using it as a starting point. Perfectly fine to share that you are doing so
3. Yes you can.
Ideally you want to be working on your skill and craft and learning how to create your own UI components but it’s fine to disclose whenever you are using an existing kit as a starting point.
@@DesignerUp 1000 likes from my side 😁
Thankyou so much 😊
For the m3 designsystem - can you use it for website-buildings too or is it best suited for mobile?
Material 3 is intended for use designing Android mobile apps.
Excellent
Great comparison ❤ are these systems free to use in commercial projects?
They sure are!
Nice! But allow me one question to ask: What to do, when the Angular Material Kit is realeased in a new version? How to update my own copy in Figma? Thanks in advance 🙂
I want to look for fluent UI kit for windows , any suggestion which ui kit , thanks
Great video! Thank you so much for making this! one question, how did you generate the color platte?? I didn't see that part.... and the typography too...
how can I get these. the one in Figma doesn't have icons button etc.
Hi, Thank you for your amazing channel -
Are you giving zoom lessons?
Yes I do! You can book a private session here → go.designerup.co/private-session-100
How to trasport to tonal palette because i cant seem to find the feature on the theme builder
Can we use google material UI component for my real project? I mean real client project ?
Yep, you sure can!
thank you so much for that informatio! you just saved my life before client killed me :DD
Hahaha 😂 I hear you! This has saved my life a few times! Good luck! 🍀
Hi, and thanks for your tutorial, I don't know why I'm wrong or if my figma doesn't work well, but I can't get the plugin to work. It's really frustrating because I'm also very expert in Figma, but this plugin doesn't work for me and I could use it a lot. It practically doesn't generate the graphic elements when I click on diagram generation.
Hi, did you mean the Google Material Theme Builder Plugin?
Thanks for the great content. A question on M3, when the theme builder generates a palette on custom color, some of the colors generated are not something we like. How would we use the DS if we wanted say a different shade for Secondary or a State?- can we pick n choose shades and auto-update the components?
Thanks for this have you tried untitled ui?
Not yet! But it’s on my list to review for my upcoming video on whitelabled UI kits. Have you tried it?
This is helpful indeed. I am surprised.
I have one question
Can We use multiple design systems in one project?
A design system is just a set of rules components and implementation guidelines so although you can, ultimately the goal is to create your own based on your own product or project needs. Here’s another video that goes into more detail ruclips.net/video/BISC15OPeGA/видео.htmlsi=Agu6222a0ZIBfjyi
@@DesignerUp Understood!!
Thank you for sharing your insights ☮️🙌
With the ui kits from the community, there are also updates from time to time. How does this affect my loaded kit? Especially because I might want to make my own adjustments. And because I might not want to have all components 100% Google conform.
That is a good question and a common complaint about Figma community files in general. At this time there is no way to pull down updates seamlesslessly. You would need to copy the file again and copy over components or make changes manually. Hopefully this is a workflow issue they will consider addressing soon. forum.figma.com/t/need-a-way-to-get-latest-updates-or-subscribe-to-changes-from-a-published-community-file/32571
Does material theme builder work with other files, if we are not using Material 3 design kit?
can you create a mini web page using the components so that I understand how to use them?
This is absolutely awesome Elizabeth - many thanks. Would you be able to confirm if the same kits are available for Adobe XD?
I believe that many of them are. If not through the brand's site directly, then through the UI kits plugin for Adobe XD here helpx.adobe.com/sg/xd/help/access-ui-kits.html
@@DesignerUp Hi Elizabeth- thank you 🙏 for pointing me in the tight direction!!!
@Spike Spiegel yes Adobe XD is getting obsolete with Adobe acquiring Figma
A good IOs system for figma?
How is this content free? Thank you so much for this!
Thank you for watching! 😀
Hi Elizabeth, thank you so much for sharing! Your content is super helpful, but I have a question: since it's much easier and quicker to build prototypes while design systems are widely used, do we still need to spend a lot of time learning UI/Figma skills if my goal is to become a UX/UI or product designer as opposed to becoming a UI designer?
It’s not your title so much that matters but the expectations and responsibilities dictated by the company you are working for or the product you are working on. For example an early stage startup might expect their UX/UI designer to be able to do lots of rapid prototyping with existing UI kits until they get funding and can invest in hiring a UI focused designer to do eveything from scratch. An establish company might hiring a UX/UI designer to work strictly on building out their own design system. These are just two examples, context matters. Here’s another video that should help clarify some of the considerations: ruclips.net/video/F09ZQUdzxVg/видео.html
Hi, can those Material 3 tonal palettes be exported as CSS variables? I tried exporting from the Theme Builder plugin, but tonal palettes are missing.
I'm having trouble getting the material theme builder plugin to generate/create the color pallet and typography scale. It seems that the color diagram option in the plugin settings just links you to the Figma page of the material 3 design kit. Is there something I'm missing or can you not generate the color ramps/typography with the plugin anymore?
this particular kit is looking a lot different right now?
Yes it’s changed since I released this video
Hi, i don't understand, we can use the design system of material design/microsoft (or whatever), but each project have his own visual identity, so can use it for a real project ?
Yes you can use these for your own real projects. You can customize them with your own branding
the thing is , there is a very important rule in design called Jakob's law, so this is very important to use ui kits for formal website where the purpose of the web app is to enable the user in navigating easily even on a website they have never used before, but because you adhere to the principles like Jakob's law, the user will still be very familiar with your website. This is the true purpose of ux design.
is it just me or there where no explanation how to import material design to figma?
👏
Typography section is so confusing.
I know this it a tech video but has anyone told you how pretty your eyes are?
If you want to learn how to apply design systems like these to create real products and an impressive portfolio. Come join our course! designerup.co/product-design-ui-ux-course
Essentially it’s only a PowerPoint template …lol
You have started off from a point which is totally unknown to a beginner like me. Please start from the basics, else what you are talking about is pure gibberish
If you are not familiar with design systems you can watch my other videos here that explain it - ruclips.net/video/BISC15OPeGA/видео.html