Avatar Component - Figma Variables, Variants & Component Properties

Avatar Component - Figma Variables, Variants & Component Properties | Design System Part 9

Рет қаралды 5,571

Күн бұрын

🚨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. Passive income - Icon set - • Creating an Icon Set -...
2. Variables best practice - • Figma VARIABLES BEST P...
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 Intro
00:13 My Approach
01:32 Avatar faces
03:45 Avatar variables
05:46 Scoping the variables
06:43 Assigning the variables
08:20 Component time
09:23 FIMGA UPDATE
09:56 Status Indicator
13:15 Note on accessibility
16:13 Creating the Avatar
20:57 Avatar component time
25:00 What's Next
🤗 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

Пікірлер: 40

@huseinovmikail 10 ай бұрын

Appreciation for your design tips. Your efforts and positivity are truly valued.

@TDSunshine 10 ай бұрын

Thanks! 💛☀️🙏🏼

@platinoir 10 ай бұрын

Amazing content as always 🤜🤛 I would love to see how you’d tackle the process of considering light & dark mode when designing & making variables

@TDSunshine 10 ай бұрын

Thanks! I have been seeing this question a lot actually 😅 I will add it to my list! ☀️🤗

@minhtamdesigner 4 ай бұрын

Amazing tutorial. I love it

@TDSunshine 4 ай бұрын

Thanks! 🙏🏼☀️

@brahim2462 7 ай бұрын

Please more design system Videos!! Continue with this Vids please!! you're Amazing!

@TDSunshine 7 ай бұрын

Thanks! 🙏🏼☀️more to come!

@lilianacarvalho3283 10 ай бұрын

Thanks!

@TDSunshine 10 ай бұрын

🤗

@jcenlo 8 ай бұрын

Thank you for not wasting people's time, your videos are very concise and explanatory. Do you plan to make more videos of this course?

@TDSunshine 8 ай бұрын

Thanks! Not sure yet 🙈 Maybe one day... ☀️

@ramazanguler6066 10 ай бұрын

it was very good

@TDSunshine 10 ай бұрын

Thanks! 🙏🏼☀️

@andreeatheodora4329 2 күн бұрын

Hi! Great video - I have a question: been watching all of your videos in this series and I've been wondering why did you create the 05 Component Tokens for Input Field, Checkbox, Radio and now Avatar separately in Local variables? Isn't it more simple to just assign all radiuses/spacing/padding from the Number scale of 2's directly? I guess there is a reason for this but I can't find it myself - probably you explained it already in the videos but it didn't stick with me. Hope I made sense and you can clarify. Thanks.

@serifcolakel823 10 ай бұрын

Thank you explanation🙏 its looks like handling business logic 😅

@TDSunshine 10 ай бұрын

🙃☀️🙏🏼

@AntanasGeguzinskas 10 ай бұрын

Nice :)

@TDSunshine 10 ай бұрын

Thanks 😁☀️

@vijaychandoliya4975 5 ай бұрын

00:01 Creating a versatile Avatar component with different layouts and content options. 01:45 Creating components with text, image, and icon in Figma. 05:25 Using Primitives allows for easy scaling and updating of design system variables. 07:12 Setting up Avatar components and variants in Figma using variables and properties. 11:01 Use semantic colors for error, warning, success states to match user expectations. 12:54 Consider accessibility by avoiding reliance on color for signifying changes. 17:02 Creating a notification component with text and layout customization 18:48 Creating and organizing components with frames and alignment 22:19 Using Boolean and text component properties to toggle name, subtitle, and notification on and off 24:07 Using the target icon to select matching layers inside a component. Crafted by Merlin AI.

@TDSunshine 5 ай бұрын

thanks! ☀️

@isivaasanaru5643 6 ай бұрын

This series, of which I've followed from the beginning, has been life-changing! Something I thought perhaps you'd show after we finished doing the Design System (if this is the last step lol) would be to have you show us how to use these in a simple project. But also, I can't access the design system when I open my other files (in the same team where this was created). How do I make it available? (Sorry, just really new with all this.)

@TDSunshine 6 ай бұрын

Thanks! happy to hear its helpful! the best way around this would be to copy the new components into the same file each time so you keep building your next part from the same file. That way you can publish it as one library. I hope that makes sense ☀️🤗

@isivaasanaru5643 6 ай бұрын

@@TDSunshine Thank you so much for replying! I realized I was an idiot as I just didn't check your playlist. You had a video after where you explained everything 🙏 And I just watched your Auto Layout video-hands down the best one on KZfaq (and I've watched countless because it's so tricky to me lol).

@smilli6415 6 ай бұрын

whats components are u making next , cant wait

@TDSunshine 5 ай бұрын

☀️🧐

@djashawe88923 10 ай бұрын

Hi, thanks for the great content as always. I have a quick question. When it comes to setting layer visibility, is it better to do it at the component level or use variables at the prototype level? I'm looking for a general rule of thumb or a best practice.

@TDSunshine 10 ай бұрын

Hey! You are not going to like my answer - it depends 🙈 In certain situations hiding using variables is preferable and in some a boolean component property is better. I think it depends on what you are going to do with it. So for example if this is something that is gong to be prototyped than variable for sure so you can switch visibility on and off according to the interaction. Figma shared this video a few weeks ago about variables vs variants maybe it can help too! -> kzfaq.info/get/bejne/iL6Ba7uHztjemqc.htmlsi=nkPsiw5Ui8LEPhZE

@mahdiandalib186 10 ай бұрын

nice, can you plz talk about naming colors, primary, secondary, tritery.surfaceText.... i get confused when reading material design articles about color naming...

@TDSunshine 10 ай бұрын

Material design have a very intricate colour system I agree it's a bit tricky! I have this video showing how I build my own colour system (*Colour System* - kzfaq.info/get/bejne/p7Z8ZtiTydLPgoE.html) and also this video which talks about Figma's approach for variable naming (*Variables best practice* - kzfaq.info/get/bejne/jbN0fbxpm7jMfKM.html). I hope that helps! ☀️

@mahdiandalib186 10 ай бұрын

thx for helping me out@@TDSunshine

@tara730 8 ай бұрын

nice and detailed video but I think two things are missing, The first is changing the name the text under the avatar should be changed like that and the second is designer can change the size also. Can you elaborate on that as well? please

@TDSunshine 6 ай бұрын

🙏🏻

@Mr_Sin99 10 ай бұрын

Great tutorial. From where have you learned so much, on job or a particular course?

@TDSunshine 10 ай бұрын

Thanks! I have a BSc in computer science where I focused mainly on front end development. And I currently work as a Mobile UX designer at a global consultancy. But to be honest lots of my knowledge comes from KZfaq! So many amazing creators out here sharing their knowledge ☀️🤗

@Mr_Sin99 10 ай бұрын

@@TDSunshine Oh Wow, can u plz name a few good channels that u use to gather ur knowledge from? Also is there a online course that you would recommend on the internet?

@meryemdemir4311 2 ай бұрын

Hello again, I have a question. My avatar collection contains 4 sizes (s, m, l, xl), so when I make a nested instance, I have both size and type variants in my avatar group. Here I can tell you how to uninstall the variant. :(

@TDSunshine 2 ай бұрын

Hey! you can detach the nested instance if you don't want people to be able to swap to different variants. I hope that helps! ☀️