Figma components: the basics to creating robust components

No video

Figma components: the basics to creating robust components

Рет қаралды 168,344

Күн бұрын

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
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowel...
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 180

@nidzeksmocni659 4 жыл бұрын

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! :)

@KevinPowell 4 жыл бұрын

So nice of you!

@steveb6283 2 жыл бұрын

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!

@atkacenko743 2 жыл бұрын

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.

@alexisabakasanga 3 жыл бұрын

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

@tazz763 3 жыл бұрын

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

@azengakevin2310 4 жыл бұрын

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

@kvncnls 4 жыл бұрын

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

@KevinPowell 4 жыл бұрын

Might be a little while before I get to it, but I think it'll be too much fun so I'll have to do it eventually :)

@alquinnaa 3 жыл бұрын

I third this

@Damainefy 3 жыл бұрын

Yes Yes Yes to a design system creation tutorial!

@ahmarraza3625 3 жыл бұрын

Another Vote

@lalitachin 3 жыл бұрын

@@KevinPowell Yes Please a design system tutorial will be great.

@governoreliasokorno9242 Жыл бұрын

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 toooooo goood Sir

@matthiaslangbart9841 3 жыл бұрын

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.

@nicolaspettini3143 Жыл бұрын

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!

@jedt3d 2 жыл бұрын

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

@afsanebarati5439 3 жыл бұрын

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

@ankajoubert5394 Жыл бұрын

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

@noemu1 2 жыл бұрын

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!

@howmuchdidthatcost 2 жыл бұрын

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).

@pawekoaczynski4505 3 жыл бұрын

This is the best video about Figma I've ever seen. I learned about a lot of feature I've never heard of before 👍

@water1990 2 жыл бұрын

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

@mdyousufgazi4030 4 жыл бұрын

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

@KevinPowell 4 жыл бұрын

More to come!

@mdyousufgazi4030 4 жыл бұрын

@@KevinPowell I just started Figma after watching your video. I just loved these 2 videos on Figma. I cant wait for more videos on Figma.

@Damainefy 3 жыл бұрын

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

@adamstuartclark 4 жыл бұрын

I find creating states in Figma to be a lot more fiddly and time consuming that Adobe XD. Excellent video. I learned a lot.

@siddhantjain2402 4 жыл бұрын

Thank you so much Kevin! We were using a 3rd party Design Kit and were curious about the component names. Now it makes much more sense! 😆 Love your content man, keep it coming!

@marketingalfatrex3706 3 жыл бұрын

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

@srikarksv1317 4 жыл бұрын

Thank you for these wonderful wonderful series!

@dzintarsmagons 4 жыл бұрын

Creating components seems similar to defining sass variables that you would be using over and over again with consistency and effectiveness in mind. Basically having logic and structure at the basis of what you are creating. Thank you for putting in the amazing work! :)

@joelwalker8198 3 жыл бұрын

Really enjoyed this video. I appreciate how you approach your design and the organization you give to your component and wireframe pages. Thank you so much for uploading these videos, they have gone a long way to helping me get better at Figma.

@MishaRGB 2 жыл бұрын

Thanks a lot for the tutorials, One of the best I've seen. You most likely know this trick, but just in case... the quickest way to zoom in/out is by holding the alt/option button on the keyboard and using the wheel on the mouse. works with almost all products. Thanks again. regards

@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!

@idontsarangyou 3 жыл бұрын

I love love love your videos! these are so helpful and even though I am just doing this on my free time, you really are inspiring me to do more! Hopnestly you make all of this look easy, keep it up!

@sanskar49 2 жыл бұрын

Am so happy to have come across your channel, this video was quite helpful as am making a switch from adobe xd to figma and moreover your way of explanation and patience is marvellous! Have subscribed and look forward to watch almost all of your content.

@Carroty_Peg 3 жыл бұрын

Thank you very much!!! I struggle with auto layout a lot as a beginner. Trying to make tinder scrolls and the scrolling puzzles me!

@maneeshrockx667 4 жыл бұрын

I was waiting for your video sir...gonna watch it , and I'm sure it's gonna be amazing as always..❤

@justincone4670 Жыл бұрын

Excellent video. Thanks so much.

@nayoonfilm Жыл бұрын

This tutorial was really helpful to understand Figma key features. Thanks a lot!

@SjoerdFIT 2 жыл бұрын

