Figma Components: From Zero to Hero | FREE COURSE

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[hadiaslam]

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

[pitchblacknight]

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!

[roter]

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.

[andremossman]

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.

[Golrokh.Sajjadi]

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

[deliciouspizza]

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.

[joelcervantes]

Such a wonderful tutorial! Thank you! I absolutely love it, very very well done. Adi is amazing, no other tutorial has touched all the subjects in such way as his. Thank you again.

[albrightanozie]

Such a great explanation on the Figma component!
I love the way you started from zero and also emphasis on the need for it

[samhiggins]

Super helpful, thanks. I strongly recommend to anyone wanting to learn this to download the file and work along with the video.

[AditiYadav-wsct]

You've got some incredible teaching skills! This is a fantastic compilation of all the essential technical points. Many thanks for sharing your expertise

[AquentRon]

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!

[csudesh]

This is an excellent tutorial! Thank you Envato Tuts+ & Adi. ❤

[akandeaisha]

it is indeed Zero to Hero, it was insightful. Thank you for sharing

[khrystynavakula]

great course! simply put, very easy to understand! thanks guys!

[yugantsonawale]

The course was very good especially the narration, Content and Speed.

[gloriaglee]

This is an excellent tutorial! Saw many others but prolly can't beat this one! 👍 👍

[OrlandoDelgadilloLuna]

What an incredible instructor you are.

[nwachukwuekene]

Your explanation was excellent; I comprehended everything thoroughly... ❤❤
Thank you 🎉

[malihaparveen]

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.

[wazidali]

Way you teach is very nice with explanation and slow rhythm...Please create more videos on figma...