Figma components and variants for beginners
July 30, 2024 2024-07-30 15:07
Figma components and variants for beginners
Master Figma for web design with our new, in-depth Figma course: https://t.ly/ziCOp
Need a new Figma account? – https://psxid.figma.com/s8z3306bhq0h
The more you use Figma, the more you’ll find yourself duplicating stuff. I find this extremely annoying and time-wasting. The good news is that we have something called Components in Figma. And in this video I’ll teach you what they are and how to use them so you can stop wasting your time when designing.
📽️ CHAPTERS
00:00 – Intro
00:34 – What are components?
01:45 – What are variants?
02:51 – What are component properties
04:13 – How to create them
Let me know what you’d like to learn next! 💬
Subscribe to Tim’s YouTube Channel 👉 https://www.youtube.com/c/TimGabeDesign
Tim Gabe’s Instagram 👉 https://www.instagram.com/timgabe.design/?hl=en
📱 Find us on SOCIAL MEDIA
Flux Academy’s Instagram 👉 https://www.instagram.com/flux.academy/
#webdesign #design #figma #figmatips
source
Comments (20)
@ludwigrx
Thank you for the knowledge Senpai.
@jessvex
What’s a “buddon”?
@thasnitp3559
great class
@SisiBisi-zh1cj
Thank you so much
@omkarpulekar971
Thanks bro that was very helpful and detailed being short and sweet
@Panda-gu2yb
Perfect Tutorial thank you
@lisa_jocktan
Finally, i have understood components and property. Great tutorial 👍
@Kj-gr9fv
Anyone know how I could utilize the icon variant property to connect with the Material Symbols plugin? Maybe I have to save them like in the video as individual icons but it would be great if I could swap the icon via the plugin menu and search the full Material library. Thanks for any advice!
@emeraldezy9675
Nice video. Can this component property be used on multiple elements on a Product card for instance?
@khushboosharma6844
this was really helpful , thank you so much.
@FunMind0
BRAVO👏
@munkkipoika8737
Thanks, helped me to do my work.
@user-sh1lw8qo2b
Good
@hxxzxtf
🎯 Key Takeaways for quick navigation:
00:00 🔄 Duplicating and modifying designs repeatedly wastes time, which components in Figma help avoid.
00:25 📖 Components are templates for reusable design elements like buttons, icons, etc.
00:52 🖼️ Components are managed in the Assets panel and can be dragged onto the canvas.
01:47 🌓 Variants allow a single component to have multiple states (e.g. default, hover).
02:54 ⚙️ Component properties minimize the need for variants by allowing dynamic changes.
04:16 ✍️ Demonstrates creating a button component with default and hover variants.
06:17 📝 Shows adding a text property to dynamically change button text.
07:21 👁️ Adds a boolean property to show/hide the button text.
08:56 🖼️ Adds a boolean property to show/hide an icon in the button.
09:49 🔃 Demonstrates using an instance swap property to change the button icon.
Made with HARPA AI
@humhaispecial7478
best tutorial. bless you
@brosnhoem7977
thank you brother for sharing useful video.
🙏
@pratitikatakol9587
this was extremely helpful, thank you 😭
@mrdark601
There is something about the way he speaks, it is so understandable, thanks for slowing down for us
@charumurugesan1716
honestly the best video to learn about component properties .
@AnmolRamgiri
Frankly speaking, after going through the official Figma videos, your video was much easier to learn from.