The Greatest Design System UI Kits for Figma! Full UI tutorial

Подписаться 64 тыс.

Просмотров 77 тыс.

50% 1

One of the best ways to start off your UI design projects is by using existing design systems from some of the biggest and best brands in the world. You can learn a lot about best practices and how to create great user experiences and best of all, their UI Kits are available for free if you know where to look.
🎥 WHAT TO WATCH NEXT
⊚ How to learn and steal from Design Systems | • 5 Best Design Systems ...
⊚ The Complete Guide to Design Systems | • Complete Guide to Buil...
⏱ TIMESTAMPS
00:00 - Intro
00:30 - @Google Material 3
08:00 - Orbit
10:22 - @Spotify Backstage
11:54 - @Microsoft Fluent
12:35 - @Atlassian
13:56 - @zendesk
🔗 MENTIONED IN THIS VIDEO
⊚ Figma Professional plan to unlock all of these features | go.designerup.co/figma-pro-plan
⊚ Design Systems for Figma - www.designsystemsforfigma.com/
⊚ Design Systems for Adobe XD - helpx.adobe.com/sg/xd/help/ac...
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ Designerup Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma | go.designerup.co/figma
⊚ ProtoPie | go.designerup.co/protopie
⊚ Notion | go.designerup.co/notion
⊚ Framer | go.designerup.co/framer
⊚ Canva | go.designerup.co/canva
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽‍♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UI/UX) School
⊚ Trained teacher
⊚ RU-vid creator
⊚ Author
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | learn@designerup.co

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 114

@franciscomsosa Год назад

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!

@DesignerUp Год назад

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!

@Shaun_X Год назад

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.

@uifry 9 месяцев назад

I extend my heartfelt gratitude for the wealth of valuable knowledge you've shared

@puneetshivakeri3565 Год назад

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. 👍

@DesignerUp Год назад

I greatly appreciate reading this Puneet. 😊Thanks a lot for taking the time to watch and comment and reccomend. It means a lot!

@olaitankolawole5483 Год назад

Wow...this is great Elizabeth...many thanks.

@zahidshaikh3122 Год назад

This is actually one of the most amazing video with practical example on how to use those Design Systems. Thanks a lot!.

@DesignerUp Год назад

So glad to hear that! You’re very welcome! 😊

@rod6722 Год назад

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!

@DesignerUp Год назад

I do hope it does help! It helped me, even as a designer I procrastinated on my portfolio forever 😅Good luck!

@wisdomezeogu6650 8 месяцев назад

This really blew my mind. This could x10 the speed of any designer. Thanks for putting it up.

@DesignerUp 8 месяцев назад

It’s true, design systems help me design 10x faster for sure!

@furqantahir7458 8 месяцев назад

This is so helpful :) Thank you so much 😁

@njengathegeek Год назад

This is amazing Elizabeth

@haseebkahn4811 11 месяцев назад

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!

@DesignerUp 11 месяцев назад

That’s everything I had hoped to get across!!! Thanks so much, I really appreciate it 😊

@bpsujith Год назад

This is awesome. Thanks for sharing.

@jannatulferdous-im6cu 2 месяца назад

Thanks a lot! Love this video ❤

@umykee Год назад

Wow... 🔥🔥 As a newbie? I never knew designing was this easy. ❤️❤️ Thank you very much.

@m4r_art Год назад

Great video, thanks!

@deepalisingh8865 Год назад

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 😃

@sylestra 7 месяцев назад

thank you! After watching this, all I studied before in Figma, just now made all the sense to me!

@DesignerUp 7 месяцев назад

Wow that’s amazing to hear!! Good luck with your designs!

@aghuraba Год назад

yeyy so helpful!!! Thanks bunches!🌻🥀💮

@_theHavis 8 месяцев назад

This is extremely valuable! Thank you.

@DesignerUp 8 месяцев назад

Wonderful to hear that! Thanks for watching and subscribing!

@creatoratplay Год назад

This is so helpful. Thank you!!!

@DesignerUp Год назад

Glad to hear it!!

@seppneimusser5723 11 месяцев назад

You don't know how you helped me^^Thank you so much!

@DesignerUp 11 месяцев назад

I’m so so happy to hear that! I wish you the best 💜

@owcaandroid Год назад

I'm so grateful! Thank you sooo much :)

@DesignerUp Год назад

🙏🏽😊

@MohammedAlia_ Год назад

Awesome Content... Thanks

@flavialemos973 8 месяцев назад

WOW! Great tutorial, I'm speechless. 😀😀😀😀😀

@DesignerUp 8 месяцев назад

😃😃😊🙏🏽Thank you! Super appreciate you watching!

@sinanshakeri-mp7cd 9 месяцев назад

your channel is incredible i learn a lot from you thank you so much\

@DesignerUp 9 месяцев назад

I’m so glad to hear that! I really appreciate you watching 😃

10 месяцев назад

Omg thank you so much for this helpful video!

@DesignerUp 10 месяцев назад

You’re very welcome!

@rembautimes8808 9 месяцев назад

This is such a great video. Thanks so much - I enjoyed watching this half across the world while eating some instant noodles.

@DesignerUp 9 месяцев назад

Haha that’s awesome, thank you. 😃Now I want instant noodles.

@subrata8162 Год назад

Excellent

@chunjiaouyang3410 10 месяцев назад

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...

@user-jv9lz3fg5t Год назад

Thank you very much! It was really usefull! I like it.

@DesignerUp Год назад

Glad to hear it! You’re very welcome.

