Free Figma Course | Basics of Frames and Autolayout

Free Figma Course | Basics of Frames and Autolayout | Ansh Mehra

Рет қаралды 99,273

Күн бұрын

🍿 Watch rest of the Figma Course - • Basics of Figma Series...
This is Episode 2 of Foundations of Figma where we will cover how to practically use Frames, Constraints and Autolayout along with all the tips and tricks you'll need to use Figma like a professional.
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/community/file/...
🔌 Article - Responsive grids and how to actually use them
uxdesign.cc/responsive-grids-...
🔌 Article - Space, grids, and layouts
www.designsystems.com/space-g...
🔌 Article - Everything you need to know as a UI designer about spacing & layout grids
/ everything-you-need-to...
🔌 Quick Responsive Workflows
• Quick responsive workf...
🔌 Figma Help Centre:
help.figma.com/hc/en-us
🔌 Responsive Plugin:
www.figma.com/community/plugi...
🔌 Sorter Plugin:
www.figma.com/community/plugi...
🔌 Find all shortcuts:
shortcuts.design/
🔌 Figma Web and App Design Type Styles & UI Typography Systems on Figma | UX Design System Tutorial:
• Figma Web and App Desi...
🔌 Step by Step Roadmap for how to become a UX Designer (Updated 2023)
• How To Become a UX Des...
🔌 is this the end of UX Design? Will AI take over soon?
• Future of UX Design & ...
🔌 How to use Notion - Beginners Tutorial (2023)
• How to use Notion - Be...
🔌 What is UX/UI Design? Learn Figma for free in Hindi/English
• What is UX/UI Design? ...
Do comment your reviews here or on Twitter (@AnshMehraaa) or share a story on Instagram (@anshmehra.in)
Timestamps
0:00 - Intro
0:33 - Syllabus
1:25 - Video Overview
1:55 - Groups vs Frames
2:35 - Horizontal & Vertical Constraints
10:11 - Why Frames?
15:25 - Nested Constraints
20:26 Responsive & Adapted Design
28:45 - Basics of Autolayout
48:50 - Practical Implementation
55:22 - Resources to Learn Figma
57:51 - Homework
⚡️ Checkout Zuddl (Events hosting platform for Conferences and Marketers)
→ www.zuddl.com/

Пікірлер: 336

@AnshMehraa 8 ай бұрын

🍿Binge Full Playlist - kzfaq.info/sun/PLlHtucAD9KT3wgeeVqILeW-0rYoQgR1Rh&si=4yajSMq_CPIfbBzE 🔌 Figma Community Files: www.figma.com/community/file/1292854467563606602/anshs-free-figma-course-ep-2 🚀Complete UX Design Course (9 Weeks, 100% Free): → learnuiux.in/ 🏆Learn about Prompting and AI Tools: → www.howtoprompt.in/

@user-mg4gr5uz5h 29 күн бұрын

MODULE 1 02:00 Groups vs Frames 04:30 scale property in constraints 05:16 shortcut- to copy 10:12 why frames? 12:18 shortcut- bypass constraints 12:45 resources -IOS systems by Joey Banks 13:13 shortcut to detach instance from the parent component 15:15 nested constraints 17:22 using frames 18:40 frames vs autolayouts 20:13 responsive vs adaptive design 27:53 resource -articles to learn about responsive design and grids MODULE 2 28:45 basics of autolayouts 30:32 shortcut for autolayout 31:45 resource - Untitled UI 32:45 vertical vs horizontal autolayouts 33:21 fixed width vs hug content 38:12 horizantal and vertical padding 41:35 nested autolayouts 42:28 why keyboard dont have autolayouts 43:24 example of constraints and autolayouts 48:00 important takeaways MODULE 3 48:48 practicle implementation and plugin - responsify 50:51 resource: figma video for responsive design 51:40 what are sections? 53:15 medium blog- how to organize figma pages by ansh sir 53:38 shortcut to copy URL to share your designs 53:54 how to get into outline mode in figma? 54:36 using annotation cards 55:10 inspiration resources 55:23 learn figma on your own 55:56 Ansh sir courses and learnUIUX.in 57:42 UX case study videos by ansh sir 57:47 Homework 1:00:00 Outro

@farhan78930 8 ай бұрын

