Also as a developer who's built multiple design systems from scratch together with UX designers, its super important to keep in mind that we often start off with an existing design system (MUI, Ant, etc.) and that often times its about modifying existing ones!
This is a much more common scenario in my case, I get hired to come in and fix design messes, and usually there are a lot of existing libraries in place, not to mention sunk cost sentiment around them@@TimGabe
I haven't finished watching this video yet, but I already know it's what I've been looking for. It's easy to follow and understand, and it's not overwhelming like the others. Please don't stop making videos like this for free.
Dear Tim, I really appreciate how you make complex topics simple to understand and it feels so easy when I learn from you. Super helpful. Always wanted to learn how to create a design system but overwhelmed by watching other huge systems as you said, but this video is very helpful and helped me get started very quickly, wrap it up faster and use it regularly. Thanks a lot!! 🙏
This was amazingly well put together. I really appreciate how you explain everything from the concept to examples, how, why, and when to use design systems! Keep up the good work! 💯
So useful! This is something I'm still getting used to and that looks a little overwhelming and scary at first, but your explanation make everything looks easier than I thought. Thank you!
"Think Freely" - that is exactly what I say to people when they are starting a design system. I tell them that when I get to the point where I have to update the same thing across 50 artboards and I am sick of copying/pasting for 20 minutes - it's now time to make some components. Because by the time you have that many artboards in your prototype, you've refined things enough to warrant spending the time to make refined components.
I just had to reach out and tell you how much I loved this video on the atomic approach. It's hands down the best explanation I've come across in years! As a designer flying solo without a team to support me, I've been tackling the challenge of developing a design system alone across my daily projects. Your video and approach provided me with clear and valuable information that was easily digestible. I was hoping you have any follow-up videos on sharing design system templates with stakeholders and developers as an online resource for my company. I'm really interested in keeping it Figma-based since we are on a tight budget, pay to play design platform options like Zeroheight, etc. aren't feasible at this time. Thanks again for the great content!
Great video, my brother! I've always been a bit confused about nested components, but I don't even know why. Now that I heard you explain it, it looked quite simple.
Hej! Tack så mycket (as far as my Swedish goes 😊) for breaking down intimidating UI skills into those that can easily be learned and friendlier. As a product designer, I've found your videos to be super helpful lately.
Hi Tim, Thanks for your explanations. you don't only teach how to create design systems but also how to apply them in the next stages of designing an app/product. a question, do you drag those atoms(icons, text, button) manually to frames in order to create a page? or is there any tips for faster way to do this? Thanks again
glad you liked it!! you could create templates as described in the video and use those as (bigger) building blocks for your pages 😃 but generally yes, you'd either build out a library of templates from your components that you can reuse, or build atom by atom!
thank you so much for the nice comment, Daniele! 😃 when you say documentation part, do you mean design system documentation for handoff to developers and/or other team members?
Hi! I'm working on a large product with a web and mobile application. I wonder how would you organize components for adaptive app. For example mobile app using bottomsheet and web is using dialogs. Would you keep components for mobile and desktop separated? Also if I can ask question not related to video. For big adaptive projects would you keep projects for web and mobile separated or grouped by the context?
I think it really depends on what you're building, if you're by yourself working for a small client, in a small or big team at a company, etc. no silver bullet, unfortunately!!
hey René! 😃 unless you’re working in a big team or if you already have a defined design system, I think this method can be used for any early stage project, regardless if it’s an ecom or an app. ☺️
tbh thats just basically using the tool, the complex part of that is well... color theory, color psychology, typography and what not either way nice vid
tutorial is confusing. You should say or tell what action you take meaning are you coping, grouping, using frame. because now i dont know how to create an organism. is it a group? is it a frame?
if you’re interested in the future of creative work, follow along here: timgabe.com/newsletter ❤
Also as a developer who's built multiple design systems from scratch together with UX designers, its super important to keep in mind that we often start off with an existing design system (MUI, Ant, etc.) and that often times its about modifying existing ones!
great feedback Alfred! probably something that I should be covering in my next design system video! 🤩
@@TimGabe Super awesome!
This is a much more common scenario in my case, I get hired to come in and fix design messes, and usually there are a lot of existing libraries in place, not to mention sunk cost sentiment around them@@TimGabe
I haven't finished watching this video yet, but I already know it's what I've been looking for. It's easy to follow and understand, and it's not overwhelming like the others. Please don't stop making videos like this for free.
Dear Tim, I really appreciate how you make complex topics simple to understand and it feels so easy when I learn from you. Super helpful. Always wanted to learn how to create a design system but overwhelmed by watching other huge systems as you said, but this video is very helpful and helped me get started very quickly, wrap it up faster and use it regularly. Thanks a lot!! 🙏
that is exactly what I wanted to do with this video -- so happy to hear that you liked it, Saurabh!! 🥳
Tim my boy you are doing a really great job, clean tutorial, amazing and simple video structure
thanks a lot, muhammed!!
One of the most simple and well explained videos! Already subscribed your channel!
This was amazingly well put together. I really appreciate how you explain everything from the concept to examples, how, why, and when to use design systems! Keep up the good work! 💯
such a nice comment. really, really appreciate it, my friend! 😃
So useful! This is something I'm still getting used to and that looks a little overwhelming and scary at first, but your explanation make everything looks easier than I thought. Thank you!
Andrés!! thanks for the comment, I’m really glad you liked it my friend 😃
this is so refreshing , thanks. It's been 1 year since i touched figma. Now its time to go back
Tim you're the mentor we all need , the content well explained, appreciate all effort :) keep up the great work!!
comments like these 💜 makes me so excited to continue pushing. thank you so much! 🙏
Your videos are really helpful Tim, I'm only starting out on Figma and I've learnt many things from your videos
that's awesome to hear. thank you for commenting!
"Think Freely" - that is exactly what I say to people when they are starting a design system. I tell them that when I get to the point where I have to update the same thing across 50 artboards and I am sick of copying/pasting for 20 minutes - it's now time to make some components. Because by the time you have that many artboards in your prototype, you've refined things enough to warrant spending the time to make refined components.
I just had to reach out and tell you how much I loved this video on the atomic approach. It's hands down the best explanation I've come across in years!
As a designer flying solo without a team to support me, I've been tackling the challenge of developing a design system alone across my daily projects. Your video and approach provided me with clear and valuable information that was easily digestible.
I was hoping you have any follow-up videos on sharing design system templates with stakeholders and developers as an online resource for my company. I'm really interested in keeping it Figma-based since we are on a tight budget, pay to play design platform options like Zeroheight, etc. aren't feasible at this time.
Thanks again for the great content!
Amazing explanation, straight to the point and very practical. Thank you!
happy you liked it, thomas!
This is the simplest and the most beautiful explanation of the design system!!!! Thank you so muchh!
Great video, my brother!
I've always been a bit confused about nested components, but I don't even know why.
Now that I heard you explain it, it looked quite simple.
my brother 🙏😃 happy that it helped you understand nested components better!! 🤩
Hej! Tack så mycket (as far as my Swedish goes 😊) for breaking down intimidating UI skills into those that can easily be learned and friendlier. As a product designer, I've found your videos to be super helpful lately.
hallå Andrea!! 😃🇸🇪 thank you so much for putting your time into commenting and supporting, it's really appreciated! 🤩
Thanks Tim ! I love how you explain to us !
Its a great explanations. its easily understandable. Do more stuff in FIGMA. Thanks for doing it. its really helpful for me.
Thank you for creating this video Tim, you've explained design systems in the clearest way I found 😊
that's great to hear, Bethany!! thanks for commenting!!
Great video. Im just starting out so this was quite easy to understand. Thanks❤
awesome to hear!! 💜
So many things about designing in figma and design systems clicked for me on this video.
that's amazing to hear, adrian!!
Insightful!! Thanks for this tutorial, I was looking for exactly this.
that's great to hear. thanks for commenting!! 😃
I loed your way of approach in designing a good system.
Again Nice Tutorial and with the complete guidence
Thanks ALOT ❤
thanks for the love, ahmad! 💜
you saved my life thanks man ! Keep uploading
so cool to hear that you found it helpful, Rakesh!!
Hi Tim, Thanks for your explanations. you don't only teach how to create design systems but also how to apply them in the next stages of designing an app/product. a question, do you drag those atoms(icons, text, button) manually to frames in order to create a page? or is there any tips for faster way to do this? Thanks again
glad you liked it!!
you could create templates as described in the video and use those as (bigger) building blocks for your pages 😃 but generally yes, you'd either build out a library of templates from your components that you can reuse, or build atom by atom!
You are a legend, Tim! Adore 🤙
thank you so much, Lioks! that put a smile to my face 🥳
Thank you for this Tim. Very concise and clear.
Great video, simple and to the point!
Very nice Brother. Thanks for decluttering the thoughts about the design system.
Amazing video Tim!!! & Pls make more on Design System
so cool that you liked it, Shakoor! I think I'll make a more advanced tutorial on design systems soon 🤩
You're amazing. Thank you!
Watching this video had me like "I understand it now... I understand it NOW!" *jab step, three pointer*
best figma teacher, great tutorial as always 💪
so appreciated! thanks a lot!!
I always love your videos, short and you convey all the messages.🥰
so happy to hear it, Safiyyah! 🥳
Super video Tim!
really happy you liked it, Julian! 😃
This is really good and easy to comprehend.
thank you! 😃
Wow, you nailed it! Really organized, and helpful! Thank you!
that’s so nice of you to say! thanks a lot 😃
Super helpful video! The documentation part of the design system is key and I look forward to watching your explanation on that!🤩
thank you so much for the nice comment, Daniele! 😃 when you say documentation part, do you mean design system documentation for handoff to developers and/or other team members?
@@TimGabe Exactly 🙂
I'm really in love with you contents ❤❤ keep up the good work
thank you so much, my friend 💜
your video is great and worth watching.thanks☺
Beautiful and succinct lesson.
glad to hear you liked it!!
Did you make the design system for Appwrite? The glass effect on cards is superb.
lol the GaryVee "how- ever"
😂😂 gary the goat!!
Great video! How do you document margin / padding patterns in your design system?
your videos are gold
truly appreciate that, my friend!
Super cool! I love your designs. colors and theme. perfect.
that makes me glad, Khaled!! thanks my friend 😃
@@TimGabe You are awesome. I watch your videos and rarely comment but I'll Thank you so much for all your valuable content
For the first time I understood. Thank you✌✌
awesome to hear, my friend!!
Thanks for the video. Was very easy to understand.
happy you liked it, my friend! 🤩
That was so helpful thank you so much
thank you for commenting, friend!!
Very simple and informative
Thanks for this video, it was helpful for me
Hi! I'm working on a large product with a web and mobile application. I wonder how would you organize components for adaptive app. For example mobile app using bottomsheet and web is using dialogs. Would you keep components for mobile and desktop separated?
Also if I can ask question not related to video. For big adaptive projects would you keep projects for web and mobile separated or grouped by the context?
In your opinion, Design System is better made at the beginning or at the end? Btw, Great Content 🔥🔥
I think it really depends on what you're building, if you're by yourself working for a small client, in a small or big team at a company, etc. no silver bullet, unfortunately!!
and thanks a lot for the comment!!
Great video! Thanks ❤
Design system for website and e~commerce are you experience
Does it fit or more for webapps apps😊
hey René! 😃
unless you’re working in a big team or if you already have a defined design system, I think this method can be used for any early stage project, regardless if it’s an ecom or an app. ☺️
could you please show a tutorial on how to design a passport in Figma?
where's your t-shirt from ?
Thanks!
thank you, Rezzo!!
I am a programmer . Want to learn figma . Do you have a single video for that . In playlist many videos are there
i think the playlist is the best way if you want to learn figma 🙏
tbh thats just basically using the tool, the complex part of that is well... color theory, color psychology, typography and what not either way nice vid
you are amazing thank you very much :)
appreciate it a lot, Omer 🤩
Who did you came to the first step? The outlined fields called Button, Icon label, Card …?
Epic ⭐
thanks a lot, Uliks! 🥳
thank you
😭 Thank You
your figma link isn't working!
When I press the working file I just get a new version of the video again
check the button below the video!
Finally i found you
haha, i'm happy to have you my friend!!
Im from 🇮🇩 Indonesia and really need this stuff. I Wanna implement Design System with Flutter....
your most of the video sound is too low plz fix it
better studio these days!!
this is i need most thanks gabe
so happy to hear it, Ritche! 🤩
it feels weird to me that a button is often defined as an atom, when you can split it into its typography, shape and colour elements
that's true! but i guess we don't consider those kinds of elements as part of the component system in the same way
And voilla!!
Great tutorial and the teacher is hot af🔥
tutorial is confusing. You should say or tell what action you take meaning are you coping, grouping, using frame. because now i dont know how to create an organism. is it a group? is it a frame?
sorry to hear that you found it confusing!
I am a programmer for 15 years . I know system design . What is design system 😅😅
haha, that's great!
a design system is a collection of components, styles, etc. that make up your whole app, basically 😃