The RIGHT Way to Use Figma Component Properties (card design tutorial incl figma file)
Вставка
- Опубліковано 27 лип 2024
- Figma has released some FIRE features this year! And I know you probably feel like it’s challenging to keep up. The more stuff they release, the harder it gets. But don’t worry, I've got you covered. In this video, I’ll go through step by step how you should use Figma's Component Properties and Auto Layout to create the most comprehensive card component you’ve ever seen!
I'll walk you through the four main types of Component Properties: Variants, Boolean, Text Properties, and Swap Instances. And then, we'll move into the beta component property features that were launched recently. In this video, I'll cover two of those most relevant when creating a robust card component like this: Expose Nested Instances and Preferred Values. For the last example, I'll also explain a somewhat complex concept called "Slots", which will help you design components that are easier to maintain for both development, design, and content creation. The RIGHT way to do it!
▬▬▬ Video Chapters ▬▬▬
00:00 - Intro
00:26 - 4 Types of Component Properties
01:19 - Variants
09:29 - Boolean
12:03 - Text Properties
14:30 - Swap Instances
16:59 - Beta Features Component Properties
17:16 - Expose Nested Instances
22:17 - Concept of "Slots"
22:56 - Preferred Values
27:48 - Final Words
▬▬▬ Source File ▬▬▬
www.figma.com/community/file/...
▬▬▬ 🚀 Join our Free Skool Design Community ▬▬▬
Connect, learn, and grow with fellow designers
www.skool.com/wired-to-design
▬▬▬ Free Weekly Design Resources ▬▬▬
Sign up for the newsletter to get free resources every week!
www.wiredto.design/
▬▬▬ Who am I? ▬▬▬
Anik Devaughn
Instagram: / anikdevaughn
Twitter: / anikdevaughn
▬▬▬ Say whatsup! ▬▬▬
Instagram: / wired2design
Twitter: / wiredtodesign
#figma #componentproperties #carddesign #autolayout #ux #ui #uxdesign #components #ui #designprocess
Been struggling to learn all these for the past 4 MONTHS!!! Watched dozens of videos and still couldn’t fully grasp it.
Maybe I’m just slow, but your video helped me FULLY understand how to use these features in one night 🎉😅
Plus made me realize how easy and simple they are 💀
Oh wow that’s amazing!! Thank you so much for the feedback, I’m so happy it helped you 😄
Thanks for clearing this Topic.
Thanks a lot Anik!! Love this content ❤❤
This is my 7th video on component props and believe me , No one has explained about it as you✨
Oh wow, thank YOU so much for the support 🙏🏽❤️
Great vid. I've watched many vids trying to wrap my head around this while still trying to keep up with my day-to-day work. Your pace and examples were perfectly executed. Thank you 🙌🏻
Ahh Julian, this means a lot to me. Thank you so much!
Great tutorial! Love your teaching style!
Thank you so much! 🙏🏾
Hey! Thanks so much for this video!
Great stuff, very clear
This is great information, thanks
thank you so much for these tutorials! i've been having the hardest time understanding auto layout & components you break it down in such a clear way that i finally understand how to add it into my workflow. i subscribed so fast lol.
Thank you so much!!
THANK YOU for breaking this down so simply! These features have overwhelmed me for a while that I just can’t get a hang of it (a former sketch user) although I know it would make future processes faster after learning 😅 appreciate the practice file! Love your content!
Ahhh thank you so much for the support! Happy it helps 😄🙏🏾
Very well explained! Keep going 🙌
Thank you Carla!
This is the best free software Ive seen. Respect.
Glad you like it! Thank you!
Please keep your videos coming, hopefully you'll grow into a huge channel soon!
Thank you so much for the support Sagnik! More on the way soon 🙏🏾
amazing bro!
Superb!
thank you a lot for this videos, keep motivated pls!
Ahh, thank you!!
I have no idea why you keep getting so little views. Great content, as always. Thank you!
Appreciate you Bartosz! 🙏🏾
Thank you so much again!It could be so so nice and interesting to see from you designing maybe app or web page ,step by step, explaining how to make it as a good knowledgeable designer, because all content creators they don't explained good as you do!
Thank you!! I would highly recommend you to check out this playlist as I walk through my step-by-step process taking on a fictional project: ua-cam.com/play/PLrObhOc81hA80uLz2MGYIW0MkgZB6elhf.html
Hi
Thank you for your cool videos. Love it 😍😍
So happy you enjoy them, thank you!
🔥🔥🔥🔥
What if you want to change the padding of the first component? Does this apply to all other copies?
How is it possible to keep rounded corners in the card that doesnt get affected by show/hide img?
Make sure to add rounded corners on the outer (parent) frame, and check “Clip content” to ensure that the image layer placed within is bounded by the outer frame and is “clipped” by the rounded corners.
@@WiredtoDesign Ah nice! Thank you :)
I am following step by step, but when you get to the new beta section for nested compenents, I don't get the panel for exposed properties from nested instancces. Ugh frustrating.I tried to go back and see why it does not show. But can't figure it out. **Update to my comment. I happened to go on another video and in the comments someone happened to say that you had to turn on the beta setting in accounts! wth!??? how would someone even know that!? ugh. So crisis averted geez.
Ahh so sorry for the confusion! I should've clarified HOW to activate the beta features and not only talk about them. I am glad you figured out at last how to have them activated.
@@WiredtoDesign It's all good! :)
@@angelacalvin5790 i just googled "exposed properties" and found a figma article showing how to turn beta settings on
link doesnt work for me. how to fix it?
Sorry to hear! What does it say when you click on it?
Did you click on this one: www.figma.com/community/file/1163126697404042492
ah thank you now I know how to create this shitty boolean thing lmao
😂
BRO how are youre talking in x0.5 ?!
🤣🤭
So handsome.
Thank you!