Figma Components 101 | Learn about Variants and Components Properties | Figma tutorial

Подписаться 9 тыс.

Просмотров 11 тыс.

50% 1

🚨Follow along with this Figma file - www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Colour System - • Figma Design System - ...
2. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
3. Auto Layout | Config Update - • Figma AUTO LAYOUT UPDA...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to comment below. Your support means a lot and helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Hey!
00:16 Beginner
03:26 Intermediate
07:06 Advanced
09:01 › Boolean property
10:14 › Text property
11:28 › Instance swap property
13:59 Expert
22:49 Using the components and publishing
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes

Хобби

Опубликовано:

7 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 105

@DavidAdamEdelstein 3 месяца назад

99% of the time when I watch an instructional video on youtube, I have to watch them at 2X speed, because people pad their videos out with so much filler that it drives me crazy. Your videos are the complete opposite of that; I am constantly pausing and going back and I am never bored. All content, no filler, delivered cheerfully. THANK YOU.

@TDSunshine 3 месяца назад

aww thanks! I really appreciate it ☀️🙏🏻💛

@karenbeal2387 3 месяца назад

Fantastic as always! So fast but clear - I have to rewatch but love the fact you get to the point without any fluff!

@TDSunshine 3 месяца назад

Thanks 🙏🏻☀️💛

@SefatChowdhuryIsTheKing Месяц назад

This is one of the best tutorials available out there to differentiate variants with component properties. Thanks a bunch!

@TDSunshine Месяц назад

Thanks! ☀️🙏🏻💛

@ireland9292 4 месяца назад

This is far better than the two paid courses I've been doing. Covers a ton of ground with really practical examples, nicely done!

@TDSunshine 4 месяца назад

aww thanks! 🙏🏻☀️🤗

@Mauriciog623 5 месяцев назад

Great tutorial as always

@TDSunshine 5 месяцев назад

thanks! 🙏🏻☀️

@sahilaelc3626 4 месяца назад

Cool - you've covered it all - my new go to whenever I get stuck 🙌🏼

@TDSunshine 4 месяца назад

Thanks! 🙏🏼☀️💛

@jdherbig 3 месяца назад

Such a good refresher! Thank you :)

@TDSunshine 3 месяца назад

You're welcome ! 🙏🏻💛☀️

@Kimoartcave 5 месяцев назад

Nice one. It's one of the best tutorials I have ever seen about components in Figma ❤

@TDSunshine 5 месяцев назад

Thanks! 🙏🏼☀️🤗

@bogdanbogdan5911 3 месяца назад

Your Figma tutorials are an absolute game-changer! The depth of knowledge you share, from beginner-friendly breakdowns to expert-level techniques, is incredible. It's honestly mind-blowing that this wealth of information is free. The design system playlist, in particular, is pure gold! Thank you so much for everything you create.

@TDSunshine 3 месяца назад

aww Thanks! I really appreciate it! 🙏🏻☀️💛

@al75an 5 месяцев назад

Since the new Figma update (variables, auto layout etc. ) I watched a lot of tutorials and still have problems learning them until i watched yours, please keep doing them your way is so easy to learn you are awesome ❤

@TDSunshine 5 месяцев назад

Thanks! I'm so glad to hear my videos helped! 🙏🏻💛☀️

@BrunaMarzarotto 19 дней назад

Thanks for sharing! It was so important to clear some of my questions about Components!!

@TDSunshine 13 дней назад

You're welcome! I'm glad it was helpful ☀️🙏🏻💛

@rajawatlks 4 месяца назад

One of the best video i have seen for figma

@TDSunshine 4 месяца назад

Thank you! ☀️🙏🏻💛

@Panda-gu2yb 26 дней назад

Perfect Tutorial thank you

@TDSunshine 26 дней назад

You're welcome! ☀️🙏🏼

@paul_designs 4 месяца назад

You're a life saver TD. Thanks for the tutorial.

@TDSunshine 4 месяца назад