Using this timeline for self learning 00:05 Learn the practical aspects of frames and auto layout in Figma 02:16 Horizontal constraints define how a layer behaves inside a frame. 06:53 Scale in Figma maintains proportions of layers as you resize them. 09:12 Frames in Figma have constraints inside them, making them extremely powerful. 13:22 Auto layout is level two of frames 15:35 Setting constraints in Figma to make responsive designs 19:48 Understanding the concept of responsive design versus adaptive design 21:48 Adaptive design is necessary for real products to optimize space on different devices. 25:36 Understanding the difference between desktop and mobile web apps 27:33 Learn about variants, components, responsive UI, and adaptive UI 31:25 Autolayout in Figma allows for dynamic resizing and adjustment of elements within frames. 33:22 Understanding the behavior of wrap and fixed width in Auto Layout 37:31 Understanding Autolayout and Padding in Figma 39:23 Using option key and clicking the icon allows you to apply padding equally on all four sides. 43:11 Auto layout is used when elements will regularly change in width or height. 45:04 Nested framing and autolayout constraints are used to create a responsive layout. 48:30 Use the Responsify plugin to easily test designs on multiple devices. 50:16 Introduction to frames and autolayout 53:38 Learn how to bypass constraints and easily share design files. 55:14 Ansh Mehra provides a list of top rated inspiration websites and shortcuts for Figma. 58:41 The next lecture will cover Styles and libraries. 1:00:21 Feedback is needed for making the course top tier in Figma education 😃😃😃

@dv_one1 7 ай бұрын

THNKU BRO I

@neelarnav7954 2 ай бұрын

Thanks man.

@denispanarin Ай бұрын

Thanks a lot from Russia and Uzbekistan. You are the best.

@shaurya2608 8 ай бұрын

We would love to see all these concepts using on a project as it can help us to know about these tools more practically

@avantipathak1386 8 ай бұрын

I agree 100% let's see if he sees this post @ansh mehra

@bjkaur9185 6 ай бұрын

Yess

@mohanaganesh4900 5 ай бұрын

Hi Ansh....I too have the same request..please do any mock designs for a mock project.so that would be useful too

@Kanishk_MotionDesign 2 ай бұрын

For those who are facing these same problem just as I have there is this course on figma where all these concepts were practically implemented by the tutor. udemy discount code are easily available online. You can check it out shorturl.at/rxIY6

@keshavisharma9477 Ай бұрын

Yes, i was kinda expecting him to make something at the end, be it something little just to summarize at the end what we have learnt. It might have helped us to know where can we use these.

@troysmusicalroom5260 8 ай бұрын

A reputed design institute would charge 80k Rs & teach frames for one day only. And then we have you, as always thank you so much for your efforts. Please keep bringing such detailed courses. ❤️

@dipanshchhabda3716 5 ай бұрын

The level of effort this man has put into this course to go into depth in every aspect is commendable! Thanks, man. Much appreciated.

@craftierszest9891 8 ай бұрын

The course and knowledge you are providing of free others are charging 40 to 70k for the same, thank you so much. You are not just making videos, you are making the life of many designers.

@hamzitoo 8 ай бұрын

Ansh you will gonna be One and only name for Complete UX. 🥰

@anishadaswani4352 7 ай бұрын

Thank you Ansh for making such in depth videos on figma. Nobody can teach the way you are doing this . I am so thankful to you and i usually never comment anywhere but i know comments will help you and since you are helping us so much , i can definitely do the bare minimum . Grateful .

@SAMSAm-lf7kp 8 ай бұрын

Mmmmm Amazing Detailed course.....Thank You soo much.

@Ecommified Ай бұрын

GREAT WORK!

@adityanalawade481 8 ай бұрын

the best and most informative lecture on Autolayouts and frames

@rufaidasyed7594 8 ай бұрын

Thank you for this gem of a video Ansh!! You're an amazing teacher.

@saumyayadav4545 12 күн бұрын

The series is really helpful.

@AbbasHaidervlog512 24 күн бұрын

Outstanding Teacher👍👍👍⚡⚡

@rohonrahaman23 Ай бұрын

I get so many insiders from this one

@akanshasingh9600 7 ай бұрын

Top tier figma education. Thankyou

@MuhammadFarooq-xg6sc 6 ай бұрын

Best figma course.

@MusicWaves-jh6qt 8 ай бұрын

Thanks Ansh! Love this series

@utkarshmishra7814 8 ай бұрын

Superb Video

@kajoldandapat 2 ай бұрын

You're literally saving our lives. I've seen so many videos on YT and I finally landed here to start my career because I find it very genuine and hopefully, we'll cross path as Designers in near future.

@keerthireddy6220 8 ай бұрын

i cannot thank you enough for your tutorials and your resources it helps a lot .

@Ajayuiux 19 күн бұрын

great work man !

@TechMag10 Ай бұрын

I especially liked the way you broke down the different types of frames. It really helped me understand their purpose. Thanks for the free course, Ansh!

@bharatmodiTechFist 8 ай бұрын

