Avatar Component - Figma Variables, Variants & Component Properties | Design System Part 9
18.5K views · 2023-09-25
UI Design
🚨Follow along with this Figma file -
https://www.figma.com/community/file/1288140746949697743
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
☆ Try Figma For *Free* - https://psxid.figma.com/xnd9l
🍿 _WHAT TO WATCH NEXT_ :
1. *Passive income - Icon set* - https://youtu.be/8V3LMRq5cEs
2. *Variables best practice* - https://youtu.be/WMDJY86RhLo
3. *Auto Layout | Config Update* - https://youtu.be/S8hjaZNwuCc
🌼 _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
https://www.figma.com/community/file/1288140746949697743
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
☆ Try Figma For *Free* - https://psxid.figma.com/xnd9l
🍿 _WHAT TO WATCH NEXT_ :
1. *Passive income - Icon set* - https://youtu.be/8V3LMRq5cEs
2. *Variables best practice* - https://youtu.be/WMDJY86RhLo
3. *Auto Layout | Config Update* - https://youtu.be/S8hjaZNwuCc
🌼 _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