Happy to help! ☀️🙏🏼

@paul_designs 4 месяца назад

@@TDSunshine If you've got sometime in your hand, I'ld like to see some more Prototyping with Variables videos. It'ld help out alot as your teaching is no bs teaching. Thanks in advance !~

@saharkafi5467 Месяц назад

Extremely beneficial

@TDSunshine 26 дней назад

Thanks! ☀️🙏🏻

@DaudKurnia 4 месяца назад

thank you for your contents, such underrated content, keep it up!

@TDSunshine 4 месяца назад

Thank you! ☀️🙏🏻💛

@matthewlay4939 5 дней назад

This was great! You explained this very coherently! This should definitely have more than just 10k views!

@TDSunshine 4 дня назад

Thanks! I appreciate it! ☀️🙏🏻💛

@almighty.saumya 4 месяца назад

Girly explains it with magiccccccc

@TDSunshine 4 месяца назад

aww thanks! 🙏🏻🤗☀️

@user-up5xp1in7p 5 месяцев назад

Superb informative channel for designers I am really thankful for all your videos .

@TDSunshine 5 месяцев назад

Thanks! 🙏🏻☀️

@saharkafi5467 Месяц назад

Thanks for your content

@TDSunshine 26 дней назад

You're welcome! ☀️🙏🏻

@davidsdaybyday3636 4 месяца назад

I learned a lot of knowledge from this video. Thank you very much for sharing this video. ❤

@TDSunshine 4 месяца назад

Aww I’m glad! Thanks! 🙏🏼☀️💛

@user-ne1kj1pf9p 29 дней назад

Excellent

@TDSunshine 26 дней назад

Thanks! ☀️🙏🏻

@user-zr2dd6oe8x 4 месяца назад

This series has really helped me, I have no idea why it has so few likes

@TDSunshine 4 месяца назад

Thanks! 🙏🏻☀️

@ArtemKobyakov 2 месяца назад

Very useful tutorial and explaining

@TDSunshine 2 месяца назад

Thanks! 🙏🏼☀️

@chris.ar93 21 день назад

Great video! Thanks for sharing. Keep up the good work 👏👏

@TDSunshine 13 дней назад

Thanks! ☀️🙏🏻💛

@francaye7 12 дней назад

so good! Thank you very much :)

@TDSunshine 11 дней назад

You're welcome! ☀️🙏🏻

@aldiransantos1946 Месяц назад

Great!

@TDSunshine Месяц назад

☀️🙏🏻

@emilijamanevska3693 4 месяца назад

Excellent video 👏💫very easy to follow, it was a real help for me. Thank you 😇

@TDSunshine 4 месяца назад

Glad it was helpful!🙏🏼☀️

@rishabh117rules 3 месяца назад

I was skeptical whether you could truly help me understand Figma as an expert, as you kept mentioning. However, as I kept watching your tutorial, I was blown away. I have watched hundreds of tutorials on Figma, but yours truly stood out. You made it very easy to understand and showed all the important properties. Additionally, you went the extra mile and demonstrated how to publish designs. It is evident that you have put in a lot of effort to make your tutorial better than others. Thank you for creating such an excellent video. You have earned a subscriber. Please keep creating such good content.🥂

@TDSunshine 3 месяца назад

aww thank you so much for your kind comment! ☀️🙏🏻💛

@roshniprajapati5963 Месяц назад

Hi Mam your videos very informative and very useful practical examples thank you for given components.😊

@TDSunshine Месяц назад

You are welcome ! ☀️🙏🏼

@xain4107 5 месяцев назад

Super informative videos! Keep it up 🔥 I’d like to see more variable videos intermediate to expert level

@TDSunshine 5 месяцев назад

Thanks! I have a playlist with all of my Variable videos and there will for sure be more in the future! ☀️🙏🏻ru-vid.com/group/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI

@xain4107 5 месяцев назад

Thanks! Love your vids, keep it coming 🤩🤩

