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

🚨Follow along with this Figma file -

💛 Thanks for watching, Tair 💛

🍿 _WHAT TO WATCH NEXT_ :

👋🏼 _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_ :

🌼 _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

[dhayve]

Finally on the last one
I have learnt a lot, keep on showing us how not to make mistakes and how to get out of them in these videos, it really helps, that's what keeps your videos special [besides your amazing personality too] by the way.

Love to see some videos on correcting newbie designs, you thought process and how you go about fixing the design will be of great value 👍

Ooh please keep up the good work❤

[niteshagrawalapr]

I have created my complete design system by following your design system playlist. I appreciate if you also create a 2nd part of it. Such as: Publishing design system as library, How to use conditional, and many more required features for starting a new project.

[huseinovmikail]

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

[platinoir]

Amazing content as always 🤜🤛

I would love to see how you’d tackle the process of considering light & dark mode when designing & making variables

[tamarlevy]

I love your necklace! Breathe <3 & and always, thank you for these amazing videos! I really loved this series!

[brahim]

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

[jcenlo]

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?

[vijaychandoliya]

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.

[djashawe]

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.

[mahdiandalib]

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

[meryemdemir]

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. :(

[tara]

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

[isivaasanaru]

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

[Mr_Sin]

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

[smilli]

whats components are u making next, cant wait

[andreeatheodora]

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.

[serifcolakel]

Thank you explanation🙏 its looks like handling business logic 😅

[nikolov]

Crazy good! You are my hero! I want to donate! Please, set it up, so that I can give you something back. Your help is much appreciated!