Amazingly covered up true essence of figma. 🎉

@lakshaymahajan8457 2 күн бұрын

Thank you Ansh for making such detailed videos on the basics of Figma. After watching your several videos, I decided to learn UI/UX. After learning some kind of development, it has helped me to understand various concepts easily such as Auto-Layout, padding, margin, etc. And I am also watching your free course on your website. It has helped me a lot in learning. Lastly, I am documenting what I am learning and all the resources as well, that would help me to refer them in future easily as you have told us in various videos.

@RahulMishraUX Ай бұрын

thanks brother, lots of things in 1 video

@divyakamal2137 5 ай бұрын

Haven't seen anyone else on KZfaq explain Figma in so much detail! Thank you Ansh!

@safiahussain9866 Ай бұрын

exactly

@Harshit-fp9io 2 күн бұрын

The best best thing i discovered

@Anshikaa25o 8 ай бұрын

Thank-you Ansh for this amazing lecture

@ridz4912 5 ай бұрын

One of the main things I learned was the difference between Responsive and Adaptive design, combined with the Responsify and Breakpoints plugin, now that is a game changer. 💪

@Dhanu-qv9qm 7 ай бұрын

Learnt alot from this🧡

@tiktokredditnarrates 2 ай бұрын

Thanks for sharing i've already shared on my linkedin one of the best course

@aniketchaudhari2668 4 ай бұрын

This is the playlist I was looking for.

@shreyabakshi6743 8 ай бұрын

YOU ARE THE BEST!!!!❤

@jahanzaibkhan9308 Ай бұрын

your work is great brother keep it up.

@anmolbhargav2704 7 ай бұрын

Second time watching tutorial and all my doubts are clear.

@mahaksingg 3 ай бұрын

ansh your lectures are really helpful

@NivyaBhagchandani Ай бұрын

Thank you so much, Ansh Sir. Your efforts and hard work in teaching this course are truly appreciated. These videos are exactly what we need, and they're making a huge difference for us.

@designersonalithanki 8 ай бұрын

Need this! Thank you!🙂

@Scrap2Wrap 19 күн бұрын

It is the best series for learning figma ... No doubt 🎉🥳🥳🥳

@mishanpatel7440 8 ай бұрын

Great Video Ansh, Thank you so much for making this.

@siddhibhatia5714 8 ай бұрын

Really amazing course Thanks Ansh

@UIUXforyou 4 ай бұрын

this is amazing!!! you are a HERO Ansh!

@shubhamojha37 Ай бұрын

Thanks Ansh for explaining in detail

@deepadabhi5738 26 күн бұрын

your explanation is great! your hard work is quite visible and your intention to help. Your energy inspires me aswel.

@Divya_Sharma1141 8 ай бұрын

Thankyou so much ❤

@nikhil4yourhelp670 8 ай бұрын

This is amazing specially nested constrains and nested auto layout this would be the gamechanger , and thank you for this🙂

@Avipsachopdar 21 күн бұрын

Thank you so much for sharing your knowledge in a very simple and minimalistic way. Easy to understand.

@MMaaz-xd6rk 4 ай бұрын

this courses is really helping me to learn figma in depth.

@chinmayaranjandas6003 8 ай бұрын

Honestly after watching this video i recall i watched atleast 10 videos about how auto layout works...if i had this video before... it wld hv been a piece of cake...appreciated ur teachings alot....ur truly helping students on their fundamentals bro...respect👍

@staycool219 Ай бұрын

This series of Figma is very knowledgeable...much appreciated !👍👍

@BurakDenizDeniz Ай бұрын

Thank you ansh mehra for this course . this figma course is really very helpfull fo rme thank you again Ansh mehra. You are really a great

@Azeem-qv3xo Күн бұрын

keet it up ansh mehra the videos are so so informational!

@PEESABATTULAMOKSHASAIBCE 8 ай бұрын

Iam loving it

@sv9963 7 ай бұрын

man....the way teach is asm

@aishwaryakadam7760 2 ай бұрын

Thank you Ansh! you have explained very well

@gamelabpc6591 8 ай бұрын

You are the goat bro♥️🔥

@himanshsrivastava9712 8 ай бұрын

Thankyou Ansh! it is really helpful

@kajalpawar6345 5 ай бұрын

Amazing video tutorial to learn and understand figma.

@shilpagupta2041 8 ай бұрын

Really love to see your videos.

@parsanlata 5 ай бұрын

extra ordinary work..

@deepchanda1989 5 ай бұрын

Wonderful video Ansh. Thank you so much Ansh.

@abhi31352 8 ай бұрын

Thanks for the detailed video.

@architgoyal1350 4 күн бұрын

