The RIGHT Way to Use Figma Component Properties (card design tutorial incl figma file)

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 ▬▬▬
https://www.figma.com/community/file/...

▬▬▬ 🚀 Join our Free Skool Design Community ▬▬▬
Connect, learn, and grow with fellow designers
https://www.skool.com/wired-to-design

▬▬▬ Free Weekly Design Resources ▬▬▬
Sign up for the newsletter to get free resources every week!
https://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