Your First Design System in Figma (Beginner Tutorial)

  Рет қаралды 101,975

Tim Gabe

Tim Gabe

Күн бұрын

Пікірлер: 126
@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 Жыл бұрын
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
@rashedperez
@rashedperez 3 ай бұрын
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.
@yalnisinfo
@yalnisinfo 19 күн бұрын
this is so refreshing , thanks. It's been 1 year since i touched figma. Now its time to go back
@RedeemingLight
@RedeemingLight 5 ай бұрын
"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.
@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!! 🥳
@DharaGuptaa
@DharaGuptaa 6 ай бұрын
this really helped in removing the intimidation with design system
@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 😃
@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! 😃
@foldswork4788
@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!
@wisdom5603
@wisdom5603 18 күн бұрын
This is the simplest and the most beautiful explanation of the design system!!!! Thank you so muchh!
@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! 🙏
@Adrian_Galilea
@Adrian_Galilea Жыл бұрын
So many things about designing in figma and design systems clicked for me on this video.
@TimGabe
@TimGabe Жыл бұрын
that's amazing to hear, adrian!!
@andreasamato
@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
@TimGabe Жыл бұрын
hallå Andrea!! 😃🇸🇪 thank you so much for putting your time into commenting and supporting, it's really appreciated! 🤩
@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!! 🤩
@beth_chan
@beth_chan Жыл бұрын
Thank you for creating this video Tim, you've explained design systems in the clearest way I found 😊
@TimGabe
@TimGabe Жыл бұрын
that's great to hear, Bethany!! thanks for commenting!!
@MuTheDev
@MuTheDev Жыл бұрын
Tim my boy you are doing a really great job, clean tutorial, amazing and simple video structure
@TimGabe
@TimGabe Жыл бұрын
thanks a lot, muhammed!!
@silverflowerhohocham3711
@silverflowerhohocham3711 10 ай бұрын
Your videos are really helpful Tim, I'm only starting out on Figma and I've learnt many things from your videos
@TimGabe
@TimGabe 10 ай бұрын
that's awesome to hear. thank you for commenting!
@thomasfazanaro
@thomasfazanaro Жыл бұрын
Amazing explanation, straight to the point and very practical. Thank you!
@TimGabe
@TimGabe Жыл бұрын
happy you liked it, thomas!
@evanskariuki2799
@evanskariuki2799 4 ай бұрын
Thank you for this Tim. Very concise and clear.
@Glambyyumna
@Glambyyumna 10 ай бұрын
One of the most simple and well explained videos! Already subscribed your channel!
@CryptoWith_fhiyyerh
@CryptoWith_fhiyyerh Жыл бұрын
I always love your videos, short and you convey all the messages.🥰
@TimGabe
@TimGabe Жыл бұрын
so happy to hear it, Safiyyah! 🥳
@AimeezDesign
@AimeezDesign Күн бұрын
You're amazing. 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 🙂
@Kalaikalanjiyam
@Kalaikalanjiyam 9 ай бұрын
Its a great explanations. its easily understandable. Do more stuff in FIGMA. Thanks for doing it. its really helpful for me.
@princeabelle7137
@princeabelle7137 Жыл бұрын
Great video. Im just starting out so this was quite easy to understand. Thanks❤
@TimGabe
@TimGabe Жыл бұрын
awesome to hear!! 💜
@liokskarbach
@liokskarbach Жыл бұрын
You are a legend, Tim! Adore 🤙
@TimGabe
@TimGabe Жыл бұрын
thank you so much, Lioks! that put a smile to my face 🥳
@osiris7945
@osiris7945 10 ай бұрын
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 10 ай бұрын
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!
@vrajgajjar-cm7fq
@vrajgajjar-cm7fq 10 ай бұрын
Insightful!! Thanks for this tutorial, I was looking for exactly this.
@TimGabe
@TimGabe 10 ай бұрын
that's great to hear. thanks for commenting!! 😃
@simonswiss
@simonswiss 10 ай бұрын
lol the GaryVee "how- ever"
@TimGabe
@TimGabe 10 ай бұрын
😂😂 gary the goat!!
@berniceebenezer9878
@berniceebenezer9878 4 ай бұрын
Great video, simple and to the point!
@DarkOverFlowOverflow
@DarkOverFlowOverflow 4 ай бұрын
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
@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 😃
@aaskpro
@aaskpro 9 ай бұрын
Very nice Brother. Thanks for decluttering the thoughts about the design system.
@olalekandaramola9541
@olalekandaramola9541 Жыл бұрын
This is really good and easy to comprehend.
@TimGabe
@TimGabe Жыл бұрын
thank you! 😃
@ahmad_habbab
@ahmad_habbab 11 ай бұрын
Again Nice Tutorial and with the complete guidence Thanks ALOT ❤
@TimGabe
@TimGabe 11 ай бұрын
thanks for the love, ahmad! 💜
@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 🤩
@threeelancer
@threeelancer Жыл бұрын
Beautiful and succinct lesson.
@TimGabe
@TimGabe Жыл бұрын
glad to hear you liked it!!
@raku.aladdin
@raku.aladdin Жыл бұрын
you saved my life thanks man ! Keep uploading
@TimGabe
@TimGabe Жыл бұрын
so cool to hear that you found it helpful, Rakesh!!
@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!!
@hossamayman3587
@hossamayman3587 Жыл бұрын
I'm really in love with you contents ❤❤ keep up the good work
@TimGabe
@TimGabe Жыл бұрын
thank you so much, my friend 💜
@AlexAlex-f4y
@AlexAlex-f4y Жыл бұрын
best figma teacher, great tutorial as always 💪
@TimGabe
@TimGabe Жыл бұрын
so appreciated! thanks a lot!!
@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. ☺️
@porwinii
@porwinii 9 ай бұрын
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?
@chind0na
@chind0na 5 ай бұрын
Did you make the design system for Appwrite? The glass effect on cards is superb.
@fizakhatri6505
@fizakhatri6505 6 ай бұрын
Very simple and informative
@agustinpelletlastra5877
@agustinpelletlastra5877 Жыл бұрын
your videos are gold
@TimGabe
@TimGabe Жыл бұрын
truly appreciate that, my friend!
@julianTrichardson
@julianTrichardson Жыл бұрын
Super video Tim!
@TimGabe
@TimGabe Жыл бұрын
really happy you liked it, Julian! 😃
@fatemeabdollahi2462
@fatemeabdollahi2462 3 ай бұрын
your video is great and worth watching.thanks☺
@kcmichealx
@kcmichealx Жыл бұрын
For the first time I understood. Thank you✌✌
@TimGabe
@TimGabe Жыл бұрын
awesome to hear, my friend!!
@mahnoosh59
@mahnoosh59 9 ай бұрын
Thanks for this video, it was helpful for me
@subramanianchenniappan4059
@subramanianchenniappan4059 11 ай бұрын
I am a programmer . Want to learn figma . Do you have a single video for that . In playlist many videos are there
@TimGabe
@TimGabe 11 ай бұрын
i think the playlist is the best way if you want to learn figma 🙏
@somanna_bu008
@somanna_bu008 Жыл бұрын
Thanks for the video. Was very easy to understand.
@TimGabe
@TimGabe Жыл бұрын
happy you liked it, my friend! 🤩
@PorconautaGames
@PorconautaGames 3 ай бұрын
Great video! How do you document margin / padding patterns in your design system?
@Milkshiva
@Milkshiva 3 ай бұрын
Who did you came to the first step? The outlined fields called Button, Icon label, Card …?
@moomo010
@moomo010 Ай бұрын
where's your t-shirt from ?
@DavidPilco
@DavidPilco 7 ай бұрын
Great video! Thanks ❤
@khadijarachmoun2632
@khadijarachmoun2632 Жыл бұрын
That was so helpful thank you so much
@TimGabe
@TimGabe Жыл бұрын
thank you for commenting, friend!!
@capitandelnorte
@capitandelnorte 10 ай бұрын
When I press the working file I just get a new version of the video again
@TimGabe
@TimGabe 10 ай бұрын
check the button below the video!
@haidayouness7685
@haidayouness7685 9 ай бұрын
thank you
@ACaipira
@ACaipira 8 ай бұрын
could you please show a tutorial on how to design a passport in Figma?
@Shatz
@Shatz Жыл бұрын
you are amazing thank you very much :)
@TimGabe
@TimGabe Жыл бұрын
appreciate it a lot, Omer 🤩
@swatikumari2722
@swatikumari2722 5 ай бұрын
your figma link isn't working!
@ulikszenelaj7465
@ulikszenelaj7465 Жыл бұрын
Epic ⭐
@TimGabe
@TimGabe Жыл бұрын
thanks a lot, Uliks! 🥳
@RezoUI
@RezoUI Жыл бұрын
Thanks!
@TimGabe
@TimGabe Жыл бұрын
thank you, Rezzo!!
@Horlufemi
@Horlufemi Ай бұрын
😭 Thank You
@conceptcoder
@conceptcoder Жыл бұрын
Finally i found you
@TimGabe
@TimGabe Жыл бұрын
haha, i'm happy to have you my friend!!
@conceptcoder
@conceptcoder Жыл бұрын
Im from 🇮🇩 Indonesia and really need this stuff. I Wanna implement Design System with Flutter....
@fishtrekgames
@fishtrekgames 11 ай бұрын
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 11 ай бұрын
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
@morshlab Жыл бұрын
your most of the video sound is too low plz fix it
@TimGabe
@TimGabe Жыл бұрын
better studio these days!!
@augustinekirumba4304
@augustinekirumba4304 Жыл бұрын
And voilla!!
@LimitedKnowledge12
@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
@TimGabe Жыл бұрын
sorry to hear that you found it confusing!
@subramanianchenniappan4059
@subramanianchenniappan4059 11 ай бұрын
I am a programmer for 15 years . I know system design . What is design system 😅😅
@TimGabe
@TimGabe 11 ай бұрын
haha, that's great! a design system is a collection of components, styles, etc. that make up your whole app, basically 😃
@taygomez2661
@taygomez2661 4 ай бұрын
Great tutorial and the teacher is hot af🔥
Жыл бұрын
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
@ytRap007
@ytRap007 Жыл бұрын
this is i need most thanks gabe
@TimGabe
@TimGabe Жыл бұрын
so happy to hear it, Ritche! 🤩
Build a Complete Figma Design System  (Freelance Course Preview)
15:55
Build a Design System! Ep. 1: Figma Tokens & Variables Setup
1:25:39
UI Collective
Рет қаралды 37 М.
How Many Balloons To Make A Store Fly?
00:22
MrBeast
Рет қаралды 153 МЛН
УДИВИЛ ВСЕХ СВОИМ УХОДОМ!😳 #shorts
00:49
HARD_MMA
Рет қаралды 4,1 МЛН
Молодой боец приземлил легенду!
01:02
МИНУС БАЛЛ
Рет қаралды 2,2 МЛН
Config 2024: Design systems best practices | Figma
48:39
Create a Figma Design System - Fundamentals (Part 1)
13:43
Design Better Than 99% of UI Designers
14:52
Tim Gabe
Рет қаралды 217 М.
Reduce Prototypes by 50% (Simple trick) | Figma Tutorial
5:41
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 857 М.
Organize Your Figma File Like a PRO
8:06
Rachel How
Рет қаралды 104 М.