Figma Components 101 in UI3 | Learn about Variants and Components Properties | Figma tutorial
70.9K views · 2025-01-28
UI Design
🚨Follow along with this Figma file - https://www.figma.com/community/file/1466067024699731737
Thanks for watching, TD 💛
⭐️ Get 30% off Figma Weave (use code TDSunshine30) → https://weave.figma.com?ref=tdsunshine&fp_sid=oct
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
🍿 _WHAT TO WATCH NEXT_ :
1. *Colour System* - https://youtu.be/qPL3ubdlkRM
2. *Language change with variables* - https://youtu.be/X5arGNpdXS0
3. *Auto Layout | Config Update* - https://youtu.be/S8hjaZNwuCc
🌼 _CHAPTERS_ :
00:00 Hey!
00:11 Simple Component
03:34 Variants
07:19 Component properties
08:50 Text Property
10:32 Boolean Property
12:15 Instance Swap Property
14:30 Combining Variants & Properties
15:48 Using Atomic Design
🤗 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 #config2025 #figma2025 #designtokens #tokens #variables #variablemodes
Thanks for watching, TD 💛
⭐️ Get 30% off Figma Weave (use code TDSunshine30) → https://weave.figma.com?ref=tdsunshine&fp_sid=oct
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
🍿 _WHAT TO WATCH NEXT_ :
1. *Colour System* - https://youtu.be/qPL3ubdlkRM
2. *Language change with variables* - https://youtu.be/X5arGNpdXS0
3. *Auto Layout | Config Update* - https://youtu.be/S8hjaZNwuCc
🌼 _CHAPTERS_ :
00:00 Hey!
00:11 Simple Component
03:34 Variants
07:19 Component properties
08:50 Text Property
10:32 Boolean Property
12:15 Instance Swap Property
14:30 Combining Variants & Properties
15:48 Using Atomic Design
🤗 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 #config2025 #figma2025 #designtokens #tokens #variables #variablemodes