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! :)
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.
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?
Can we get an auto layout tutorial, please! Would be very appreciated! Thank you for these educational tutorials! Very helpful and super appreciated! Subscribed!
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!
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.
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
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!
What bugs the hell out of me is that Figma doesn't think of accessibility with their own editor. Inside Figma there's tons of really muted text and tons of text information that doesn't appear unless you do a hover action on some random section. It's basically guesswork. I think they are living inside this bubble philosophy where someone have decided to make the Figma UI muted and as a result it's just lacking common UX principles cause it's damn annoying and hard to use cause of it. Hiding text that is important to read to get hold of the application is down right stupid. And you have to dig really deep to get hold of text and color property information too. And when you get there the property infotext is really hard to read cause of low contrast. What were they thinking?
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.
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...
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!
This is very interesting and sophisticated but you have not really given here examples that justify the threading of the function of the component. For a web designer it's all a matter of illustrating the concept in the end and there's too much fuss that something is behind the scenes. That's my opinion anyway.
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.
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!
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!
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
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!
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?
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
Hello sir, I have a request to make, I watched your SVG tutorials series and it has helped me a great deal, but now their is Bootstrap5 alpha1 and bootstrap-icons1 alpha5 with very great SVG icons, I have been trying to figure out the best way to use the icons because I can't compile them with my CSS like FontAwesome, maybe you can make a tutorial on it or just advice the best way to integrate them, just want to make it awesome, thank you in advance.
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
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).
Hi Kelvin, I am so greatful for your videos. this is the second one am watching and I must say you are the best.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. thanks. I started designing 2 weeks ago.
Hi Kevin! thanks for the tutorials, they're really helpful! May I ask what the difference between "reset all overrides" vs "reset instance"? Actually I'm not sure why but on my version of Figma (the latest one, 2021) I don't see a "reset instance" button? Any help is greatly appreciated, thanks! :)
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.
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.
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!
It's changed but you can still make it do what is shown here, by clicking 'alignment & padding" (last option on Auto Layout window) and moving your content to the center.
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 :)
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
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.
Thank you so much Kevin !! Coming from Sketch i was really reluctant to relearn all the symbols stuff but your video made it fun so thanks to you i am back in the game ^^ There is just one thing not working for me when I practice your video it is when you add the button in the form at 33:13 . I can see the dotted line so i know the button is included in my autolayout but unfortunately the button doesn't want to be under the text area, it stays roughly at the height under the normal input. Why do you think that is ?
Hello Kevin, After doing the frame at the beginning with text + rec, I tried to resize with cursor... and trying everything it stays with the same size, even if the numbers do move on the panel! On the other side using the handles I can resize it well. What are I'm doing wrong??? Thanks ;)
@@KevinPowell Thanks. Yes for the shortcut v and K I did get it. here what I have is the panel on the right side, on auto layout. With the mouse mouving the numbers of scale change, but not the rectangle and text I transformed to autolayout with shift +a.... I don't see why this doesn't work. Thank you for answering :D
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! :)
Yes, please go over how to create a proper design system!
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 :)
I third this
Yes Yes Yes to a design system creation tutorial!
Another Vote
@@KevinPowell Yes Please a design system tutorial will be great.
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! :)
So nice of you!
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.
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?
I learnt a lot from your tutorial, made components but still having issues with auto-layout. Thank you Kevin !!
Can we get an auto layout tutorial, please! Would be very appreciated! Thank you for these educational tutorials! Very helpful and super appreciated! Subscribed!
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
You are so good, thank you! I'm showing my students this video as it is truly the best one for components! Thank you!
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!
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.
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
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.
Thank you for these wonderful wonderful series!
i was waiting for next figma course. thanks a lot for this video
More to come!
@@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.
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?
I was waiting for your video sir...gonna watch it , and I'm sure it's gonna be amazing as always..❤
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!
wow first time seeing you in Figma panel rather tha SCRIMBA , I AM SCRIMBA STUDENT OF YOU
I find creating states in Figma to be a lot more fiddly and time consuming that Adobe XD. Excellent video. I learned a lot.
What bugs the hell out of me is that Figma doesn't think of accessibility with their own editor. Inside Figma there's tons of really muted text and tons of text information that doesn't appear unless you do a hover action on some random section. It's basically guesswork. I think they are living inside this bubble philosophy where someone have decided to make the Figma UI muted and as a result it's just lacking common UX principles cause it's damn annoying and hard to use cause of it. Hiding text that is important to read to get hold of the application is down right stupid. And you have to dig really deep to get hold of text and color property information too. And when you get there the property infotext is really hard to read cause of low contrast. What were they thinking?
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.
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.
I got confused at the 27th minute. I followed the naming of the layers but somehow there are too many of them! I really don't know what I clicked 😵💫
Only 5 months, and this tutorial kinda became irrelevant because of the new Variants system and the new auto layout 😭. Nice video tho 👍🏻
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...
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!
This is very interesting and sophisticated but you have not really given here examples that justify the threading of the function of the component. For a web designer it's all a matter of illustrating the concept in the end and there's too much fuss that something is behind the scenes. That's my opinion anyway.
Man, you Rock! 5-star explanation. With gratitude from Russia.
When I first create the Auto layout, I don't get any padding/sizing options like in your video? Only spacing options
This is the best video about Figma I've ever seen. I learned about a lot of feature I've never heard of before 👍
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.
Thank you for this amazing tutorial Kevin. I would like to request for fully Figma design system in the upcoming tutorials
But when selecting both rectangle and label together ..then applying auto layout the label is falling down
Thanks. May I ask you about background light on your video and camera you use?
Isn't it over doing when we prototype every single case ? error cases in the form for instance, animations...
I'm your fan! This is the best video i've watched this year
The auto layout interface has changed now.
Lmao, had the same problem, figma really amped up for their update,
nah, adds a "mad scientist" kinda vibe (re hair)
haha, thanks
Please stop. I was sent to learn about designers! NOT join them!
yeah but you cannot prototype with those instances. self click changing. and other action with in that.
if at any time you need to detach an instance, you have a problem that you should solve in your components library instead
I am using variance for the awkward problem you have faced
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!
I wish you did a preview presentation for the following tutorial.
Excellent video. Thanks so much.
Little fast but i like seeing a quick overview - thanks
Learned a lot from this. Thank you!
button hover effect and the animations . Kindly do a video
its all wastet time . go back to first princaples..
is it a good practice to use pre - built component in figma?
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!
I am unable to change the text area to horizontal..
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
Figma NEEDS to look at what Adobe XD is doing and copy / paste component states and really everything.
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!
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?
How to deuplicate selection in figma
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
You can remap you CAP LOCK key to CTRL, very easy in Mac; in W10 with PowerToys
Hello sir, I have a request to make, I watched your SVG tutorials series and it has helped me a great deal, but now their is Bootstrap5 alpha1 and bootstrap-icons1 alpha5 with very great SVG icons, I have been trying to figure out the best way to use the icons because I can't compile them with my CSS like FontAwesome, maybe you can make a tutorial on it or just advice the best way to integrate them, just want to make it awesome, thank you in advance.
Thank you very much!!! I struggle with auto layout a lot as a beginner. Trying to make tinder scrolls and the scrolling puzzles me!
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
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).
Hi Kelvin, I am so greatful for your videos. this is the second one am watching and I must say you are the best.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. thanks. I started designing 2 weeks ago.
Loving the series Kevin! Thanks a lot.
Hi Kevin! thanks for the tutorials, they're really helpful! May I ask what the difference between "reset all overrides" vs "reset instance"? Actually I'm not sure why but on my version of Figma (the latest one, 2021) I don't see a "reset instance" button? Any help is greatly appreciated, thanks! :)
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.
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.
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!
My Auto layout doesnt look like that, different controls, was there an update to the UI of Figma since this video was made?
It's changed but you can still make it do what is shown here, by clicking 'alignment & padding" (last option on Auto Layout window) and moving your content to the center.
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 :)
Thank you Kevin. Your video demonstrates how to start with components in Figma the fastest way. I really enjoy your channel a lot.
what does auto layout do does it group items
Just fantastic. Every time...
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
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!
I am new to Figma but the really way of explanation is very good.. thank a lot Kevin..
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.
This tutorial was really helpful to understand Figma key features. Thanks a lot!
Yes We Want to know how many things are the part of Style Guide or Design System And How to Manage them
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
Excellent tutorial Kevin... can't wait to try making my own components
I am using Figma for almost 2 years but I didn't know how to use components. It was awesome, thank you!
Thank you so much Kevin !! Coming from Sketch i was really reluctant to relearn all the symbols stuff but your video made it fun so thanks to you i am back in the game ^^
There is just one thing not working for me when I practice your video it is when you add the button in the form at 33:13 . I can see the dotted line so i know the button is included in my autolayout but unfortunately the button doesn't want to be under the text area, it stays roughly at the height under the normal input.
Why do you think that is ?
That last section went super fast! For somebody new to it, it wasn't the best taught.
Wow. I had to make some wireframes and just decided to give Figma a try. Thank you for this.
I notice that Figma doesn't always honor my auto layout. Anyone see this?
I tried to add a drop shadow to the frame/auto layout with the form elements, but it added a drop shadow to the individual from elements
Hello Kevin,
After doing the frame at the beginning with text + rec, I tried to resize with cursor... and trying everything it stays with the same size, even if the numbers do move on the panel! On the other side using the handles I can resize it well.
What are I'm doing wrong???
Thanks ;)
To resize, hit K on the keyboard for the scale tool. Looks the same as the move tool, and has an awkward shortcut, but it works :)
@@KevinPowell Thanks. Yes for the shortcut v and K I did get it. here what I have is the panel on the right side, on auto layout. With the mouse mouving the numbers of scale change, but not the rectangle and text I transformed to autolayout with shift +a....
I don't see why this doesn't work.
Thank you for answering :D
That’s so cool! I’m just learning Figma.
Really nice work, great pace and interesting to listen. Really enjoyed.
Thank you for the video. Can a Variant be moved to another Property?
Not sure if its already in the comments but you could use variants to improve the clutter
Well explained, easy to follow. Thank you for introducing auto layout - game changer.
I think that "master and slave" are definitely abolished?
Please do more tutorials!
That was very helpful, well explained and well structured. Thanks!
Many thanks for your time, great video!
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! :)
Kev you already had your hair cut a week ago on twitter.!! 😂
Haha, yeah! I think this is the last one I recorded before the haircut, lol
@@KevinPowell Anyways, You are always awesome; keep it up. ✌️