Summary
Keywords
Full Transcript
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z In this Figma Tutorial, I will show everything there is to know about Component Properties, Variants, and Base Components! Go from a Beginner to an Advanced Level in no time! 🌟 Enjoying my content? Here is your chance to support the channel: https://www.youtube.com/channel/UCt0L4zh1nkUKz36L8PsgCGw/join 🔗 Figma File: https://www.figma.com/file/cVU0r3ipWAm0WlMIVRHzZM/Component-Properties?node-id=0%3A1 🚀 Create an account on Mobbin for free: https://mobbin.com/?referrer_workspace_id=84595d96-a462-44f4-a3d2-c34148889947 🔸 Chapters 00:00:00 Introduction 00:00:56 What are Master Components and Instances? 00:02:09 What are Variants? 00:08:16 Why do we need Component Properties? 00:10:00 Type 1: Text Property 00:11:23 Type 2: Boolean Property 00:13:20 Type 3: Instance Swap Property 00:17:21 Constructing a List Item 00:23:13 Problems with Instance Swap Properties 00:25:40 Solution 1: Introducing Base Components 00:30:04 Solution 2: Instance Swap with a Better Naming Convention 00:32:39 Adding Instance Swap to the Start Icon 00:34:16 Adding the End Element 00:37:40 Creating Sub-Base Components 00:42:20 Combining Base Components + Instance Swap Property 00:46:17 Adding a few more elements to the List Item 00:50:57 Drawbacks of combining Base Components + Instance Swap 00:55:51 Base Components FTW! ------------------------------------------- UI/UX Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3 Webflow Course for Beginners: https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8 Photoshop Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi Illustrator Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1 After Effects Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk UI Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW Design Resources, Tools and Softwares: https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9 Adobe XD CC Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv eSports Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P -------------------------------------------------------------------------------------------- Contact me : Portfolio: https://chethankvs.design Twitter: https://twitter.com/kvschethan Instagram: https://instagram.com/design_pilot Mail: [email protected] Behance: https://behance.net/chethankvs Dribbble: https://dribbble.com/chethankvs -------------------------------------------------------------------------------------------- LIKE, SHARE, COMMENT & SUBSCRIBE :) #uiuxdesign #figma #designsystems
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
