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!! 🙏
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!
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!
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! 💯
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.
"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.
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 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!
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
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!!
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?
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. ☺️
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?
