Figma components: the basics to creating robust components

Figma components are extremely powerful and combined with the new auto-layout we can do some real magic with them. In this video I look at everything from the very basics of Figma components, to building out a robust form component using sub-components and auto layout, covering everything from creating, naming, and organizing your components along the way.

/// Timestamps
00:00 - Intro
02:20 - Creating the base
03:55 - auto-layout basics
04:58 - creating a component
06:15 - component instances
10:25 - creating different states
14:55 - naming and organization
19:47 - more complex components with auto layout
31:25 - using our component

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[atkacenko]

At the 19th minute of watching this, wanted to click the like button only realizing I had already done that. That's the way to present video - just provide value and not beg for likes and subs every minute.

[nidzeksmocni]

Thank you for the enormous amount of information you frequently provide us with, for your kindness, understanding and effort you put in. You are giving an inspiration and hope for brighter future. It is a nice gesture to help others in any aspect. Sadly, there are so many unthankful and selfish people not understanding the value of someone else's happiness. This world needs more people like you, Kevin. All the best! :)

[ankajoubert]

You are so good, thank you! I'm showing my students this video as it is truly the best one for components! Thank you!

[alexisabakasanga]

I learnt a lot from your tutorial, made components but still having issues with auto-layout. Thank you Kevin !!

[steveb]

When I came across this video at the early stages of my UI project, I was so glad I did, a great tutorial; informative, detailed and good pacing. The key is to pause and practice along!

[tazz]

Just started learning Figma and got stuck in the Input Field section, haven't slept whole night properly just thinking about the way to create success/error/ default in one component, woke up early, opened my laptop and clicked on this first video of my day and my problem got solved ! Right video at right time. thanks

[kvncnls]

Yes, please go over how to create a proper design system!

[azengakevin]

I have always been scared of designing, but you are truly an inspiration, am going through your tuts, and hope so after am done, I will be doing my projects right from design, to the end, thanks Kevin

[governoreliasokorno]

I recommend this video to anyone who wants to understand Components.
Just opened today, followed attentively and I am already through with it.

Consistent practice will make me perfect.
Great tutorial man!!!

Btw this is my first comment on a tutorial video goood Sir

[jedtd]

Thank you Kevin. Your video demonstrates how to start with components in Figma the fastest way. I really enjoy your channel a lot.

[nicolaspettini]

Great way to use components! I wasn't aware that you could link components this way by turning an instance of the master component into a new component. Nice to see how you built this form as well, by hiding elements that you reveal afterwards while building stuff. Thank you for sharing these valuable tips and for taking the time to do so!

[matthiaslangbart]

Nice, nice content, as always, Kevin! Keep up the good work!
Components remind me a lot of inheritance:
"master" is the arch-ancestor.
Every child inherits from its parent.
Every grandchild inherits from its parent and from its grandparent.
Each single child can override what it inherits from its parent (or grandparent).
Every change in a parent will be passed to the child unless the child overrides it.
Every change in "master" will be passed to all descendants unless a descendant overrides it.
Detaching a child takes it out of the inheritance tree.

[Damainefy]

Can we get an auto layout tutorial, please! Would be very appreciated! Thank you for these educational tutorials! Very helpful and super appreciated! Subscribed!

[howmuchdidthatcost]

bro! 5 min in and I'm already learning something new! I pray the rest of this video helps me figure out these components and variants and getting them to perform the way they should. I swear I was crying earlier trying to figure this out (after going thru 3 diff vid tutorials).

[noemu]

This is the best video about Figma components I have seen! Thank you so much for explaining in such a detailed and easy to understand way!

[afsanebarati]

I am using Figma for almost 2 years but I didn't know how to use components. It was awesome, thank you!

[goldenvox]

Excellent tutorial - thank you so much for sharing your knowledge and organizational expertise with the rest of us. I appreciate your easy-going but informative teaching style. Just subscribed!

[mdyousufgazi]

i was waiting for next figma course. thanks a lot for this video

[marketingalfatrex]

Thanks Kevin this is so much help me to not wasted my time to copy or change the property manually..love so much your awesome tutorial

[water]

Man, you Rock! 5-star explanation. With gratitude from Russia.