Figma Responsive Design for Development (Box Model + Auto Layout)

Опубликовано: 12 Февраль 2025
на канале: UI Adrian

50,925

1.6k

Work with my design studio → https://designme.agency

Master UI design for $9 with my new ebook!
👉 https://howtodesignbetter.com/ebook

In this video, I'm going to show you how to design in Figma with web development in mind and get you prepared for a seamless developer handoff using Auto Layout and the Box Model 📝

Download the free files here👇
https://www.figma.com/community/file/...

Feel free to check out the Figma Mastery video course I mentioned in the video👇
https://howtodesignbetter.com/figma-m...

Timestamps:
00:00 - Intro
00:19 - Understanding the box model
02:01 - Layout grid
02:30 - Adding structure
05:13 - Fixing breakpoint issues
07:40 - Left and right columns
09:02 - Setting constraints
11:14 - Explaining the structure
12:54 - Using auto layout
13:27 - Responsive Design (Part II?)
13:44 - Outro (Figma Mastery, eBooks)

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

P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).

For mobile designers 👇
https://howtodesignbetter.com/design-...

For website designers & freelancers 👇
https://howtodesignbetter.com/web-des...

My Figma Mastery video course 👇
https://howtodesignbetter.com/figma-m...

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

Connect with me 👋
Instagram -   / uiadrian
Twitter -   / uiuxadrian
Linkedin -   / adrian-kuleszo

Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!