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!
@TimGabe Жыл бұрын
great feedback Alfred! probably something that I should be covering in my next design system video! 🤩
@workmail1 Жыл бұрын
@@TimGabe Super awesome!
@threeelancer Жыл бұрын
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
@yalnisinfo3 күн бұрын
this is so refreshing , thanks. It's been 1 year since i touched figma. Now its time to go back
@rashedperez3 ай бұрын
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.
@wisdom56032 күн бұрын
This is the simplest and the most beautiful explanation of the design system!!!! Thank you so muchh!
@saurabhchunekar5965 Жыл бұрын
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!! 🙏
@TimGabe Жыл бұрын
that is exactly what I wanted to do with this video -- so happy to hear that you liked it, Saurabh!! 🥳
@RedeemingLight5 ай бұрын
"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.
@Glambyyumna9 ай бұрын
One of the most simple and well explained videos! Already subscribed your channel!
@MuTheDev Жыл бұрын
Tim my boy you are doing a really great job, clean tutorial, amazing and simple video structure
@TimGabe Жыл бұрын
thanks a lot, muhammed!!
@thomasfazanaro11 ай бұрын
Amazing explanation, straight to the point and very practical. Thank you!
@TimGabe11 ай бұрын
happy you liked it, thomas!
@Adrian_Galilea Жыл бұрын
So many things about designing in figma and design systems clicked for me on this video.
@TimGabe Жыл бұрын
that's amazing to hear, adrian!!
@DharaGuptaa6 ай бұрын
this really helped in removing the intimidation with design system
@andrescastillo07 Жыл бұрын
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!
@TimGabe Жыл бұрын
Andrés!! thanks for the comment, I’m really glad you liked it my friend 😃
@silverflowerhohocham37119 ай бұрын
Your videos are really helpful Tim, I'm only starting out on Figma and I've learnt many things from your videos
@TimGabe9 ай бұрын
that's awesome to hear. thank you for commenting!
@foldswork4788Ай бұрын
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!
@vrajgajjar-cm7fq10 ай бұрын
Insightful!! Thanks for this tutorial, I was looking for exactly this.
@TimGabe10 ай бұрын
that's great to hear. thanks for commenting!! 😃
@ahmad_habbab10 ай бұрын
Again Nice Tutorial and with the complete guidence Thanks ALOT ❤
@TimGabe10 ай бұрын
thanks for the love, ahmad! 💜
@djashawe88923 Жыл бұрын
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! 💯
@TimGabe Жыл бұрын
such a nice comment. really, really appreciate it, my friend! 😃
@princeabelle7137 Жыл бұрын
Great video. Im just starting out so this was quite easy to understand. Thanks❤
@TimGabe Жыл бұрын
awesome to hear!! 💜
@llu2736 Жыл бұрын
Tim you're the mentor we all need , the content well explained, appreciate all effort :) keep up the great work!!
@TimGabe Жыл бұрын
comments like these 💜 makes me so excited to continue pushing. thank you so much! 🙏
@evanskariuki27994 ай бұрын
Thank you for this Tim. Very concise and clear.
@andreasamato Жыл бұрын
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.
@TimGabe Жыл бұрын
hallå Andrea!! 😃🇸🇪 thank you so much for putting your time into commenting and supporting, it's really appreciated! 🤩
@xhongaronga Жыл бұрын
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.
@TimGabe Жыл бұрын
my brother 🙏😃 happy that it helped you understand nested components better!! 🤩
@uiuxdesigner101 Жыл бұрын
Amazing video Tim!!! & Pls make more on Design System
@TimGabe Жыл бұрын
so cool that you liked it, Shakoor! I think I'll make a more advanced tutorial on design systems soon 🤩
@beth_chan Жыл бұрын
Thank you for creating this video Tim, you've explained design systems in the clearest way I found 😊
@TimGabe Жыл бұрын
that's great to hear, Bethany!! thanks for commenting!!
@raku.aladdin Жыл бұрын
you saved my life thanks man ! Keep uploading
@TimGabe Жыл бұрын
so cool to hear that you found it helpful, Rakesh!!
@todaysunshines4562 Жыл бұрын
Wow, you nailed it! Really organized, and helpful! Thank you!
@TimGabe Жыл бұрын
that’s so nice of you to say! thanks a lot 😃
@aaskpro8 ай бұрын
Very nice Brother. Thanks for decluttering the thoughts about the design system.
@olalekandaramola9541 Жыл бұрын
This is really good and easy to comprehend.
@TimGabe Жыл бұрын
thank you! 😃
@Kalaikalanjiyam8 ай бұрын
Its a great explanations. its easily understandable. Do more stuff in FIGMA. Thanks for doing it. its really helpful for me.
@berniceebenezer98783 ай бұрын
Great video, simple and to the point!
@liokskarbach Жыл бұрын
You are a legend, Tim! Adore 🤙
@TimGabe Жыл бұрын
thank you so much, Lioks! that put a smile to my face 🥳
@fatemeabdollahi24622 ай бұрын
your video is great and worth watching.thanks☺
@PorconautaGames2 ай бұрын
Great video! How do you document margin / padding patterns in your design system?
@threeelancer Жыл бұрын
Beautiful and succinct lesson.
@TimGabe Жыл бұрын
glad to hear you liked it!!
@CryptoWith_fhiyyerh Жыл бұрын
I always love your videos, short and you convey all the messages.🥰
@TimGabe Жыл бұрын
so happy to hear it, Safiyyah! 🥳
@AlexAlex-f4y Жыл бұрын
best figma teacher, great tutorial as always 💪
@TimGabe Жыл бұрын
so appreciated! thanks a lot!!
@kcmichealx Жыл бұрын
For the first time I understood. Thank you✌✌
@TimGabe Жыл бұрын
awesome to hear, my friend!!
@danieleiorio4832 Жыл бұрын
Super helpful video! The documentation part of the design system is key and I look forward to watching your explanation on that!🤩
@TimGabe Жыл бұрын
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?
@danieleiorio4832 Жыл бұрын
@@TimGabe Exactly 🙂
@hossamayman3587 Жыл бұрын
I'm really in love with you contents ❤❤ keep up the good work
@TimGabe Жыл бұрын
thank you so much, my friend 💜
@somanna_bu008 Жыл бұрын
Thanks for the video. Was very easy to understand.
@TimGabe Жыл бұрын
happy you liked it, my friend! 🤩
@julianTrichardson Жыл бұрын
Super video Tim!
@TimGabe Жыл бұрын
really happy you liked it, Julian! 😃
@porwinii8 ай бұрын
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?
@chind0na5 ай бұрын
Did you make the design system for Appwrite? The glass effect on cards is superb.
@fizakhatri65056 ай бұрын
Very simple and informative
@agustinpelletlastra5877 Жыл бұрын
your videos are gold
@TimGabe Жыл бұрын
truly appreciate that, my friend!
@osiris794510 ай бұрын
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
@TimGabe10 ай бұрын
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!
@mahnoosh599 ай бұрын
Thanks for this video, it was helpful for me
@khadijarachmoun2632 Жыл бұрын
That was so helpful thank you so much
@TimGabe Жыл бұрын
thank you for commenting, friend!!
@DavidPilco7 ай бұрын
Great video! Thanks ❤
@simonswiss10 ай бұрын
lol the GaryVee "how- ever"
@TimGabe10 ай бұрын
😂😂 gary the goat!!
@Shatz Жыл бұрын
you are amazing thank you very much :)
@TimGabe Жыл бұрын
appreciate it a lot, Omer 🤩
@DarkOverFlowOverflow3 ай бұрын
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
@klokkerholm1993 Жыл бұрын
Design system for website and e~commerce are you experience Does it fit or more for webapps apps😊
@TimGabe Жыл бұрын
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. ☺️
@RezoUI Жыл бұрын
Thanks!
@TimGabe Жыл бұрын
thank you, Rezzo!!
@haidayouness76858 ай бұрын
thank you
@moomo01021 күн бұрын
where's your t-shirt from ?
@Milkshiva3 ай бұрын
Who did you came to the first step? The outlined fields called Button, Icon label, Card …?
@subramanianchenniappan405911 ай бұрын
I am a programmer . Want to learn figma . Do you have a single video for that . In playlist many videos are there
@TimGabe11 ай бұрын
i think the playlist is the best way if you want to learn figma 🙏
@verysetiawan1778 Жыл бұрын
In your opinion, Design System is better made at the beginning or at the end? Btw, Great Content 🔥🔥
@TimGabe Жыл бұрын
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!!
@TimGabe Жыл бұрын
and thanks a lot for the comment!!
@ulikszenelaj7465 Жыл бұрын
Epic ⭐
@TimGabe Жыл бұрын
thanks a lot, Uliks! 🥳
@swatikumari27225 ай бұрын
your figma link isn't working!
@HorlufemiАй бұрын
😭 Thank You
@ACaipira7 ай бұрын
could you please show a tutorial on how to design a passport in Figma?
@capitandelnorte10 ай бұрын
When I press the working file I just get a new version of the video again
@TimGabe10 ай бұрын
check the button below the video!
@conceptcoder Жыл бұрын
Finally i found you
@TimGabe Жыл бұрын
haha, i'm happy to have you my friend!!
@conceptcoder Жыл бұрын
Im from 🇮🇩 Indonesia and really need this stuff. I Wanna implement Design System with Flutter....
@augustinekirumba4304 Жыл бұрын
And voilla!!
@fishtrekgames11 ай бұрын
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
@TimGabe11 ай бұрын
that's true! but i guess we don't consider those kinds of elements as part of the component system in the same way
@morshlab Жыл бұрын
your most of the video sound is too low plz fix it
@TimGabe Жыл бұрын
better studio these days!!
@taygomez26614 ай бұрын
Great tutorial and the teacher is hot af🔥
@LimitedKnowledge12 Жыл бұрын
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?
@TimGabe Жыл бұрын
sorry to hear that you found it confusing!
@subramanianchenniappan405911 ай бұрын
I am a programmer for 15 years . I know system design . What is design system 😅😅
@TimGabe11 ай бұрын
haha, that's great! a design system is a collection of components, styles, etc. that make up your whole app, basically 😃
Жыл бұрын
Super cool! I love your designs. colors and theme. perfect.
@TimGabe Жыл бұрын
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