@laurine.studio 4 месяца назад

Loving all of this series, thanks a lot! I just have one question: I saw you use both the toggle visibility and the specific property approach to manage the possibility to display specific parts in variants. How can I choose which technique to use? Specific properties makes me manage a ton of variants (your button example in your early vid) but I can finesse each one, where in your avatar example you used components in components and toggle (like I used to do before). Do you have any insight on this? Thanks a lot your videos are ultra useful. Love!

@TDSunshine 4 месяца назад

Hey! I have an annoying answer for you 🤪 it depends! There is no one right way to manage components. I would say if there’s a lot of complicated variance sometimes the “avatar approach “ is better. But it’s all about what works for you and your system. I think component properties, for example are great for the designer using the file, but are not great for documentation because you can’t see all the variants like you would, if it was just a normal components set. I hope that still helps somehow 🙏🏼☀️🤗

@mariabrunalopes 4 месяца назад

You so nice. Thanks for the content ❤

@TDSunshine 4 месяца назад

thanks! 🙏🏻☀️🤗

@faidon90125 5 месяцев назад

Very thorough indeed! Would you consider making a video on versioning? For example, how to handle deliverables that were ready for dev in the past and you don't want to update their instances for historicity reasons.

@TDSunshine 5 месяцев назад

Thanks! Thats a great idea! adding to my list 🙏🏻☀️🤗

4 месяца назад

me too!

@vladimirdursel 5 месяцев назад

100% quality as always! Love the expert component. Thank you. Is it possible to move your main component to another file once it's already created? Imagining I want to create one file with all my components (but didn't do it from the start) so I only add one library to my future projects.

@TDSunshine 5 месяцев назад

Thanks! Yes you can! I have a short that shows exactly how to move a component without breaking it ☀️ - ru-vid.comXmv5a-Qn_wo?feature=share

@vladimirdursel 5 месяцев назад

Thanks a lot 🙏 I could have looked a bit better sorry @@TDSunshine

@kriswayne7938 5 месяцев назад

Hey, How to get weight on non-filled icons right? Is it ok or allowed to have different stroke weights for different icons for the same app or website? I find some icons good in one weight and others in another weight

@TDSunshine 4 месяца назад

Hey! You want to keep visual consistency throughout your designs. So for example it's best to stick to filled / non-filled across ALL your icons and not mix and match. In terms of weight, I think you can get away with not having the exact weight as long as they still look like they come from the same "family". If some are super thin and some super thick it would look messy though in my opinion. I hope that helps! 🤗☀️

4 месяца назад

As good wines, you're getting more pro with the time! Just one question, this use of property boolean could replace the method you've used on Buttons for DS series, right?

@TDSunshine 4 месяца назад

Thanks! 🙏🏼 it could for hiding and showing the icon yes! But it’s all about what you need and what is best for your system :) in the DS example I have an icon on the left and on the right so if you Boolean those and let’s say only want to show 1 icon on label it can get a bit confusing. But use whatever system works for you! I’m here to give as many examples of different ways of working as I can 🤗☀️🙏🏼

4 месяца назад

@@TDSunshine ferpect! One more time, thanks for all the content and response. In our UX team we say "Let's do it on TD Sunshine way" 🙌☺️

@TDSunshine 4 месяца назад

🥹🥹🥹 💛☀@

@BrookeMotis Месяц назад

Do you offer any sort of UX design coaching/tutoring? I really enjoy your teaching style and feel like I actually learn from your content.

@TDSunshine Месяц назад

Hey! I don't at the moment but maybe in the future ☀️🙏🏻💛

@sophiemulders 2 месяца назад

Very nice, also following your design system series. Was trying to make a social icon component, but got confused by all the choices. You have different icons obviously, the icons itself can have different colors ( primary, black, white etc), The background can have different colors ( primary, black white etc) and the background can have a different radius ( square, rounded, circle) and apparently i am doing something wrong but for the love of all icons i can't get it to work... Any tips or are you planning a video on this perhaps?? Should i make a component set of all variations( different colors and backgrounds) of the instagram icon, make a set for all variations of the youtube icon etc? or is there a better way?