Great video. Though not always working for me. This method seems to give issues in combination with the 'variant' functionality. When creating different states like indicated in the video, and combining them in 'Variants' unwanted nested components are created. The result is that when changing the text / label of a copied component, these changes are not used in other variants like hovers. @kevin, am I doing something wrong you have a solution for?

@fer.barrios 2 жыл бұрын

I've been watching A LOT of your videos, amazing content. Kinda surprised I didn't saw any CSS Course from you, that would be a no-brainer purchase lol thanks again for sharing!

@chesmariefrance 2 жыл бұрын

Learned a lot from this. Thank you!

@andikaputrapratama6123 3 жыл бұрын

Thank you for making this video, Kevin. The content is very insightful. I am able to understand the content, even though I just started using Figma few months.

@heeralakhaury86 2 жыл бұрын

Hi Kevin, I would be interested in learning about how to make an entire design system. Do let me know whenever you put up a video on the same. Thanks

@pratikrajsah 2 жыл бұрын

Not only I learnt components but I also learnt about some basics of programming, thanks a tonn

@sisquebdimples4957 2 жыл бұрын

I also have learnt so much. However, i dont know what I could be doing wrong. on the wireframe part, any time I want to enlarge the buttons the text does not remain at the centre. kindly help if you cn. thanks. I started designing 2 weeks ago.

@pratikrajsah 2 жыл бұрын

@@sisquebdimples4957 that's really awesome, BTW I'm creating a community for designers. Are you interested to join?

@sisquebdimples4957 2 жыл бұрын

@@pratikrajsah Thanks for replying. Yes I am interested.

@dariuschmieliauskas 3 жыл бұрын

Really nice work, great pace and interesting to listen. Really enjoyed.

@srikanthgubba 2 жыл бұрын

I am new to Figma but the really way of explanation is very good.. thank a lot Kevin..

@AhmedMubarak255 4 жыл бұрын

Thank you for this amazing tutorial Kevin. I would like to request for fully Figma design system in the upcoming tutorials

@marie91999 3 жыл бұрын

Well explained, easy to follow. Thank you for introducing auto layout - game changer.

@ChrisPurser Жыл бұрын

Just fantastic. Every time...

@leosherman2363 3 жыл бұрын

Wow. I had to make some wireframes and just decided to give Figma a try. Thank you for this.

@gxramirez Жыл бұрын

i haven't seen this video yet... but i REALLY hope it finally makes sense to me after watching it. the problem with some tuts is they go too fast and don't show how to set up built components in an actual interactive prototype step by step. here's hoping this one is different!

@insaneviruss 4 жыл бұрын

Loving the series Kevin! Thanks a lot.

@urssoz 2 жыл бұрын

23:30 Nesting auto-layout components can get really powerful. In this example, I would create a "Placeholder + Error message" inside a "mini" auto-layout and later create a bigger auto-layout with this "mini" and the Label text. It's not always the best option, but it's a flexible way to create complex components and has a deeper control of the spacing.

@urssoz 2 жыл бұрын

I meant that instead of grouping, it has the same effect as grouping but with greater control.

@mjscpr 3 жыл бұрын

That was very helpful, well explained and well structured. Thanks!

@erichepperlewp 2 жыл бұрын

Excellent tutorial Kevin... can't wait to try making my own components

@hopeofglory8108 3 жыл бұрын

This was amazing. So excited to use components and auto layout properly now.

@jairusnouvel4780 2 жыл бұрын

This was game changing

@michaelnsc 4 жыл бұрын

I'm your fan! This is the best video i've watched this year

@ordago3100 2 жыл бұрын

Hello Kevin, Great video! As of today, the Auto Layout panels looks different (there are more options). In addition, when you bring the button into the form, you are able to realign it by just moving it... this looks different now. Thank you for your content!!!!

@benjaminjaytully Жыл бұрын

I'm following this tutorial and unsure how to center my button -- any tips?

@rebeccagischel4583 3 жыл бұрын

Many thanks for your time, great video!

@msmaar2686 Жыл бұрын

Youre a great tutor Kevin! Very helpful content! Could you please do a video on organizing your layers and docs within Figma when designing? Would be super helpful :) Lots of love and keep em' coming :)

@borisnefyod4868 3 жыл бұрын

4:15: Deliverance 🙌

@HectorPohle Жыл бұрын

Great video!!!👍

@bassam.2023 3 жыл бұрын

