Figma RESPONSIVE DESIGN using Variables, Layout grids and Auto Layout | Figma 2024
118.3K views · 2024-07-23
UI Design
🚨Follow along with this Figma file -
https://www.figma.com/community/file/1397154454323520866
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
☆ Try Figma For *Free* - https://psxid.figma.com/xnd9l
🍿 _WHAT TO WATCH NEXT_ :
1. *Figma components* - https://youtu.be/JDHHRN5kNU8
2. *Figma Slides* - https://youtu.be/uvc0l4uZ07U
3. *Variable mode interaction* - https://youtu.be/KJ9rqT3WHR0
🌼 _CHAPTERS_ :
00:00 Intro
00:20 Breakpoint variables
02:10 Layout grid variables
04:03 Layout grid overview
05:50 Responsive title
07:20 Font variables
08:31 Responsive cards
09:07 Min and Max widths
12:13 Auto Layout variables
14:50 Responsive form
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2024 #figma2024 #designtokens #tokens #variables #responsivedesign
https://www.figma.com/community/file/1397154454323520866
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
☆ Try Figma For *Free* - https://psxid.figma.com/xnd9l
🍿 _WHAT TO WATCH NEXT_ :
1. *Figma components* - https://youtu.be/JDHHRN5kNU8
2. *Figma Slides* - https://youtu.be/uvc0l4uZ07U
3. *Variable mode interaction* - https://youtu.be/KJ9rqT3WHR0
🌼 _CHAPTERS_ :
00:00 Intro
00:20 Breakpoint variables
02:10 Layout grid variables
04:03 Layout grid overview
05:50 Responsive title
07:20 Font variables
08:31 Responsive cards
09:07 Min and Max widths
12:13 Auto Layout variables
14:50 Responsive form
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2024 #figma2024 #designtokens #tokens #variables #responsivedesign