Your First Design System in Figma (Beginner Tutorial)

Design systems can feel overwhelming and scary. In this video we will use Figma to build out the base of a design system together so that you can see how easy it is to get started-even as a beginner.
🔴 Working File: timgabe.com/resources/figma-d...
Timecodes
00:00 Intro
01:00 Atomic Design
01:30 Step 1
02:50 Step 2
07:00 Step 3
10:15 Step 4
11:55 Best Practices & Tips

Пікірлер: 112

  • @workmail1
    @workmail1 Жыл бұрын

    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

    @TimGabe

    Жыл бұрын

    great feedback Alfred! probably something that I should be covering in my next design system video! 🤩

  • @workmail1

    @workmail1

    Жыл бұрын

    @@TimGabe Super awesome!

  • @threeelancer

    @threeelancer

    8 ай бұрын

    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

  • @Glambyyumna
    @Glambyyumna5 ай бұрын

    One of the most simple and well explained videos! Already subscribed your channel!

  • @djashawe88923
    @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

    @TimGabe

    Жыл бұрын

    such a nice comment. really, really appreciate it, my friend! 😃

  • @fhiyyerh
    @fhiyyerh Жыл бұрын

    I always love your videos, short and you convey all the messages.🥰

  • @TimGabe

    @TimGabe

    Жыл бұрын

    so happy to hear it, Safiyyah! 🥳

  • @andrescastillo07
    @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

    @TimGabe

    Жыл бұрын

    Andrés!! thanks for the comment, I’m really glad you liked it my friend 😃

  • @aaskpro
    @aaskpro4 ай бұрын

    Very nice Brother. Thanks for decluttering the thoughts about the design system.

  • @saurabhchunekar5965
    @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

    @TimGabe

    Жыл бұрын

    that is exactly what I wanted to do with this video -- so happy to hear that you liked it, Saurabh!! 🥳

  • @llu2736
    @llu2736 Жыл бұрын

    Tim you're the mentor we all need , the content well explained, appreciate all effort :) keep up the great work!!

  • @TimGabe

    @TimGabe

    Жыл бұрын

    comments like these 💜 makes me so excited to continue pushing. thank you so much! 🙏

  • @beth_chan
    @beth_chan11 ай бұрын

    Thank you for creating this video Tim, you've explained design systems in the clearest way I found 😊

  • @TimGabe

    @TimGabe

    11 ай бұрын

    that's great to hear, Bethany!! thanks for commenting!!

  • @muhammedjameel
    @muhammedjameel8 ай бұрын

    Tim my boy you are doing a really great job, clean tutorial, amazing and simple video structure

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thanks a lot, muhammed!!

  • @Kalaikalanjiyam
    @Kalaikalanjiyam4 ай бұрын

    Its a great explanations. its easily understandable. Do more stuff in FIGMA. Thanks for doing it. its really helpful for me.

  • @todaysunshines4562
    @todaysunshines4562 Жыл бұрын

    Wow, you nailed it! Really organized, and helpful! Thank you!

  • @TimGabe

    @TimGabe

    Жыл бұрын

    that’s so nice of you to say! thanks a lot 😃

  • @DavidPilco
    @DavidPilco2 ай бұрын

    Great video! Thanks ❤

  • @liokskarbach
    @liokskarbach Жыл бұрын

    You are a legend, Tim! Adore 🤙

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thank you so much, Lioks! that put a smile to my face 🥳

  • @thomasfazanaro
    @thomasfazanaro7 ай бұрын

    Amazing explanation, straight to the point and very practical. Thank you!

  • @TimGabe

    @TimGabe

    7 ай бұрын

    happy you liked it, thomas!

  • @vrajgajjar-cm7fq
    @vrajgajjar-cm7fq5 ай бұрын

    Insightful!! Thanks for this tutorial, I was looking for exactly this.

  • @TimGabe

    @TimGabe

    5 ай бұрын

    that's great to hear. thanks for commenting!! 😃

  • @DharaGuptaa
    @DharaGuptaaАй бұрын

    this really helped in removing the intimidation with design system

  • @mahnoosh59
    @mahnoosh594 ай бұрын

    Thanks for this video, it was helpful for me

  • @xhongaronga
    @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

    @TimGabe

    Жыл бұрын

    my brother 🙏😃 happy that it helped you understand nested components better!! 🤩

  • @fizakhatri6505
    @fizakhatri6505Ай бұрын

    Very simple and informative

  • @julianTrichardson
    @julianTrichardson Жыл бұрын

    Super video Tim!

  • @TimGabe

    @TimGabe

    Жыл бұрын

    really happy you liked it, Julian! 😃

  • @andreaamato2259
    @andreaamato2259 Жыл бұрын

    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

    @TimGabe

    Жыл бұрын

    hallå Andrea!! 😃🇸🇪 thank you so much for putting your time into commenting and supporting, it's really appreciated! 🤩

  • @raku.aladdin
    @raku.aladdin Жыл бұрын

    you saved my life thanks man ! Keep uploading

  • @TimGabe

    @TimGabe

    Жыл бұрын

    so cool to hear that you found it helpful, Rakesh!!

  • @ahmad_habbab
    @ahmad_habbab6 ай бұрын

    Again Nice Tutorial and with the complete guidence Thanks ALOT ❤

  • @TimGabe

    @TimGabe

    6 ай бұрын

    thanks for the love, ahmad! 💜

  • @RedeemingLight
    @RedeemingLight15 күн бұрын

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

  • @princeabelle7137
    @princeabelle71378 ай бұрын

    Great video. Im just starting out so this was quite easy to understand. Thanks❤

  • @TimGabe

    @TimGabe

    8 ай бұрын

    awesome to hear!! 💜

  • @silverflowerhohocham3711
    @silverflowerhohocham37115 ай бұрын

    Your videos are really helpful Tim, I'm only starting out on Figma and I've learnt many things from your videos

  • @TimGabe

    @TimGabe

    5 ай бұрын

    that's awesome to hear. thank you for commenting!

  • @hossamayman3587
    @hossamayman3587 Жыл бұрын

    I'm really in love with you contents ❤❤ keep up the good work

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thank you so much, my friend 💜

  • @threeelancer
    @threeelancer8 ай бұрын

    Beautiful and succinct lesson.

  • @TimGabe

    @TimGabe

    8 ай бұрын

    glad to hear you liked it!!

  • @uiuxdesigner101
    @uiuxdesigner101 Жыл бұрын

    Amazing video Tim!!! & Pls make more on Design System

  • @TimGabe

    @TimGabe

    Жыл бұрын

    so cool that you liked it, Shakoor! I think I'll make a more advanced tutorial on design systems soon 🤩

  • @olalekandaramola9541
    @olalekandaramola95418 ай бұрын

    This is really good and easy to comprehend.

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thank you! 😃

  • @danieleiorio4832
    @danieleiorio4832 Жыл бұрын

    Super helpful video! The documentation part of the design system is key and I look forward to watching your explanation on that!🤩

  • @TimGabe

    @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

    @danieleiorio4832

    Жыл бұрын

    @@TimGabe Exactly 🙂

  • @somanna_bu008
    @somanna_bu008 Жыл бұрын

    Thanks for the video. Was very easy to understand.

  • @TimGabe

    @TimGabe

    Жыл бұрын

    happy you liked it, my friend! 🤩

  • @user-ct8qq8bg6z
    @user-ct8qq8bg6z11 ай бұрын

    best figma teacher, great tutorial as always 💪

  • @TimGabe

    @TimGabe

    11 ай бұрын

    so appreciated! thanks a lot!!

  • @Adrian_Galilea
    @Adrian_Galilea10 ай бұрын

    So many things about designing in figma and design systems clicked for me on this video.

  • @TimGabe

    @TimGabe

    8 ай бұрын

    that's amazing to hear, adrian!!

  • @khadijarachmoun2632
    @khadijarachmoun263210 ай бұрын

    That was so helpful thank you so much

  • @TimGabe

    @TimGabe

    10 ай бұрын

    thank you for commenting, friend!!

  • @kcmichealx
    @kcmichealx11 ай бұрын

    For the first time I understood. Thank you✌✌

  • @TimGabe

    @TimGabe

    8 ай бұрын

    awesome to hear, my friend!!

  • @Shatz
    @Shatz Жыл бұрын

    you are amazing thank you very much :)

  • @TimGabe

    @TimGabe

    Жыл бұрын

    appreciate it a lot, Omer 🤩

  • @agustinpelletlastra5877
    @agustinpelletlastra58778 ай бұрын

    your videos are gold

  • @TimGabe

    @TimGabe

    8 ай бұрын

    truly appreciate that, my friend!

  • @haidayouness7685
    @haidayouness76853 ай бұрын

    thank you

  • @RezoUI
    @RezoUI Жыл бұрын

    Thanks!

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thank you, Rezzo!!

  • @ulikszenelaj7465
    @ulikszenelaj7465 Жыл бұрын

    Epic ⭐

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thanks a lot, Uliks! 🥳

  • @osiris7945
    @osiris79455 ай бұрын

    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

  • @TimGabe

    @TimGabe

    5 ай бұрын

    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!

  • @chind0na
    @chind0na20 күн бұрын

    Did you make the design system for Appwrite? The glass effect on cards is superb.

  • @porwinii
    @porwinii4 ай бұрын

    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?

  • @ACaipira
    @ACaipira3 ай бұрын

    could you please show a tutorial on how to design a passport in Figma?

  • @klokkerholm1993
    @klokkerholm1993 Жыл бұрын

    Design system for website and e~commerce are you experience Does it fit or more for webapps apps😊

  • @TimGabe

    @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. ☺️

  • @verysetiawan1778
    @verysetiawan1778 Жыл бұрын

    In your opinion, Design System is better made at the beginning or at the end? Btw, Great Content 🔥🔥

  • @TimGabe

    @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

    @TimGabe

    Жыл бұрын

    and thanks a lot for the comment!!

  • @simonswiss
    @simonswiss5 ай бұрын

    lol the GaryVee "how- ever"

  • @TimGabe

    @TimGabe

    5 ай бұрын

    😂😂 gary the goat!!

  • @subramanianchenniappan4059
    @subramanianchenniappan40596 ай бұрын

    I am a programmer . Want to learn figma . Do you have a single video for that . In playlist many videos are there

  • @TimGabe

    @TimGabe

    6 ай бұрын

    i think the playlist is the best way if you want to learn figma 🙏

  • @capitandelnorte
    @capitandelnorte5 ай бұрын

    When I press the working file I just get a new version of the video again

  • @TimGabe

    @TimGabe

    5 ай бұрын

    check the button below the video!

  • @conceptcoder
    @conceptcoder8 ай бұрын

    Finally i found you

  • @TimGabe

    @TimGabe

    8 ай бұрын

    haha, i'm happy to have you my friend!!

  • @conceptcoder

    @conceptcoder

    8 ай бұрын

    Im from 🇮🇩 Indonesia and really need this stuff. I Wanna implement Design System with Flutter....

  • @swatikumari2722
    @swatikumari272224 күн бұрын

    your figma link isn't working!

  • @augustinekirumba4304
    @augustinekirumba4304 Жыл бұрын

    And voilla!!

  • @fishtrekgames
    @fishtrekgames6 ай бұрын

    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

  • @TimGabe

    @TimGabe

    6 ай бұрын

    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
    @morshlab10 ай бұрын

    your most of the video sound is too low plz fix it

  • @TimGabe

    @TimGabe

    8 ай бұрын

    better studio these days!!

  • @subramanianchenniappan4059
    @subramanianchenniappan40596 ай бұрын

    I am a programmer for 15 years . I know system design . What is design system 😅😅

  • @TimGabe

    @TimGabe

    6 ай бұрын

    haha, that's great! a design system is a collection of components, styles, etc. that make up your whole app, basically 😃

  • @LimitedKnowledge12
    @LimitedKnowledge128 ай бұрын

    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

    @TimGabe

    7 ай бұрын

    sorry to hear that you found it confusing!

  • @ytrpaz
    @ytrpaz Жыл бұрын

    this is i need most thanks gabe

  • @TimGabe

    @TimGabe

    Жыл бұрын

    so happy to hear it, Ritche! 🤩

  • Жыл бұрын

    Super cool! I love your designs. colors and theme. perfect.

  • @TimGabe

    @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