@TDSunshine 2 месяца назад

Oooo this is a tricky one! There are a few different approaches for this. I think an “atom” approach would work well. So really break it down into different components and then nest instances . So have one component for each icon and 3 variants for the colours . Then put instances of all the icons in another component set so the instances are variants of a new component. And then create another component just for the backgrounds. Finally an instance of the background component and an instance of the icon and then makes sure to expose the nested instances so you can see all the components properties you set up in the “deeper levels”. I hope that makes sense! 💛☀️🙏🏼

@sophiemulders 2 месяца назад

@@TDSunshine i am going to try! Thanks for thinking with me!

@sophiemulders 2 месяца назад

Well technically speaking it works like a charm, but the sizing of the icons is a pain in the ass... as long as the background is a square or rounded shape it is fine, but when it is a circle.... the icon is to big. so i tried to scale it but not working correctly, Do you have a video about scaling inside components etc...?

@user-up5xp1in7p 5 месяцев назад

Can u please make separate playlist on ux design by solving one real world problem through end to end design process using possible AI tools at industry level and also playlist on redesign of any product at industry level practicing as it going to be helpful for all budding as well as experienced designers to enhance their skills .

@TDSunshine 5 месяцев назад

Great ideas! will add to my list 🙏🏻☀️🤗

@user-up5xp1in7p 5 месяцев назад

Thank u so much . Eagerly waiting..

@mohit-k0813 2 месяца назад

I have a question, if you share or handoff this file in which you used components from your existing library then, would you detach all the components and recreate them for your client or hand them off as it is? What are best practices in this context?

@TDSunshine 2 месяца назад

great question! are you going to hand over the file where the main component "lives" as well? if so I would advise asking your client to upload the .fig with the main components into their Figma first, then publish it. and then when they add in the other files they should connect to the local component OR you may need to just swap libraries. Here are a few videos that may help! ☀️💛🙏🏻 Move a component to a different file - ru-vid.comXmv5a-Qn_wo?feature=share Swap libraries - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GQ2jztKpxLk.html

@mohit-k0813 2 месяца назад

@@TDSunshine No No my question was on the condition that if we don't hand over the main component file, then what should we do. But I'll check out these videos as well to see if I find my answer. I would like to know how you deal this kind of situation :⁠-⁠)

@saharkafi5467 Месяц назад

😍😍😍😍😍

@TDSunshine 26 дней назад

☀️🙏🏻

@m7280 2 месяца назад

😍😍😍😍😍😍😍😍😍

@TDSunshine 2 месяца назад

🙏🏻☀️💛

@ramazanguler6066 5 месяцев назад

There was nothing missing about the components in this course content.

@TDSunshine 5 месяцев назад

aww thanks! 🙏🏻💛☀️

@manishasant8248 4 месяца назад

Hello I'm facing issue with Boolean property it's not showing above later...can you help with that??

@TDSunshine 4 месяца назад

When you say above, do you mean later on the instance? 🤔☀️

@manishasant8248 4 месяца назад

Yes, it got resolved 😅 thanks for the response

@georgezorbas9036 Месяц назад

I like your videos. But my main problem is WHY to use all these? Your course would be fantastic if you use them in a real website built with Desktop / Tablet / Mobile to see how components would help to make things easier. I am trying to create my web app and I cant find simple lessons on how resizing texts and avatars in braking points. I don't know if it is possible but that's a real problematic situation. Mostly, it would be fantastic to know the WHY and how is it applying in real situations. Small examples like everyone does in their videos, I think can't work in the mind of people that want to learn. thanks for your videos!!!

@TDSunshine Месяц назад

Great idea! thanks for sharing! I'm always looking out for new ideas for videos people will find helpful so i'll add it to my list! ☀️🙏🏻💛