Figma Components: From Zero to Hero | FREE COURSE
Vložit
- čas přidán 11. 07. 2024
- ► Download Figma UX & UI kits from Envato Elements: elements.envato.com/graphic-t...
Components in UI design are regular elements, like buttons or forms, and they can be reused multiple times throughout the design process. Working with Figma components means you don’t need to recreate an element each time you need one; you can reuse components from the library. Any changes you make to the main component are then passed down to all the instances within your design.
In this Figma components tutorial, you‘ll learn everything you need to know about using components in Figma.
00:00:00 Introduction
00:04:29 Creating one or more components
00:10:38 Main components vs. instances
00:17:51 Making changes to components and instances
00:28:06 Swapping component instances
00:34:39 Naming and organizing components
00:47:00 Using component variants
01:00:26 Working with component properties
01:13:31 Prototyping with interactive components
Resources:
• Source files: github.com/tutsplus/Figma-Com...
• Figma: figma.com/
• Icons: iconset.io/set/ionicons, fontawesome.com/
• Cryptocurrency logos: cryptologos.cc/
► Read more on Envato Tuts+: webdesign.tutsplus.com/figma-...
► Download unlimited photos, fonts, and templates with Envato Elements: elements.envato.com/?...
Read more on How to Turbocharge Your Components With Figma Variants on Envato Tuts+: webdesign.tutsplus.com/tutori...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envato.com/?...
► Subscribe to Envato Tuts+ on CZcams: / tutsplus
► Follow Envato Tuts+ on Twitter: / tutsplus
► Follow Envato Tuts+ on Facebook: / tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
These type of courses are usually paid on the Internet, but Envato and Adi are providing us this type of content for free. Thank you so much
Glad you like them!
I always think that I know how to use something and then this genius of a human shows me more. I wish you could be my mentor.
Super helpful, thanks. I strongly recommend to anyone wanting to learn this to download the file and work along with the video.
I found these courses like a week ago and I want to thank you from bottom of my heart! You're a great explainer. Thanks!
I'd really love if you can make a video about variables.
You've got some incredible teaching skills! This is a fantastic compilation of all the essential technical points. Many thanks for sharing your expertise
The Best Tutorial Instruction and Video I've seen to date. I have looked and looked and half understand some people - but your voice, speed, and clean delivery really helped me understand a huge chunk of this program in a very short time. Thank you so much! Keep up the good work!
Excellent way of explanation. Thanks a lot for such an useful tutorial.
This is an excellent tutorial! Saw many others but prolly can't beat this one! 👍 👍
What an incredible instructor you are.
Just finished another great lesson! Thank you Envato Tuts+ & Adi Purdila
Such a great explanation on Figma component! Very helpful when you are working with a UI kit.
Glad it was helpful!
This is just a life saver. Thank you Adi. This lecture is just so awesome and can't thank you enough for sharing it free.
Such a great explanation on the Figma component!
I love the way you started from zero and also emphasis on the need for it
Glad you enjoyed it!
@@envatotuts 1
Thank you for providing us with so much useful information for free
Thank you for the tutorial! This was great! I appreciate your teaching style as it was so helpful in understanding the material. Great Eastern European accent! I'm part Russian myself and it's great to see positive instructors who help others from Eastern Europe.
I have been avoiding Components since I started usng Figma, mainly because create Brochue Websites but this is so handy, thanks for the Tut
Thank you for such an amazing tutorial, Adi. I learned a lot and can now implement these instructions into my designs. You have been really helpful.
We are glad it was helpful.
great course! simply put, very easy to understand! thanks guys!
This is the best and most comprehensive tutorial I've ever seen. I am grateful to you for each key point, shortcut, and the simple, clear, and organized way of teaching. Despite my moderate English proficiency, I grasped everything well. Thank you
This is an excellent tutorial! Thank you Envato Tuts+ & Adi. ❤
Thank you very much, Envato Tuts, this course has been super helpful for me. Much kudos for the great delivery by the instructor.
You're very welcome!
Your explanation was excellent; I comprehended everything thoroughly... ❤❤
Thank you 🎉
Adi, you are such an excellent trainer! You explain things so clearly and give such easy-to-follow examples - I really can't thank you enough!
The course was very good especially the narration,Content and Speed.
Best tutorial i've found. Thank you so muuuch
Very helpful video! Well explained, good structure and comfortable way of teaching.
Glad it was helpful!
Best video to understand Figma components. Thank u
thanks for this beautiful course I love this course
Thank you so much for an amazing tutorial, Adi)
Thank you for the best teaching
Great learning experience. Thanks a lot.
it is indeed Zero to Hero, it was insightful. Thank you for sharing
Thank you so much for this amazing tutorial, i learned a lot from you man , keep going 💜
Happy to hear that!
great video, thanks for making it free
Amazing video, I hope I can go further with Figma in the future
Thank you so much! This video was so much info and learned a lot.
Glad it was helpful!
Way you teach is very nice with explanation and slow rhythm...Please create more videos on figma...
This was fantastic, I highly recommend it😁
Great to hear!
Such a legend. Thank you!
he broke it all the way down, slowly and paced
🥰🥰🥰Good Explanations, the way you teacher us is awesome!!!
Thank you! 😃
Incredible class for beginners like me
it is a most easy and simple video to learn all about component I have come across. It is very helpful for beginner. thank you🤗
You are welcome!
Teşekkürler mükemmel bir anlatım ve ders🎉
thank you for the amazing tutorial
You're very welcome!
i love the way you explan things very clear and i wish i knew your yutube chanel since last year😊
Thanks and welcome
thank you so much, this video so very useful for me.
Glad it was helpful!
I enjoy this video your explanation is so good thanks a lot 🎉😊
Thanks for the video... A very detailed explanation
Glad it was helpful!
this is amazing information... I am learning a lot on how to use figma
Glad it was helpful!
Thank you Adi!
excellent teaching as always
Glad you think so!
Fantastic video! Thank you so much for this!!!
You are so welcome!
Amazing class, thanks!
You're very welcome!
thanks for this! learnt a lot
Glad it was helpful!
4:16
Be sure to Copy your Component Button, then select the "Open Portfolio" button(in the Portfolio frame), then Right-Click and select "Paste to Replace" from the drop down menu.
This part tripped me up when using the provided Figma file- the autolayout caused the pasted component to paste into the Portfolio frame left-justified, if you paste it normally.
Hey ADi, Great Job. Well explained in detail, step by step; so far, the best Figma tutor on CZcams. Our job as learners is to listen and look at the video very carefully; there are a lot of small details. Highly Recommended. must watch and practice simultaneously and multiple times
Fantastic explanations.
Glad you think so!
amazing tutorial👌
Thank you! Cheers!
You’re amazing
thank you so much for your awnsome videos!
Glad you like them!
Very useful course thanks
Glad it was helpful!
Perfect, thanks!
You're welcome!
tnx sir ...
i am from bangladesh and i like your video
You are most welcome
Thank you
Thanks ❤
Thanks 👍
Brilliant
Adi, we want a figma variable course 😊😊😊
Here you go! czcams.com/video/w_rYM0IINAw/video.html
wow!
I really learn from you. Zero to something
USED TO LOVE FIGMA , SINCE XD BOUGHT FIGMA , ITS GOING TO MAKE IT COMPICATED AND MESS LIKE XD ..
Very well explained. there is a lil confusion when you gatter the icons from any plugin, do you rename them initially as the first given name in layers before making them components or play around with them?
Waiting.....
I didn't know how to start learning components in figma, but finally I found it. Thanks for each single second. ❤
Thanks a lot. Can you please teach us how to make slides using figma or add logos? Please 🙏 it would be really helpful for university students like us
Quick Question:
If I make change to the "Text" in an Instance (for eg. a Button) that does not make any changes/cascade over to the "Text" on the Main Component, however if I make change to the "Text" on the Main Component, will it erase the change I initially made to "Text" on my Instance?
Thanks Adi and Envato for compiling this great course !!!
EDIT: THE VIDEO ANSWERED MY QUESTION - Thanks
I noticed that, in both the video (at 18:18) and on my own Figma app while following along, when the component (pink button with email address) is duplicated, the newly created instance has a different typeface. I tried changing the said component back to a frame with auto-layout and duplicating and in that case the typeface stayed the same. So what's up with that?
I'm able to remove elements in an instance without affecting the main component. But in this video it was told we cannot do the same. Did I miss something / am I doing something wrong?
EDIT - Like you mentioned in this video, its not getting deleted. Its getting hidden.
God bless you
Whats the use of export settings like 1 x and 2x etc? when are they useful ? thanks
PLEASE DO A COURSE ON NEW VARIENTS AND MAKING A DESIGN SYSTEM
Adi’s Figma Variables course, as you wish! czcams.com/video/w_rYM0IINAw/video.html 🪄
would you please give me the proper laptop specifications for design ?
please someone help me with the figma file for the tutorials so I can follow. i am unable to get them with the links provided.
sir why my alignment options shows as deactive mode in most of the cases?
how can I download the video for more practice
How to use that downloaded source file in figma i am not being able to import it to figma
very good video bro. Keep the good work going
Thanks, you too!
32:44 not working for me its goes near the icon not replace it
PLEACE ENVATO MAKE 3D MODELING COURCE
Oh iam too late 💔💔
Thank you