Figma COMPONENT PROPERTIES & BASE COMPONENTS Explained: The Ultimate Guide!
Vložit
- čas přidán 30. 07. 2024
- 🚀 Get 2 free months of Skillshare Premium & watch my design course for free: 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:
/ @designpilot
🔗 Figma File: www.figma.com/file/cVU0r3ipWA...
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
🔸 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:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#uiuxdesign #figma #designsystems - Krátké a kreslené filmy
19:30 ( I can't find this video, Is that title or thumbnail changed? )
The Ultimate Guide to Figma's Auto Layout: Design and Construct UI Components like a Pro in Figma!
czcams.com/video/fDemGEmKy0c/video.html
@@DesignPilot I thought it would be, Just a Confusion! 🙂
This is the highest form of teaching! Frikking gold mine
This is the tutorial I have been looking for.
Being an experienced designer, I'm literally blown up.
I wasn't aware of most of these things because I already have a vast design system in my company.
I knew how to use these but always wondered how to build them. Mind-blowing content; you deserve a hell lot of views.
Chethan you are so so so so great in this field thank you so much for this much knowledge
No one has explained about components in such detail. Thank you Chetan :)
It's Literally Awesome Chethan....! 💖
🔥🔥🔥
Thank you Chethan!
I never imagined that components could be taught and created using such wonderful methods and explanations. The effort and topic coverage is mind-blowing. Thank you for creating this, Chethan❤
This is such a fantastic tutorial, Chethan. It is really a blessing to have this content for free. To getting 100x better 🥂
this was mind blowing stuff Chethan!! so much complexity goes while building these components but you explained so well!! thank you so much!
You. Are. Amazing. I've been struggling with this stuff for so long and you explained every piece perfectly and with great examples and humor. I'll definitely be subscribing and heading here for other design tutorials and guides. Thank you.
Broo this is sick!! After watching your content i am feeling like I found the ultimate treasure. Keep the work coming. So excited!
Thank you so much for this!
Much love brother ♥
11:36 So good to know this. Otherwise, I'd be making multiple variants for buttons with icons and without icons
Thanks you very much Chetan!
one of the best tutorials I have ever seen(since last 15yrs).. hats off to your skills and detailing's in the video
You are such an amazing teacher. Thank you for the work, Chethan.
Hey chethan!! Are base components still relevant after the " expose from nested instances "feature ? i feel its quite easier and straightforward in nested instances.
Awesome man...This is going to be crazy series..💯
Wow nice... Another episode, super excited
Great content as always! Thank you
GREAT VIDEO OF COMPONENTS AND BASE COMPONENTS , I ALREADY LEARN AUTO LAYOUT FROM YOUR VIDEO , THAT ALSO THE GREAT ONE , THANK YOU CHETHAN
I enjoyed this, very awesome content, up next is app critique🚀
Great video. Thank you so much!!
Hey Chethan, This video helped me a lot in understanding component properties & variants. Really Thank You.❤ I searched a lot but was unable to understand what are base components & how we create those? Can you please share a good resource to understand the concept of Base components.
Base components might not be that relevant anymore because Component Properties have a lot more features in Figma today
@@DesignPilot ohh okay! Thank you so much. I thought the same but still wanted to make sure.🙌
Great stuff
please make some more indepth video like this.
Nice... Excited
Hey bhagwan apki ummer lambi hoo adbhut jsut awesome
Thanks for the tutorial ❤
You the best bro!
Wonderful tutorial, for sure I am going to use base components in all my future projects...
just want to add that figma updated one thing which is now we can select preferred components for instance swap so no need to apply that naming convention manually
Yeah. This tutorial was made before Figma added those features
Just teaching like a waoo !! 🙌
🤣🤣🤣
@@DesignPilot I can't tell you how much I was struggling 😢. and all of a sudden i found your video. You are a true saviour for me . Big fan now. 🙌🙌❤️
Hello 👋
Please make a single playlist on all these new videos.
It’s in a Playlist called the Mega Product Design Course for Beginners
@@DesignPilot The Best Course on CZcams till date🚀❤
Thank you so much ❤
Does anyone else not get the 'content' property on the button text? Im lostttt. Thanks for such an in depth video!
i have the same problem as well , also the Boolean property i cant see any toggle like in the video , is it because im in the free plan of figma or there is something i have doing wrong , help me pleeaaase
@cherry-lp8yq You should be able to see it. Doesn’t depend on the plan
Just amazing sir, remember me I'm Aakash
This topic is like Inception movie for designers
Lol
Very nicely explained, thank you so much for your efforts to make this video.
Can please create video on Android UI measurements,dimension, layout 8pt grid, 10pt grid. 🙏.
Thank so much. Very informative video
Just watch my first few videos on the playlist
🙏 gifted capability to simplify stuffs..
you can do another video with added two set of complexity in this - light/dark mode & multi-language handling.
Totally!
I'm Beginner, you explained very nice but we want all yours tutorial in hindi for ... jo Hindi medium se hai please help us. Thank you
Is the new variable feature on figma a replacement for variants? Please can you do a tutorial on variables? Thank you!
Variables and Variants have nothing to do with each other. Yes, I’m working on a new course that will cover variables.
At 24:30 where you talk about instance swap properties, I guess figma added a new way to make it less cluttery, by introducing the “preferred values” list, where we can add just the components that we want, do you think it’s better with that now?
Yess
The component properties are still not mature enough to be used in scalable design systems, so I hope Figma is listening to community feedback.
Yeah. I mentioned that in the video when I spoke about Variant Swapping
We learned from you ,one curious question from where you learned all of it?
Well, when you get into the industry and work at companies that that have really good design teams, you learn there.
Well when I was practicing this I Sawed Figma now introduced preferred values options in instance swap. Does that mean we don't have to make base components now?
I have a video called Expose Nested Instances. You can watch that.
@@DesignPilot ok thanks a lot ❤️🙏
Hey Chethan, I am unable to find the instance swap at 33:29? It is showing only Boolean.
Send me your Figma file
Consistency 💯
great course ... figma turning into a messy design tool adding all thise complocated tools which we hardly use in real life
That’s absolutely not true. Auto Layout and Component properties are heavily used. It’s impossible to build a robust design system without them.
I have a question why did u remove the tags status (success, error) from its container and used them as individual components , i was having a problem with the swap property but when i removed the container it worked , i just wanted to make sure i understood it very well , so what happened?? at 42:00
I just did it so that I could prevent going an extra level to change between success, error and neutral. It also made me use instance swap.
Ideally both options are fine.
@@DesignPilot yeah i got it now, thanks a bunch 🙏🙏
Revisiting this course, Did any anything change soince this course is published or are we still using base components now ? did figma bring any new ways to make this less complicated ?
Still the same
@@DesignPilot preferred values does the same job right ?
Thank you bro 😊❤️ but I have a question how to add emo?
Google that please
Wow. Very good tutorial. I have some problems because I don't know English. But anyway. two questions: you say Base Components, but I don't see the underscore in the component name.
And, what is that icon in the design panel. This little cirrcle with the arrow?
You need to type the underscore. That icon is to create a component property.
@@DesignPilot Thanks. Will have a look
Isn't there also a way to swap colors instead of searching endlessly in palettes? Any tutorial about that ;-)
It comes down to better organisation of colors. My videos on Color styles should help
how do you get the emoji keyboard? I use a plugin but it's not as fast
Control + Command + Space
33.29 I can't find the instance property..😢😢
Don't you think the text property is useful as you don't have to go back to the instance just to change the text after you have made changes to other properties?
I don’t really think it makes any difference whatsoever. Just a personal opinion
can you change the video title to how to become Figma God haha
Haha
33:29 i can only find Boolean property...can anyone assist me?😅
Same. I'm super confused. Especially going back and forth between different conventions now I don't understand what is correct and what is not lol. @DesignPilot would appreciate a refresher 🙏🏼
A Boolean property can only found on the LAYERS section of the inspector panel.
@@DesignPilot For me the problem starts at 49:24 where I'm not able to select the checkbox icon and then add an instance swap, it just shows boolean. I checked your original file and copied the checkbox from there and I still couldn't add instance swap + I know this is asking too much but can you make a new video explaining only the best practices? I have watched this 3 times and still find it really confusing. Or if you can't can you navigate me to a resource/video that does a good job explaining it. Would really appreciate the help