Beginners Guide to Figma | Basics of Components & Variants From Scratch
HTML-код
- Опубликовано: 11 июл 2024
- 🍿 Watch rest of the Figma Course - • Basics of Figma Series...
Episode 4 of Foundations of Figma is a detailed guide on how to practically use Components & Variants along with all the tips and tricks you'll need to use Figma like a professional.
Figma File for Download: www.figma.com/community/file/...
Foundations of Figma is the most practical and actionable Figma course you'll find on the internet with proper homework and resources at the end of every video.
🌏 Keep up with Design and AI:
🔗 / anshmehra.in
🔗 www.anshmehra.com/
🔗 / ansh
🚀 Complete Roadmap to a UX Design Career:
→ learnuiux.in/
🏆 Learn about Prompting and AI Tools:
→ www.howtoprompt.in/
Resources mentioned in the video👇🏽
🔗 Figma Community Files - www.figma.com/@anshmehra
👉🏻 UX Inspiration
pageflows.com/
mobbin.com/browse/ios/apps
designvault.io/
uxarchive.com/
uxui.monster/
screenlane.com/?ref=uimovement
👉🏻 Learning
www.checklist.design/
learnmobile.design/
www.microcopy.me/
developer.apple.com/design/hu...
uilearn.com/blog/
uxdesign.cc/47-key-lessons-fo...
👉🏻 Marketing Inspiration
www.saasframe.io/categories/d...
www.darkmodedesign.com/
www.webdesign-inspiration.com/
saaslandingpage.com/
www.landingfolio.com/
marketingexamples.com/
godly.website/
effortlessly.io/
www.showreelz.com/
www.niceverynice.com/components
land-book.com/
onepagelove.com/
👉🏻 Figma Resources
figmalion.com/
uxdesign.cc/the-ultimate-figm...
www.figma.com/best-practices/...
awesomefigtips.com/
shortcuts.design/
/ status. .
figmacomponents.com/anshmehra
👉🏻 Reading Material about UX
/ stat. .
builtformars.com/
history.user-interface.io/
www.loversmagazine.com/
vanschneider.com/blog/how-to-...
uxmasterclass.design/
start.uxdesign.cc/
👉🏻 Design System Resources
designstrategy.guide/design-m...
www.designsystems.com/
designsystemsrepo.com/design-...
component.gallery/design-syst...
heydesign.systems/
👉🏻 Research Tools
www.whocanuse.com/?bg=993357&...
answersocrates.com/q/en/US/ux
👉🏻 AI Tools + ChatGPT Playlist (Must for upskilling in 2023):
• ChatGPT Full Tutorials...
👉🏻 ChatGPT Explained - The Ultimate Guide For Beginners 2023:
• What is ChatGPT? Step ...
👉🏻 Midjourney AI - Complete 2023 Guide for Beginners:
• Video
👉🏻 Free Hindi UX/UI Design Course (for Designers):
• Learn UX at ₹0 in Hindi
👉🏻 Free English UX/UI Design Course (for Designers):
• Complete English Guide...
👉🏻 UI Redesign Playlist for practical hands-on learning
• Improving mobile app's...
👉🏻Writing UX Design Case Study: Step-by-Step Process (for Designers):
• Writing UX Design Case...
Timestamps
0:00 - Intro
1:58 - Video Overview
2:32 - What are Components?
27:35 - What are Instances?
43:45 - What are Variants?
1:03:15 - Homework
1:06:03 - Important Closing Note
Do comment your reviews here or on Twitter (@AnshMehraaa) or share a story on Instagram (@anshmehra.in) 
Развлечения
🍿Binge Full Playlist - ruclips.net/p/PLlHtucAD9KT3wgeeVqILeW-0rYoQgR1Rh&si=4yajSMq_CPIfbBzE
Figma File for Download: www.figma.com/community/file/1299183196281300759/anshs-free-figma-course-ep-4
🚀Complete UX Design Course (9 Weeks, 100% Free):
→ learnuiux.in/
🏆Learn about Prompting and AI Tools:
→ www.howtoprompt.in/
@AnshMehraa How to Choose a colours for Design and how to apply 60 30 10 rules.
Really really helpful, I finally understood varients.
I also have something to share for other fellow learners.
A framework to actually learn from these videos
1. Watch each module one by one and make hand written notes (Take your complete time to aborb the information) (I took 1week XD)
2. Then watch it again while having your figma software open in left side to actually hands-on practice for whatever has been taught in the video
3. Finally make your Notion notes - with the help of your own hand notes and help.figma documentation
4. Apply your knowledge into actual work: THE HOMEWORK
5. Then ofcourse, Start applying in your own work and projects.
It's quite rare to find stuff like this for free! This playlist deserves more views 🙌🙌
It is insane how much information and good quality you provide in these videos. There are Figma masterclasses out there charging so much for these types of videos and they don't provide the specific details like you do.
Hi Ansh,
I just had to take a moment and share my appreciation for the incredible depth of information and the consistently high quality of your videos.It's truly mind-blowing how much value you bring to your audience/students! Your content has been a total game-changer for me, and I'm so grateful for the insights and knowledge you generously share. Keep up the fantastic work! By the way, I'm also part of your Instagram broadcast-always looking forward to more great content there too!
early waiting for your next video.
It's never once happened that I've watched your videos and felt like I didn't learn anything new. Your content is incredibly valuable, surpassing even the quality of paid courses out there. I hope you continue creating this series. :)
your lecture also describes how soft your nature is ! thnkyou so much Ansh.
Hi its me again. Thanks for the heads up! You're absolutely right, I should rewatch episodes 2 and 3 of your Figma course at least twice to solidify the concepts. I'll definitely make that part of my homework, along with revisiting the other playlists you recommended.
Your videos and explanations are fantastic - thanks again for putting them together! I'll get started on the rewatch and dive into the other playlists as soon as I'm done. Will comment again soon hahaha
The part about using variants for different button states was really helpful. Thanks for breaking it down step-by-step!
I am so glad that I came across your channel and got amazing insights regarding UX design. The effort you have put into this entire series is commendable. Thank you so much for the valuable content and making it accessible for free.
It feels like I am watching a friend and also learning cool things about Figma. Really appreciate what you are in the world of design. Thanks Ansh!
Hey Ansh! That was a very detailed video which has solved a lot of complications for me in terms of understanding about how components and instances work exactly. Also I am a fresher in this feild so i watch these videos so many times before start making notes of it and I think this is a part of growth to take baby steps to understand the new concepts. I really thank you soo much for helping us out by making such in-depth videos. You truly are an excellent teacher.
I have been learning Figma and UI from your channel and the resources you're providing. Thanks for posting such detailed and helpful content. One important key takeaway from this: I will connect with other designers and right kind of people while regularly posting about my learning. Thank you Ansh for such amazing content.
really loved it, worth watching. VERY INSIGHTFUL
Amazing content Ansh. Thank you so much!
Hey Ansh! I know that i am too slow in making progress in Figma but I just wanted to say thanks for all your efforts. I have been a social media manager for 5 years but I kept looking for a field where I feel happy working. I watched your first video back in 2021 but due to my laziness and some fears, I couldn't properly get into my dream job. Now, I am trying my best to learn Figma, Ui/Ux design and your videos are a great help. Wish me Luck!!! :)
Thanks a lot for making this video....really helpful !
I'm using this timeline for self - reference. Happy learning, y'all! 😊
02:30 - MODULE 1: WHAT ARE COMPONENTS - & COMPONENT PROPERTIES
02:39 - Why do we use components?
10:36 - Creating a Component
15:47 - Deleting a Component
16:44 - Component Properties
19:38 - Instance Swap
21:15 - Visibility, Boolean Properties
22:34 - Text Properties
RECAPS:
24:00 - Boolean Property
25:00 - Instance Swap Property
26:45 - Text Property
27:33 - MODULE 2: WHAT ARE INSTANCES - & ASSET LIBRARIES
27:38 - Nested instances
29:36 - Simplified Instances
30:17 - Assets Panel
31:30 - Naming your Components
33:45 - Overrides in an instance
35:40 - What’s allowed in overrides?
40:30 - Updating changes on instances in other files
43:45 - MODULE 3: WHAT ARE VARIANTS - & VARIANT PROPERTIES
43:52 - Creating and using Variants
54:05 - Slash to Variants
56:23 - Organizing your Variants
57:44 - Inspiration for UI & Web Design
58:18 - Resources to Learn Figma
59:18 - Resources for Design Systems
59:27 - Resources for Component & UI Design
01:03:18 - Homework for next 5 Days
01:05:54 - Final tips
This is so detailed! Thanks!
@@AnshMehraa Thank you so much for your golden contents, Ansh. Can't wait to finish this series!
Loved this tutorial. Very detailed and clear explanation !
Hi ansh, thanks a lot for putting out such a great content, it's been 2 weeks I been learning UI/UX from you and other resources. I was little confused when I was about to start but now it's getting clear as I learn, thanks a lot again
Hi Ansh, thanks for creating such valuable content. I've been using Figma for the last 6 months and this playlist is there to update my Figma skills more.
I find your in-depth educational videos very helpful. Being a design student I'm really happy to find your channel since it gives a lot of value. Your videos are to the point and very well explained! Thank you so much! 😊
This video is just soo indepth and useful ....just amazing
Simply superb, really the fluency and clarity that you offer is exceptional, especially the last part where u said that may not be the best but the most visible- sounds so humble, in reality u are amongst the best for sure
really loved it, worth watching. VERY INSIGHTFUL 💡
Eagerly waiting for the upcoming videos of this series. Great job Ansh!
I have been following you since you had around 19k subscriber, your videos are always very much helpful. Truly appreciate your work and just wanna thank you for always giving us such helpful videos.
thanks for the tutorial! really helpful
Totally love it! more power to you man..
I have watched this video around 3 times now ,each time the concepts get more clear to me however I Initially skipped the last part and focused on the core concepts as i already knew that i would be watching it a few more times .I just can't thank you enough. Dude the last 5 minutes were actually amazing I could see that you were tired still providing us with such valuable content . I actually consider you as a teacher and a mentor, for whom I have immense respect. THANK YOU SO SO MUCH
Thank you for noticing!!
Can't understand why so less views on this! But this is epic as it can get! 🔥
Maybe its the festive season, people wanna enjoy than skill up!
You keep going Ansh! Really looking forward to this course!
This video was absolutely amazing and incredibly in-depth! I was thoroughly captivated from start to finish. The level of detail and insight provided here is truly impressive. Kudos to you anshr for such a fantastic piece of content! 🙌
This video really helped me to understand everything about components and variants.
thank you for this gem, Ansh!! Lecture 4 completed and I've taken detailed notes in Notion for future reference!
Hi Ansh,
I am watching this video for the 3rd time and i must say it is the best video on the internet on variants/component properties. You cover each and every detail in depth. I hope to see more videos with such content which can make our life easy.😊
Yes this channel is also one of the goldmine for UI/UX designer
Great video and on point learning.
Thank you for the efforts you put into all this videos. keep going
Grateful for your outstanding contributions.
Your insightful content shines bright, guiding us through the digital maze. Thank you for sharing knowledge that ignites our minds and lights our way.
Hi Ansh! Great content. This has been the first helpful resource that has leveled up my understanding of UX. I wasnt able to find a guide as to where I was going wrong before this. And your content has truly helped me pick up from the right spot to enhance my work and make it organised and of industry level. Thanks! Looking forward to the rest of this course
Thank you Kashish!
I’m glad this is helping you spot the gaps.
However, when it comes to learning practical UX, I’ve put every single important video I’ve ever made on www.LearnUIUX.in. That’s the place where you should actually begin.
It has a 9 week long syllabus and trust me, you’d not need any other foundation video once you finish these 9 week modules.
@@AnshMehraa I have been through the website and have viewed your entire playlist up till now. By the time I was watching this one, I realized how generous your effort is to education people on this! Also, bookmarked Learn UIUX and eagerly waiting to learn and implement from the rest of the series!
Thank you for existing and making this course accessible to all of us 🎉 I am realising its value day by day!!! ☺️
Thank you so much Ansh. Actually I am following your channel from many months. Now I get order from fiverr. And I get order from socila media. I started ux from your channel. Start learning ux from your youtube playlist hindi ux 0. I everything docoment in course . Literally I can't beliver I find such awesome filed that is related my passion. Thank you so much. One thing I want share that If any person have student account can get figma pro free I also student and using figma pro free without any pay.
Love your way of teaching😀
Omg.. i actually learning so much things from this series
It was an amazing video similar to the previous 3. Thank You for sharing such valuable knowledge Ansh!
Thanks! Ansh. These videos are really really helpful.Great content.👍
This is one & only best Video i watched on Componunts. Thanks ansu & hats of to you 🙋
Thank you so much for another detailed Lecture Ansh I am so grateful for all the insights and tips I am gaining from you, I would also like you to know that I have added to my life goal list to meet and work with you someday. All love from the UK.
so glad to read this!
This is really helpful, thank you so much for your efforts and keeping this out! 🙏 pleaes keep posting, I'm learning a lot thru your videos :)
absolutely brilliant.. thanks ansh for this gamechanger video. i finally came to know how the concept of components and variants actually work... will surely do the homework and revise each steps you have mentioned here
Awesome Nikitha!!
Amazing content. Please don't stop making these awesome tutorials.
ansh keep it up!!!! we are learning!! don't stop!!!
Halfway through and it’s already so freaking helpful😍 I wish this video was there a couple of months ago. All the topics are covered in so depth and so simply explained man. U literally are design god. Thank you for this video❤️😌
so happy to read this!
I don't why people is not watching him
This type of content I swear don't get it on whole internet. And this help we a lot. Thnak u for providing it free on youtube .
thanks Ansh! The video was really insightful
Your videos are always so full of positivity and great content. Everything is to the point with so many amazing resources. I am a budding UX designer and you are one of the firsts that I came across on youtube and since then have been consuming your content consistently. This figma series is just so so good. Love watching it and learning. 🙌❤
Thank you so much for such a wonderful comment
Love this course. Keep up the good work.
This is great content that you've been putting out. Especially appreciate how vocal you are about how the process of learning will take time and how it might take 2-3 watches to understand whats going on in this lecture itself too. Its a great great resource that you are building . Would be nice if we could get like a series on say developing some screens or software or system using these tools to understand the practical implementation
Thank you! Yes, it does take 5-6 months minimum just for Figma.
When it comes to learning practical UX, I’ve put every single important video I’ve ever made on www.LearnUIUX.in. That’s the place where you should actually begin.
It has a 9 week long syllabus and trust me, you’d not need any other foundation video once you finish these 9 week modules.
Kskekeioeowwm
Omg i totally did not expect to receive a reply?#?#? Would totally check out the website, thanks for the kind work you're doing!
@@chini613 haha why not
This video is very helpful specially property and resources are very useful and you are doing very great work . thank you for helping me in my career building .
the most valuable and informative content. THANKYOU for creating these.
Thank you Ravikanth!
wow!! every new video on figma by you blows up my mind and gets me build more of my interest and knowledge on the tool. I appreciate and thankyou for your efforts to provide this mentorship for free.
I’m so glad you are recognising the effort
The entire session was too good. I patiently took 2 days to go through it part by part and try out the design ideas. I have browsed the resources and will study in depth. The real skill is how will u leverage Figma prototyping skills to save time of UX designer which can be used for thinking better UX.
Godl Videoo Thank youu sooo muchhh ansh
Thank sir for making this kind of videos ,this so use full content for beginners.
Every single lectures take almost 5 hour to complete 💯💯💯
Dear Ansh,
I actively follow your RUclips channel, read your articles on Medium, and thoroughly enjoy listening to your podcasts. Your hard work, insightful explanations, and the quality of your podcasts are truly commendable.
I have a request, if possible. Could you create an in-depth tutorial on how to effectively utilize Medium for blogging, including case studies, and also a tutorial on leveraging LinkedIn for personal branding? Your guidance would immensely help individuals in showcasing their work, making valuable connections, and sharing their thoughts wisely.
Your previous videos, like the one on Notion's features and the depth you provided on writing case studies in 2023, were incredibly beneficial. A similar approach for Medium and LinkedIn tutorials would be greatly appreciated.
Moreover, I believe there are numerous other online platforms related to marketing, branding, sales, and content creation where your expertise would be invaluable.
I'm excited about the possibility of learning something new from you. Looking forward to your response.
Best regards,
Anshuman
1:10:37 Mint. Video Superb Ansh. I can Feel how much hard work and efforts you done for this video. Superb . First Detailed video on youtube 💌
Thank you for making these videos
Thank you soo much Ansh bhaiya
Just Now saw your message on Instagram Channel, while I was planning to sleep & rushed here to watch the whole episode just to make my CareerLearning 10X better with just your single Video. You are a Champ. Never stop this Man! We Need You :)
are you a beginner bro? I am also learning ux designer. can we team up?
There are so many small properties which we can use to save our time, now I totally get it why Ansh say in every video of ux and ui that it will take 6-8 months just to learn fundamentals 😅
Sukriya Ansh Bhaiya, for giving us your valuable time and for inspiring us.😊
I'm only halfway through and its already incredibly helpful and insightful.
It was soooooo interesting, soooooooo knowledgeable. It was just like a Wow!
Heyyy anshhh...your videos are very very helpful... Please upload next video
It was very very very very very very very very very very very very very very very helpful.
This video clears so many doubts, Thank you
so happy!
Thank you ansh for creating this...❤
Thank you for supporting Vanshika!
i understood thank you so much your 🙃🙂
Thank you Ansh!
Amazing video
One of the best channel for learning ❤👍
Loved it !
Hey Ansh,
I Really appreciate your videos they have helped me and many many people skill up
Thanks ⭐
Hi sir 🎉
I really liked the video
But i bit not understand property of the components but i will try to learn from the resources you shared . 😊
I will start applying the videos you recommend .
Thank you
Forever grateful ansh Bhai!!!
The content you are providing for free is pure gold ANSH...thank you...
🥺🥺 thank you for appreciating
Keep up the good work Ansh :)
Great video. Thanks for sharing. What tool do you use in recording your videos, showing the key pressed and also the mouse highlight?
Very Very Useful Content Mash Allah Love for Pakistan Ansh Mehra Bhai
you motivate me everyday Thankyou so much for making such a good content :)
cool video thank's
Hi Ansh Bhaiya, Been following the whole series since the last few videos adn honestly the design journey has changed a lot for me.. understanding all the minutes of FIGMA through your teaching style has helped elevate my learning experience and I am trying my level best to work through all the exercises. Thank you for creating this and the other videos. Lot of love and support!!
thanks 😇
@ansh you are really amazing person i ever seen :)
thanks for this video
Love You Brother 💖💖
This one was really helpful in understanding how the components and properties work in FIGMA. Thanks you Ansh Bhaiya!
Hello Ansh, First of all thank you so much for this playlist. I knew nothing about figma, and I started watching this playlist following your every instructions and teachings.
I have learnt so much so far, but I am having issues while watching this particular episode. I know you have told several times that icon library cannot be published in free version. Unfortunately I am in no position in buying Figma Premium. I gotta work with free version for now. Can you please give me a suggestion how do I add an icon library in my local asset? Is there any time saving shortcut, or do I have to create every icon individually? Please let me know if possible.
Ansh you keep surpassing yourself with the quality and effort of this playlist. I remember at the beginning of the first video you had said that this playlist would be in-depth and not superficial , and you have kept your word.
I was unclear with variants and variables, and now with Lec 4 and 5 video and practice,
I have gotten better. Thank you so much :)