You never know the power of a design system until you reach the stage of templates. Minor things become so useful that designing becomes lightning fast. Woo..haa! Excellent explanation!
thanks mizko your videos are way more valuable than bootcamps and other instructor courses out there. So valuable and very cost effective courses. Also you are an amazing teacher. Very straight to the point.. with no fluff that other designers on youtube do.
It is EXTREMELY USEFUL! Thanks for this awesome video Michael. Can’t wait for part 2. Although I am curious whether you would create and hand off the whole system to a client project?
I about spit out my coffee with the subscribe and like slides lmao. Also this is just far out - incredible. I am very impressed with how this system is setup.
My question about design systems is at what point are they to be created in the process? Is this something that is done prior to design or something that is done once all design is established? Or is it something that is done while designing?
The issue with this approach to a design system with styles and toggles everywhere is that it makes it hard to do iterative design. I produce my best work when I work on a certain version in a frame, then if I want to try a new variation of something, I just clone it down and apply the change there. That way I can always see how a design evolved over time and perhaps pull things from previous designs into new designs, including colors and fonts. If I set all of those as styles, then change the font or color of a style, all previous iterations are modified too and I lose what makes iterative design so useful.
Hey SogMose, I understand your concern but designs should not be 'that' iterative. Designs should be consistent. If you work with any larger organisation, every single one of them have a design system of some sort. No one should be 'tweaking and creating variations of basic elements such as color, buttons etc that frequently. That can be very inefficient.
What I do is the iterations are all in one component as variants so if I want to switch back to the old iterations. An easy switch. PS. I work on a beta product so there's a lot of changes.
I do wish that more designers would take this component-based approach. However, my slight annoyance is not calling them what they really are (elements, components, objects, layouts).
Awesome videos on design systems, I appreciate the content. I also love the background music at the end of the video..Could you share a playlist or the artist/genre..It sounds perfect for doing design work. Cheers!
A design system helps product designers and developers use the same components as a single source of truth, a template is a larger experience or layout you want consistent.. mostly in web design.. but you could template main product landing pages if they share similar architecture... a style guide dictates how, when why we are to follow design style rules and when you can break them so its more rule of law or an annotated way to design something taking in mind brand needs and a UI kit is library of components with shared style.. :)
Ah, has the limited time sale for your design system ended already? I meant to purchase it a couple days ago when I saw this video I just realize I didn’t...and it looks like the price went up already D: will you do another special sale soon please 🥺 I’m currently a UX bootcamp student and have found your Figma tutorial videos extremely helpful - THANK YOU! Thanks for making your contents so easy to follow through with your downloadable exercise files 🙏
Hey Ysa! Great to see you entering the industry and I’m always happy to support students. The coupon code still applies “yotube-10” - if you need further assistance drop me an email mizko@thedesignership.com
Hi Mizko, To build a design system, do we need to build a home page or a basic page first? Or directly design the Atom and Molecules etc ? How do we know that it will look good in a page after using the design system components.?
usually design systems is made before we make the prototype my question is how you decide the size of the button, the size of typography because we dont know which one we will use yet and we wont use them all. thanks
Hello! Love the work and the tutorials, thank you. Question about purchasing the Shipfaster UI Figma Kit, if you purchase the system, can I reuse the template for any future projects?
Hey @Mizko, I am learning the master class figma but I have problem I couldnt solve. Why is it that you can arrange the order of styles within the original design system file but not in the working file that you have attached the design system to. I have added e.g. a colour #50 as the last and i cannot reorder it. with colours it is is not too bad, but with text styles it is really annoying if you have split the Header styles in different sections of the list. Can you please help? :) Your class is great and it's fun following your instruction. ur a fun and great teacher!
Coor stuff Mizko, would you agree that your molecules are more towards design tokens other than atoms? Brad himself recognizes a button as an atom, if I'm not mistaken. Those specs you design in the atoms category I commonly identify them as IONS (new level at the atomic methodology). Keep it up! Great job
dump question. what are the numbers beneath the colors for? like for example in 4:31 I mean the value is from 0-100. So why are there till 700 or 900? Thanks
Hey, Mizko! I know you're a fan of Figma and I know some of the key features of it. But I would love to know why do you like it over similar alternatives (XD, InVision, UX Pin, etc.). Is it because it's web based? Enhanced collaboration approach? Work logic? Thanks for sharing, mate. Cheers!
Hey Pablo, great question. I made a video about this - ruclips.net/video/-eiboVeH3Wg/видео.html Discounting all the new features and updates Figma has launched as well.
@@Mizko Man, this video is epic! Totally comprehensive and I agree with you. Personally, I've been using Figma for low and mid-fidelity prototypes, while XD for high-fi ones. This is because earlier stages of prototyping require most collaboration, while in high-fi I'm more concerned with delivering to dev teams. Thanks again for sharing, mate! You're super valuable to our community.
How do you get a row of color shades on the same level in the color style palette? No matter what I do I only get to add one color per area, if I choose to add another shade using the same color name it adds to a different section in the style palette. And you have headlines for each color types (Neutrals etc) instead of folders - how do u do that? I was looking for a different view option for color styles to see it in grid view or something like that but there are none. It's no options.
Hi mizko, i'm from Indonesia. can you add Indonesian subtitle in all your videos ? and i can more understand what you are talking about, because your tutorial videos is great bro maybe your view video become increase from my country Thx . Sorry , my English not very well 😀
Hey bro. I just purchased your design system. It can be imported to figma cloud app. But can not import to my desktop app. I'm using Windows 10 and app might be the latest version. Please help me on this case. Sorry that I'm messaging here. Couldn't find a way to get the support.
Hey Manesh, no problem at all! It should definitely import successfully on the desktop app as most customers have. Is this still an issue? If so, let me know we will sort this out!
wait your title of this vid is misleading. You're not teaching how to make one, you're advertising to use something that's already out there. a bit confusing.
Supercharge your FIGMA Game!
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/figma-design-system/
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/products/outline-wireframe-kit
Yours truly,
Mizko
Hey Mizko! Would you happen to still have that coupon code available? Thank You!🙏👍
I recently bought your design system, I haven't seen the side bar...😞
You never know the power of a design system until you reach the stage of templates. Minor things become so useful that designing becomes lightning fast. Woo..haa! Excellent explanation!
100% !! There's actually much more complexity beyond templates but I'll introduce that afterwards ;)
I’m surprised templated wasn’t coined as “ecosystem” ! Another great video bro!!!
I would refer the internet as a ecosystem and the template a human
I always found the like and subscribe plugs annoying, but you managed to make it entertaining 😂 you got both from me G!
🙏🏼
thanks mizko your videos are way more valuable than bootcamps and other instructor courses out there. So valuable and very cost effective courses. Also you are an amazing teacher. Very straight to the point.. with no fluff that other designers on youtube do.
already loving this series since the first episode
Awesome! Great to hear Matheus!!
Can’t believe this video is free. 🙏 blessed up my man
🙌
Love this vid. Just letting you know it'd be nice if you zoomed in more when you're talking about icons and specific componentsb
lollll!! I enjoyed your first "what you really need to do," but your second one really got me. really appreciate your teaching style! 🙏🏼
It is EXTREMELY USEFUL! Thanks for this awesome video Michael. Can’t wait for part 2. Although I am curious whether you would create and hand off the whole system to a client project?
Great series, complex, short and professional intro. Thanks a lot!
This is great! Looking forward to the rest of this series!
Thank you Chris!!
I about spit out my coffee with the subscribe and like slides lmao. Also this is just far out - incredible. I am very impressed with how this system is setup.
Haha thank you Lorrie!
I've been using Atomic design for the last 5-6 years. One thing I've introduced is 'Species' instead of Templates, so to make it simpler.
Please make a video about making a simple page using that design system that you made.
hec. yeah. Just purchased the design system! so organised! love it
Ohhhh thanks man! 1.2 will be released this week with more refinements and additional organisms 🔥 with Master Components.
Great class, bro! I'll love to see the entire course, you're a awesome teacher.
My question about design systems is at what point are they to be created in the process? Is this something that is done prior to design or something that is done once all design is established? Or is it something that is done while designing?
While designing
The issue with this approach to a design system with styles and toggles everywhere is that it makes it hard to do iterative design. I produce my best work when I work on a certain version in a frame, then if I want to try a new variation of something, I just clone it down and apply the change there. That way I can always see how a design evolved over time and perhaps pull things from previous designs into new designs, including colors and fonts. If I set all of those as styles, then change the font or color of a style, all previous iterations are modified too and I lose what makes iterative design so useful.
Hey SogMose, I understand your concern but designs should not be 'that' iterative. Designs should be consistent. If you work with any larger organisation, every single one of them have a design system of some sort.
No one should be 'tweaking and creating variations of basic elements such as color, buttons etc that frequently.
That can be very inefficient.
What I do is the iterations are all in one component as variants so if I want to switch back to the old iterations. An easy switch. PS. I work on a beta product so there's a lot of changes.
What presentation tool are you using ? Your slides are the bomb!
This video is definitely now for someone trying to learn... More like for someone how is just trying to make sure to remember something
Hey this is great ! can you make tutorial on the sizes of buttons and icons and what should be the size of top bars etc?
Hi Mizko. Any plans to create this awesomeeffinness considering new features released Config 2023?
PRICELESS content!!!!!
Respect!!!!
🎉✨🎉👏👍✔👌
Appreciate it MD!
I do wish that more designers would take this component-based approach. However, my slight annoyance is not calling them what they really are (elements, components, objects, layouts).
Terminology will always vary through different geographies, companies etc.
Your explanations are amazing! So clear! Thank you!
Thank you Sabrina!!
Thank you for this!! By the way what font are you using in the slides? It's beautiful
Great video @Mizko and I learned a good deal from you here. Thank you!
Awesome videos on design systems, I appreciate the content. I also love the background music at the end of the video..Could you share a playlist or the artist/genre..It sounds perfect for doing design work. Cheers!
Thank you! That is a wonderful way to explain everything; pretty clear and engaging😊
Haha I really did appreciate this video & your killer presentation 😎
& the live template resource is amazing! 😯
Haha thank you 💜
Is there also a mobile version for all the components?
man, this is dope! Thank you! Extremely useful!
Really happy you found value
How are you color styles in their own categories?
What is the difference between a design system, a template, a style guide and a UI kit?
A design system helps product designers and developers use the same components as a single source of truth, a template is a larger experience or layout you want consistent.. mostly in web design.. but you could template main product landing pages if they share similar architecture... a style guide dictates how, when why we are to follow design style rules and when you can break them so its more rule of law or an annotated way to design something taking in mind brand needs and a UI kit is library of components with shared style.. :)
Subscribed! This video was amazing and you're hilarious. I will definitely be grabbing that design system. Thank you!
Fantastic video. Appreciate your stuff!
Ah, has the limited time sale for your design system ended already? I meant to purchase it a couple days ago when I saw this video I just realize I didn’t...and it looks like the price went up already D: will you do another special sale soon please 🥺
I’m currently a UX bootcamp student and have found your Figma tutorial videos extremely helpful - THANK YOU! Thanks for making your contents so easy to follow through with your downloadable exercise files 🙏
Hey Ysa! Great to see you entering the industry and I’m always happy to support students. The coupon code still applies “yotube-10” - if you need further assistance drop me an email mizko@thedesignership.com
@@Mizko oops I dropped an email via the site you linked me to earlier 😅 You’re awesome for the offer!!
very detailed and thoughtful design system 👌🏻
makes work easy for developers also.
👏🏼
Do we need to add search bar in design system??? I will have only one type of search bar right..
Awesome content. Thank You!🙏👍 Where is the coupon code? I'm not seeing it?
Hi Mizko, To build a design system, do we need to build a home page or a basic page first?
Or directly design the Atom and Molecules etc ?
How do we know that it will look good in a page after using the design system components.?
why do you have so many shades if each colour in your design system?
Hi, a row from a table be a molecule or organism?
How did you created that master component you've shown in the end ?
usually design systems is made before we make the prototype
my question is how you decide the size of the button, the size of typography because we dont know which one we will use yet and we wont use them all.
thanks
@mizko Well done! Thanks a lot for your help 😃👍👍
Do we create the system before we start on the project or we create as we go? Like adding on more atoms/molecules into the system file
I wanted to do Design System for Multiple Partners in one system how we can do that do you have any idea or will you share any thoughts?
Thank you Mizko, I love it
Thanks MK
why Input is a molecule and not an atom ?
I cant belive that i am getting this for free, thanks bro
Hello! Love the work and the tutorials, thank you. Question about purchasing the Shipfaster UI Figma Kit, if you purchase the system, can I reuse the template for any future projects?
Hey, is there a discount code available?
Thank you for your videos. Is there any discount for your master course?
MIzko! Love this channel!
Curious what you used to create the presentation? Would love to use it for pitchdecks myself!
Thank you Rida! Created in Figma :)
Very Nice! Thx!
Is this included in your course as well? Like how to create, setup etc??
Hey @Mizko, I am learning the master class figma but I have problem I couldnt solve. Why is it that you can arrange the order of styles within the original design system file but not in the working file that you have attached the design system to. I have added e.g. a colour #50 as the last and i cannot reorder it. with colours it is is not too bad, but with text styles it is really annoying if you have split the Header styles in different sections of the list. Can you please help? :)
Your class is great and it's fun following your instruction. ur a fun and great teacher!
how to make those icon slider on the button.. fk im so new i literally confuse on auto layout lmao
Thank you! You should check out my Figma Masterclass. It’s a lot more detailed.
thedesignership.com/courses/the-ultimate-figma-masterclass/
Just what i needed
Coor stuff Mizko, would you agree that your molecules are more towards design tokens other than atoms? Brad himself recognizes a button as an atom, if I'm not mistaken. Those specs you design in the atoms category I commonly identify them as IONS (new level at the atomic methodology). Keep it up! Great job
Hi, Mizko! Do you have a coupon to your Figma Course?
could we get this all file please?
great job buddy
This is a styleguide, right? Did you created the dev tokens, etc? I have difficult with this part of the design system process
Thank you so much for your amazing videos!
Could you tell me about the name of the typeface you have used in this?
Well done & thanks a lot for your explanations :)
dump question. what are the numbers beneath the colors for? like for example in 4:31
I mean the value is from 0-100. So why are there till 700 or 900? Thanks
The shades are numbered 100 to 900.
Keep it up
Thank you 🙂🙏
Hey, Mizko! I know you're a fan of Figma and I know some of the key features of it. But I would love to know why do you like it over similar alternatives (XD, InVision, UX Pin, etc.). Is it because it's web based? Enhanced collaboration approach? Work logic? Thanks for sharing, mate. Cheers!
Hey Pablo, great question. I made a video about this - ruclips.net/video/-eiboVeH3Wg/видео.html
Discounting all the new features and updates Figma has launched as well.
@@Mizko Man, this video is epic! Totally comprehensive and I agree with you. Personally, I've been using Figma for low and mid-fidelity prototypes, while XD for high-fi ones. This is because earlier stages of prototyping require most collaboration, while in high-fi I'm more concerned with delivering to dev teams. Thanks again for sharing, mate! You're super valuable to our community.
God bless you 🙌
How do you get a row of color shades on the same level in the color style palette? No matter what I do I only get to add one color per area, if I choose to add another shade using the same color name it adds to a different section in the style palette. And you have headlines for each color types (Neutrals etc) instead of folders - how do u do that? I was looking for a different view option for color styles to see it in grid view or something like that but there are none. It's no options.
What is the coupon code
Thanks
Wow...How did you make these slides...
Hi mizko, i'm from Indonesia.
can you add Indonesian subtitle in all your videos ? and i can more understand what you are talking about, because your tutorial videos is great bro
maybe your view video become increase from my country
Thx .
Sorry , my English not very well 😀
Hey there! I can try but I need a translation service
smashed!
My design system is 😒shite. These awesome tips are sure to turn that around. Definitely thinking of doing a before and after. Thanks Mizko!
Love your videos
I loved the video
This is the beeeest
Perfect.
Can you share this file?
Hhahahahaha thanks for making this video interesting with your subtle but not subtle call outs for smashing of buttons. I've done them HAHA.
Thank you!!
Hey bro. I just purchased your design system. It can be imported to figma cloud app. But can not import to my desktop app. I'm using Windows 10 and app might be the latest version. Please help me on this case. Sorry that I'm messaging here. Couldn't find a way to get the support.
Hey Manesh, no problem at all! It should definitely import successfully on the desktop app as most customers have. Is this still an issue? If so, let me know we will sort this out!
Mandsh! I just emailed you and removed your latest comment to hide your email from viewers 👌🏼
Wow! thanks
Yes I will click the like button and subscribe this channel, because your presentation is awsome
Haha thank you!
i can't understand, very fast, what is atoms???? what is a molecule???
nice
Really well made tutorial, thanks a lot! 👏
can you give us the source file?
About the holy grail of grid systems my question would be: How to determine the grid system for your project.
Please subtitle Indonesia
who will will LS 2024?
Yes school does not teach you how to use soft soft
Create a paid course on how to make a design system
You might want to check out my course here -> thedesignership.com/courses/the-ultimate-figma-masterclass/
wait your title of this vid is misleading. You're not teaching how to make one, you're advertising to use something that's already out there. a bit confusing.