What can I do with my creations on figma? Is it just a sketch pad or can I import what is created into html or css? Thanks.

@shamnadshah1622 2 жыл бұрын

Absolutely great content. I love this.

@christinegrace4439 2 жыл бұрын

I wish you did a preview presentation for the following tutorial.

@evvunja 3 жыл бұрын

Thank you!

@TheMrBrendo 3 жыл бұрын

Great Content!

@rukminikotamraju 2 жыл бұрын

Thank you so much.

@ginamdful 3 жыл бұрын

Excellent video! Love it.

@nicholasgood470 2 жыл бұрын

Little fast but i like seeing a quick overview - thanks

@ed1nh0 4 жыл бұрын

Dude this Figma is a real game change! There's so much power yet hidden in it.

@sbkhan303 2 жыл бұрын

Excellent video...

@pjonesg 3 жыл бұрын

That last section went super fast! For somebody new to it, it wasn't the best taught.

@platinumdynamite 3 жыл бұрын

Unbelievably helpful.

@germansmashers 2 жыл бұрын

Thank you!!!!

@jackiemasek8302 3 жыл бұрын

That’s so cool! I’m just learning Figma.

@CharlesSmall 4 жыл бұрын

You are great .Thank you Kevin

@dorabenarbia6027 2 жыл бұрын

thank you so much

@boopfer387 3 жыл бұрын

awesome stuff thank you Kevin!

@seanpaulson9098 2 жыл бұрын

I cannot move individual objects in a component when auto align is turned on with the align tools. (they don't even show up). example at 33:20 when he moves the button. none of those align options at the top right appear for me.

@Sam-vz7pf 2 жыл бұрын

Hey Kevin, Hope you are doing great just wanting to ask you about what the size of art-board for website designing and the size's of buttons and other sort of things. It would be a great help if you can help me about with it. I am always confused with sizes unable to grow out of it. Thanks your generous student.

@kataszanka 3 жыл бұрын

What a great tutorial. Thank you! :)

@michaelgurevitch8275 3 жыл бұрын

hey would really love a a video explaining how to build your libraries and your colors library .. that would be amazing ! thanks a lot.. love all your other videos.

@WooWorlder 3 жыл бұрын

Hi Kevin, I'm new to Figma. After watched your video. I'm practicing it myself, and I notice that there is no smart shadow? How do I set it up?

@vindhyum 3 жыл бұрын

loved it!! thank you so much!

@user-dz9vk4yr1v 2 жыл бұрын

Thanks. May I ask you about background light on your video and camera you use?

@samirbelhadi3352 3 жыл бұрын

best ever! thank you a lot Kevin.

@nagyordog 2 жыл бұрын

I don't know if anybody already answered. Within the component, you would have to duplicate and than group the larger and smaller text fields.

@BeingDane 2 жыл бұрын

button hover effect and the animations . Kindly do a video

@TravelBro 2 жыл бұрын

But when selecting both rectangle and label together ..then applying auto layout the label is falling down

@TerekkiTerekki 3 жыл бұрын

excellent tutorial TY - subbed

@rahulkale0918 3 жыл бұрын

Really good! Thank you

@thavsev 3 жыл бұрын

Awesome video! It was very helpful! :) I have a question about components with icons in them. Let's say you have a Services page and you want the types of services to look a like but with different icons/text. I have to create a frame with all the titless, and info and all the icons I want to use, stacked there? And when I convert it to a component just hide/show the ones i need in every instance?

@travezripley 4 жыл бұрын

Thank you Kevin!

@statusbydesign 2 жыл бұрын

When I first create the Auto layout, I don't get any padding/sizing options like in your video? Only spacing options

@kaisinzinger5521 4 жыл бұрын

Thanks!!!! great work 👍

@yesmine1985 3 жыл бұрын

Thank you so much for this it was so useful :)

@EEQUALIZER 3 жыл бұрын

Great content, as usual. I can't express my thankfulness

@KevinPowell 3 жыл бұрын

Awesome, glad that you're enjoying my content.

@neethukp3885 3 жыл бұрын

One of the best helpful video. I have a doubt regarding figma, that How can I use the website to other system or how other people can use the design? Please help me that

@MegaSketchbook Жыл бұрын

I enjoyed the tutorial. I'm still trying to figure out what I did wrong but when I paste the component to my wireframe page all the previous button settings do not copy over. I have to create a new button each time. Womp womp womp...