WEB DESIGN IN FIGMA ep.10: Global Navigation Prototyping - Free UX / UI Course

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
FREE FIGMA COURSE / SERIES: Design a Website in Figma: • FREE Figma Web Design ...
In the tenth episode of “Designing a Website in Figma”, we’re going to create a functional global navigation prototype - we will be using the Prototype mode to enable clicking through individual pages aka the global navigation. We will learn about components, instances, auto layout and fixed elements to also fix our header along with a broken smart animate accordion
How to set up a functional global navigation (click through pages menu) on your Figma prototype - Figma Prototyping Tutorial - Free UX / UI Course in Figma - Great for beginners
--------
© 2023 Mavi Design

[@perfectus99]

I've invested hours diving into episodes 1 through 10, and I'm thrilled to say that I've successfully built a fully functional website using the prototyping feature in Figma. The 'Component' feature has been an absolute lifesaver, allowing me to save time by simply editing or duplicating components instead of starting from scratch. While I've grasped about 30-40% of the concepts, there are a few areas that I'm still unsure about, particularly auto layout and managing multiple layers with settings like "Fixed," "Hug," or "Fill." I'm planning to watch more videos to fully understand and master these features. With 1/3 of the Web Design series completed, I'm eagerly looking forward to tackling the remaining 2/3!

[@annak7905]

You are a professional teacher! Thank you!

[@aydinuluc]

Thank you so much for these detailed videos. Easy to follow and excellent results. I get a black bar above the menu in these indivual pages when i click on the homepage to go to these pages.

[@neilkahn1953]

Great solution to the prototype "jumping" problem! But if you've got expanding content on your page (as you do in your accordion), how do you vertically size the new top-level frame? It's not an auto layout so it's fixed, right? Do you just expand everything in your layout and resize the frame to fit? That will leave a lot of extra scrollable white space at the bottom of your prototype. Is that a necessary tradeoff for managing this bug?

[@justafrenchkidtryingtospea9462]

There is still an auto layout in the frame just include it in this auto layout 😊

[@DhirajIngle-k1v]

But what if I have animations for the navigation bar and also want to connect those to pages?

[@justafrenchkidtryingtospea9462]

Thank you so much for the accordion I was sticked during 3 hours looking up what I f**** up 5 months later still they did not fix it

[@yourwibuu6125]

Thanks you so much this help me in university

[@RustemmKh]

How to show active page in navigation?

[@AlexandraAgapova]

wow...thank you 🙏☺

[@j33t78]

So cool 🔥

[@tadswiech3043]

the best !

[@rosemaryogugua7338]

Hi Mavi, new subscriber here and you're awesome! HELP: For the header, I can't find the 'fix position while scrolling' option after I moved the header out of the Auto layout. Can you help, please?

[@Володимир-п5б]

This is now in the Prototype -scroll behavior and you can choice No scrolling.

[@tadswiech3043]

the best

[@andreja9119]

After everything, the footer section is being pushed after i open all the headlines to the point its not scrollable anymore. is it a limitation in figma orrr? Thanks anyone who can answer

[@ismailmohamed8451]

i believe its because they are still auto layouts on them, so remove the auto layouts and you should be able to align it to the bottom

[@user-cm3zw9oj9z]

i'm struggling with the same issue :/ Did you find the solution?