Thank you Ansh for making this figma course it is helping me and saw that only your videos are so detailed videos, really love that...Thank you 🙏

@212Tasneem 7 ай бұрын

This course has been really really helpful!

@BurakDenizDeniz Ай бұрын

thank you ansh form this series .This video is very helpfull for me

@divyakanttrivedi8626 2 ай бұрын

Top explanation

@bday5004 4 ай бұрын

Amazing Content for free! Thanks a lot for teaching

@umesh6716 6 ай бұрын

Thank you for the value.

@urvipatel8548 17 күн бұрын

Your explanation and efforts 💥 It is very easy to understand each thing , thank you!!

@arnabux 7 ай бұрын

Thank you sir for this wonderful video. It is incredibly helpful and I look forward to further episodes

@nikitasharma18 8 ай бұрын

Thank you bhaiya 🙏🏻😊

@DevMasterminds. 3 ай бұрын

Your Details are next level boosting our skills. Thank you so much.........

@subhamghosh5335 7 ай бұрын

Best content ever

@muznasfoodsecrets 5 ай бұрын

Great efforts. thanks a lot

@sunilbohora8623 7 ай бұрын

Awesome content.

@mirzasaif2325 4 ай бұрын

hey Ansh! glad to know about your lectures, they are litterally helpfull for me as a UI beginner. It took me 2 days to complete this lecture. Thankyou so much !

@VinitShimpi-qx9zs Ай бұрын

Thanks for sharing such good tutorial. love all parts

@harshitgupta4148 8 ай бұрын

Amazing video sir❤

@Anas-Ben88 8 ай бұрын

Thank you Ansh for this great Tutorials it will be the number one here on KZfaq.

@Kanishk_MotionDesign 2 ай бұрын

Documented my learnings for this lecture very well. All the Important Timestamps along with notes and important links. Thanks for your effort brother.

@ux.neelpatel 2 ай бұрын

Thank you Ansh 👍for your work in teaching the UX design. your teaching style is very effective. I have been learning from you for a year and currently, I'm following your LearnUIUX roadmap it's truly amazing.

@anweshb8750 7 ай бұрын

truly appreciate your efforts ❤

@VaibhavKanda 14 күн бұрын

learning a lot from you, Not even the design but how to speak and how to express what we think... Sir really amazing content

@sugatkamble4275 Ай бұрын

Thats valuable and simple to understand for beginners...thanks you😊

@user-xh7pu2cw8r 21 күн бұрын

Your videos are great. This is something I really wish I had started watching months ago. I appreciate you providing this free treasure to all the students around the globe!🍀

@acceleratorgg1 6 ай бұрын

Best Figma course no doubt❤❤

@Anonymous-hf9br 5 ай бұрын

love you videos, such valuable information 🙏

@remax110 8 ай бұрын

Great tutorial. Thank you. I have been having trouble with the auto layout. Thank you for clarifying it. I tried many videos for auto layout and this has been the best tutorial for it. Thank you for breaking it down and easy for me to understand.

@mdtanveerulislam4328 8 ай бұрын

Thank you so much

@nerf_shalin8848 8 ай бұрын

It would be an understatement to call it a tutorial ; it's a manual. What a legend 🙌. Eagerly waiting for Variables and Advance Prototyping.

@NitishGariya11 4 ай бұрын

Just want to say ansh bhai keep this video series continuous they are very helpful for us to develop a basics of foundation of ui ux

@bhagyashreekejriwal749 2 ай бұрын

Great content! I am always confused with auto layout and this video helped me understand auto layout better.

@vaibhavsatav45 4 ай бұрын

This course is very Helpfull 👌 Thanks Bro

@uiuxdesign_trends 8 ай бұрын

Really helping and useful video, helping to grow more in UX designer field

@prateekgarg3879 4 ай бұрын

GREAT WORK SIR!

@emibaloc6344 6 ай бұрын

Hey Ansh! I've just completed this video, it took me 3 days to complete this video and making notes of it on notion. I was very confused about the auto-layout feature before. But you have explained it in so much detail that now my concepts are clear. Also i wanna let you know that I've start reading articles from figma blog| shortcut and those are very helpful. Thank you so much for guiding us to the valuable resources and providing such detailed videos on learning figma. Hats off to you for the hardwork you are putting in to make these videos.

@AnshMehraa 6 ай бұрын

I’m very happy that you took the time to finish the entire video. I know it’s tough but trust me, in 6-8 months you will thank yourself when you get your first big paycheck

@user-wj3gs9gl7i 4 ай бұрын

Broo! can you provide me the notes?

@vijaysaket2500 2 ай бұрын

broo will you provide me the notes?