@SohanuRahman97 5 месяцев назад

Thanks a lot dear.

@tanmaykhatri6061 Год назад

Thanks for this amazing video

@DesignerUp Год назад

You’re most welcome!

@DesignerUp Год назад

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

@PetrAfanasyev 8 месяцев назад

Thanks! Very helpful! Which one would be more suitable for a desktop/mobile recruitment webservice?

@cagrkrt332 4 месяца назад

Thanks its great video

@fatimabaiyent5682 Год назад

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?

@talineiman7892 2 месяца назад

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?

@jamsonmsuzi9645 10 месяцев назад

this video just saved my time

@DesignerUp 10 месяцев назад

That’s awesome to hear!!

@priceandproduct Год назад

This is helpful indeed. I am surprised.

@iamnovikovmaksim 6 месяцев назад

thank you so much for that informatio! you just saved my life before client killed me :DD

@DesignerUp 6 месяцев назад

Hahaha 😂 I hear you! This has saved my life a few times! Good luck! 🍀

@ontheruntonowhere Год назад

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?

@andiyas 9 месяцев назад

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?

@DesignerUp 9 месяцев назад

Designing for responsive mobile breakpoints

@Designwithflowz Год назад

Thank you so much

@DesignerUp Год назад

You’re very welcome! 😊

@0bifrancisca765 10 месяцев назад

How to trasport to tonal palette because i cant seem to find the feature on the theme builder

@longfit Месяц назад

I want to look for fluent UI kit for windows , any suggestion which ui kit , thanks

@michaelschultze3595 Год назад

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 Год назад

That’s so good to hear!! What language do you speak Michael?

@michaelschultze3595 Год назад

@@DesignerUp German

@DesignerUp Год назад

I’m hoping to be able to add more translations to my videos in the future so thank you for sharing 🙂

@michaelschultze3595 Год назад

@@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 🙂

@user-us8nn1il4t Месяц назад

What is the design system you looking at the beggining of the video ? the one that is saying colors ?

@jackdesign5284 Год назад

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?

@DesignerUp Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-F09ZQUdzxVg.html

@meyravoz3800 Год назад

Hi, Thank you for your amazing channel - Are you giving zoom lessons?

@DesignerUp Год назад

Yes I do! You can book a private session here → go.designerup.co/private-session-100

@user-xi9yq9ek9h 8 месяцев назад

Does material theme builder work with other files, if we are not using Material 3 design kit?

@piotrgorski1945 Год назад

Great comparison ❤ are these systems free to use in commercial projects?

@DesignerUp Год назад

They sure are!

@Progettiamodivertendoci 9 месяцев назад

can you create a mini web page using the components so that I understand how to use them?

@je4nette 7 месяцев назад

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?

@DesignerUp 7 месяцев назад

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.

@damienabbott9805 Год назад

This is absolutely awesome Elizabeth - many thanks. Would you be able to confirm if the same kits are available for Adobe XD?

@DesignerUp Год назад

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

@damienabbott9805 Год назад

@@DesignerUp Hi Elizabeth- thank you 🙏 for pointing me in the tight direction!!!

@spikespiegel2511 Год назад

Ditch xd.

@sameerhussain2579 Год назад

@@spikespiegel2511 yes Adobe XD is getting obsolete with Adobe acquiring Figma

@linditaneziri2002 2 месяца назад

For the m3 designsystem - can you use it for website-buildings too or is it best suited for mobile?

@DesignerUp 2 месяца назад

Material 3 is intended for use designing Android mobile apps.

@TazBo-wd2ig Год назад

Thanks for this have you tried untitled ui?

@DesignerUp Год назад

Not yet! But it’s on my list to review for my upcoming video on whitelabled UI kits. Have you tried it?

@rogola8658 11 месяцев назад

A good IOs system for figma?

@michaelschultze3595 Год назад

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.

@DesignerUp Год назад

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

@nuzattack 4 месяца назад

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.

@DesignerUp 4 месяца назад

Hi, did you mean the Google Material Theme Builder Plugin?

@zendesk Год назад

👏

@Minal50 3 месяца назад

Can we use google material UI component for my real project? I mean real client project ?

@DesignerUp 3 месяца назад

Yep, you sure can!

@thelias91 Год назад

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 ?

@DesignerUp Год назад

Yes you can use these for your own real projects. You can customize them with your own branding

@sameerhussain2579 Год назад

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.

@benditodsg974 10 месяцев назад

Is it fine if i for example do this same thing for a real life project instead of creatong a design system from scratch?

@DesignerUp 10 месяцев назад

Yes these are open source so you can use them for real projects instead of creating your own

@benditodsg974 10 месяцев назад

@@DesignerUp Thank you so much for the response. Thank you so much

@chaitanyatekade5212 7 месяцев назад

I have one question Can We use multiple design systems in one project?

@DesignerUp 7 месяцев назад

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BISC15OPeGA.htmlsi=Agu6222a0ZIBfjyi

@chaitanyatekade5212 7 месяцев назад

@@DesignerUp Understood!! Thank you for sharing your insights ☮️🙌

@alonal9106 3 месяца назад

is it just me or there where no explanation how to import material design to figma?

@_axtinct Год назад

Typography section is so confusing.

@Kuwandi Год назад

Essentially it’s only a PowerPoint template …lol

@MrVipulLal 5 месяцев назад

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

@DesignerUp 5 месяцев назад

If you are not familiar with design systems you can watch my other videos here that explain it - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BISC15OPeGA.html