How to use Figma Frames & Autolayout?
The Cutting Edge School
🍿 Watch rest of the Figma Course - https://youtube.com/playlist?list=PLlHtucAD9KT19ckHqXpPSStZOyDSq9AW-&si=LFheokCYSCAUTm-G
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:
🔗 https://www.instagram.com/anshmehra.in/
🔗 https://www.anshmehra.com/
🔗 https://medium.com/ansh-mehra
🚀 Complete Roadmap to a UX Design Career:
→ https://learnuiux.in/
🏆 Learn about Prompting and AI Tools:
→ https://www.howtoprompt.in/
Resources mentioned in the video 👇🏽
🔌 Figma Community Files:
https://www.figma.com/community/file/1292854467563606602/anshs-free-figma-course-ep-2
🔌 Article - Responsive grids and how to actually use them
https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01
🔌 Article - Space, grids, and layouts
https://www.designsystems.com/space-grids-and-layouts/
🔌 Article - Everything you need to know as a UI designer about spacing & layout grids
https://medium.com/design-with-figma/everything-you-need-to-know-as-a-ui-designer-about-spacing-layout-grids-2bc269e12321
🔌 Quick Responsive Workflows
https://youtu.be/pwpb5hJHAcQ?si=GxMfbBm9ydpqhoWt
🔌 Figma Help Centre:
https://help.figma.com/hc/en-us
🔌 Responsive Plugin:
https://www.figma.com/community/plugin/840727678445998968/responsive
🔌 Sorter Plugin:
https://www.figma.com/community/plugin/742038190980789811/sorter
🔌 Find all shortcuts:
https://shortcuts.design/
🔌 Figma Web and App Design Type Styles & UI Typography Systems on Figma | UX Design System Tutorial:
https://youtu.be/HQvOF7TK7hg?si=Wbb6nNbnklACr2sf
🔌 Step by Step Roadmap for how to become a UX Designer (Updated 2023)
https://youtu.be/cwPU547bCDs?si=Tjwm_6zIXgNlOWLB
🔌 is this the end of UX Design? Will AI take over soon?
https://youtu.be/S-0StqUhwn0?si=J9Tg8FYikw3gfSc0
🔌 How to use Notion - Beginners Tutorial (2023)
https://youtu.be/eGhbFL-kwt4?si=E8bahI42WMyxGmBP
🔌 What is UX/UI Design? Learn Figma for free in Hindi/English
https://youtube.com/playlist?list=PLlHtucAD9KT0bD44BokShkbSWO6Wsj4BC&si=i6-tgc_CxW2nHMnv
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)
→ https://www.zuddl.com/
