Design a WEBSITE IN FIGMA ep.01: The HEADER MENU

[@vankawa]

PS - At 19:14 - If you cannot find the "Fix position when scrolling", the new version changed its location to under the "Prototype"/ Scroll Behavior / Position / Fixed

[@Neil_Web3]

Thank you good man!

[@rosemaryogugua7338]

Thanks for this, I almost cried looking for that option in the usual place. Pheeeew!

[@mundojones7477]

life saver

[@TechSciWiz]

thanks man😍

[@anshulgupta-jr3vs]

thanks you man

[@steinmartahh]

I found this tutorial to be the best one I've followed so far. The explanations and instructions are very clear, leaving no room for confusion. The only issue I encountered was with the second layout where the header nav container didn't center automatically. I managed to fix it, but I can't recall the exact steps I took. Additionally, the fixed position of the header when scrolling is now in a different place. Everything else was great. I also appreciated the approach of teaching a beginner-friendly method for creating components, which encourages efficient work and resource optimization from the start. Not all tutorials I've followed offer this, so I'm extremely thankful for it.

[@itsmenetbuster]

I'm also having the same issue, and would really appreciate it if you can list out the steps you took to fix it. Thanks

[@itsmenetbuster]

Found the solution. When you add the last auto layout, the inside layout width will be automatically changed to fit container, so you have to change it back to fixed width.

[@MKrizbe]

Keep grinding man. Your videos are easy to follow and have been a great way to start ui design. You’ll have a big audience in no time. Consistency is key

[@mavidesign]

🥰🥰

[@hazhimbasheer6574]

@@mavidesign love your videos, helping me loads with my companies website design. Was keen to know what software/plugin you are using for the text pop-up?

[@lilracheloak]

at 11:40 i cant find "Content" // (edited) i found it below the text settings, but it doesnt have the name Content, its a blank space

[@itsmonikabenesh]

thank you! i couldn`t find it lol

[@IITD2023]

Same here

[@MelinaCelesteLazaro]

could you help me? at minute 11:40 I can't select the 4 texts. Could you tell me which are the keys to press? thks

[@JossephAnthonySobradoMarcos]

@@MelinaCelesteLazaro Select one item with the command button on Mac, hold it, press shift and the select others items without pressing anyone of them until the last one

[@FahmiHamz]

where is it , still cant find it

[@abhishekchittari4303]

Excellent tutorial! Can be implemented practically for every project.

[@Dymaniaaa6969]

THANK YOU! I was losing my mind and you made it so easy to follow and understand.

[@inespd]

Hi Mavi, first of all, thank you for such awesome videos! I've got a question for you: why did you create a container for the header with a fixed width of 1152 and then another autolayout on top of that one with a fixed width of 1440? If the spacing between elements is on auto, and if we just create the second one, won't the navigation bar be responsive anyway? Thanks! :)

[@ilyasclarkson2556]

I really learned many things new, not only something haha, please continue the great work !

[@edgarbusto4196]

You are a savior man, keep up the good work!

[@mohamedbaqchich8353]

Thank you so much for the amazing content you create! Your videos are always helpful and inspiring. Keep up the great work-I'm learning so much from you!

[@ezrarichard]

Thanks a lot for this wonderful tutorial and explanation !!

[@j33t78]

Finally full website tutorials coming 😍 ep 1

[@jamesauble8091]

I don't understand why we create this text property at 11:40. It seems in the current version of Figma this is done differently too and there is no longer a Content section in the design pane. The way I THINK I achieved this was to click on the main comopnent and add a text property. Can anyone explain what's going on here? Thanks!

[@boboux.graphic]

yes, even me I can not find the content section in new version of figma.

[@tinggoy3676]

same i cant find the content section

[@rabinshrestha4346]

In 15:33 you did fix spaceing and you did Auto layout, advance auto layout and you did spacing word but in my case the option of is spacing word did not find can you tell me how to fix that

[@AbhishekGodiyal]

same , do you know how to fix it?

[@deborahodinga8739]

It’s same thing, figma upgraded • Set your width to fixed width, adjust to suit your screen size (like he did) • Set the height to fixed, adjust to suit you • Set your horizontal padding and vertical padding to Zero (0) • Align to the center It will automatically fit in your screen size Let me know if it worked

[@Pudidigimang]

@@deborahodinga8739 it's not working mate

[@Ibibiofame]

Hi. I cannot get my header to be responsive. Adjusting it to center alignment does not change anything as the logo still maintains a zero padding on the left as well as the last menu item on the right. i have no idea where i went wrong.

[@idontknow553-w3u]

same

[@hajarabdulla4727]

Thank you so much! Just a quick question in advanced auto layout settings i dont have spacing mode… how can i do it ?

[@nandhak7823]

same here

[@becomingmims]

You have to choose automatic in vertical gap between items and it does the same

[@m17ronshoh]

I learned a lot from one video. The course is amazing

[@KalleKuehl]

Why the hell i am failing in the first videos ahhhh

[@mirzashemin5556]

Rewatch several times, in my 3rd attempt I have succeeded and had to rewind a few times

[@jdmji]

Done with the basics! Time to start this one 😊

[@RustemmKh]

Perhaps it was necessary to make a hover for the logo?

[@МарияЯстребова-ь5ь]

Awesome job! I really like it! A lot of useful things)

[@EDGfrontlinegrafix]

Thank you for your awesome help. You are rockstar!

[@alemjamir698]

Thank you. Learned a lot.

[@gamerxdesigner5735]

Thanks for teaching us what you know

[@umerjaved3708]

unbelievable such kind of material is available for free. you dont need to pay any one from now. watch,learn,and be seperate yourself from crowd.

[@updates4043]

Great video. How much is the margins here? 144 per side? Isn't it too much?

[@Angelxoxo757]

Thank you for posting the video on how to use Figma.

[@wanderamartin1315]

top top stuff, really going to help with my prototyping.

[@mirzashemin5556]

Thanks a bunch❤

[@ahsunhabibrasel]

Really awesome this tutorial. I never use yet like that. thanks.

[@KejangSekali]

The Scrolling behavior Problem, so at 18:45 I already do the choose thing (Vertical Scroll) but when i scroll down it in my Figma with (100% Actual Size) , it's not only vertical that moving but horizontal is moving also, can u help me to solve this problem? thank you!

[@sanskaryadav1119]

when i go into presentation mode and i try to hover over texts like "features, about us" and all it, it does that hovering effect properly but the text changes from "Features" to "menu item". how do i fix this?

[@fumiesaito2128]

I'm getting that too! but the "reach out to us" button is working fine! is someone able to troubleshoot?

[@nattivo6386]

@@fumiesaito2128 that step is indeed missing in this video. I also got the same problem: Whenever I hovered over the "Reach out to us" button, it would change to the grey "Menu Item" button. The solution that I found was updating the instance button hover text. You can do that by selecting the instance button (the one that is inside the frame, in the navigation bar), changing its state to hover, and manually updating its text (click in the text and update). It worked here, and I got the same output as his. It's been some months, but maybe this comment will help someone else.

[@abdullahasim4955]

make sure your component is right

[@OsmanSandhu]

in my figma there is no spacing mode in advance layout... how can i fix it ?

[@segomodisanyane]

I think Figma has been updated since but to get the same result I selected the frame with all the objects then in auto-layout there's an option for "horizontal gap between objects" if you select the auto it'll work. :)

[@ghalian9407]

Thank u i'm excited for more videos 😍

[@TechSciWiz]

Beneficial thanks for this video !!

[@haroxtar1769]

11:38 could not fint the text property button, it shows create boolean property

[@sanaakram3167]

Select all and than go to text property which is below the layer panel

[@IITD2023]

Thanks a lot ​@@sanaakram3167

[@uxnewb]

At 18:32 and trying to position the circles but they keeping snapping to the sides of the frame. The alignment options are also greyed out. Anyone have a clue why this might be happening?

[@matthewchristopher2736]

Please do more videos like that.. Please make video about full length mobile app design..

[@DineshKumar-gy5yh]

Your teaching ❤‍🔥

[@ChefHeroes]

Please create a course - I would pay for this type of content.

[@hnquran1002]

Awesome tutorials 💜💜

[@sandykust]

that's amazing. Thank you

[@sharifurrahman2538]

very easy and helpful, expecting more, thanks

[@fatinazmyan]

very helpful man💖

thanks

[@koksiangkoh3401]

Thank you for sharing...its useful tutorial

[@yuvansankarrajareddy7731]

hovering is not working please help

[@akaonochie6897]

thank you for this video. learnt new things

[@nandhak7823]

11:32 cannot select

[@KayleighKeciaMartin]

there isn't content to add. im so confused

[@raymondfigoinuhan9504]

please answers this comment why my hover not working when the header bar is done and i hover it to the button it words for example that first page my cursor going to the first page and word "first page" changes to "menu item" not still "first page" when hover. why its happening?

[@mavidesign]

Try changing the state of your button to “hover” manually, typing in “first page” and then reverting it back to default state. If I understand your problem correctly this should do the trick

[@raymondfigoinuhan9504]

@@mavidesign the main problem that ive got is the hover in header bar was not working i dont know why coz i following your steps in the video clearly but when i reach the final result of header bar i test to drag the cursor to the page button and it changes "first page" into "menu item" words not the same words "first page".

[@raymondfigoinuhan9504]

@@mavidesign i use the latest version of figma btw

[@smokin_sausage01_7]

⁠​⁠​⁠@@raymondfigoinuhan9504 Hello Raymond, I also have the same problem were you able to fix it? Thanks 😊

[@abayomiolabode3355]

Great learning tutorials

[@nicholasalvaro5407]

why is my content tab is missing? gosh

[@haifashamla7598]

also why the Menu items don't interact with me when I'm make run?

[@Deborah_D]

Hello! I'm looking for this... But when I select a word a list is displayed... Where can I find it or under what name should I search for it? It really frustrates me. I would appreciate the help! ...❤

[@TheFactSyndicate]

there is no advance auto layout T-T I cannot put the menu item on the right side of the frame

[@annak7905]

Thank you very much!

[@AbuJafarcda]

A lot of thanks bro

[@ribeiroroqueisrael]

Hello Mavi! Congratulations on your videos, simply incredible, they are helping me a lot. Greetings from Brazil! \😁/

[@virajparmar953]

Is there anyone who is facing issue while doing the 1400 process.. Don't know why but the menu bar and logo are not moving together

[@AmiinBileh]

did you find a solution? Im facing the same problem

[@thebeatsync4328]

thank you so much

[@haifashamla7598]

hi, thank u for this videos, put i have problem when i make a header to scrolling dissatisfied, he reacts and figma say to me "for scrolling the content needs to be bigger than the fram"

[@VenkatachalamRavindran]

Superb video.

[@smilli6415]

whats the is difference between sretch and centre in grids ? why did u use centre

[@mavidesign]

Centre renders all the grids / columns / whatever and then centers it. AFAIK, using stretch simply stretches it across the entire frame width. Not something you want to do when you want to maintain a fixed column width --------- To get more specific help and feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over KZbin - thank you for your understanding! Mavi

[@EchoesOfYash]

Thanks bro ❤

[@JesperPerssonen]

awsome, thanks

[@OcholaTheCreator]

great video

[@chaerulhakim361]

i dont know why but when i select all text, and i want to create text property, there is no button in there, only button there is parent componen. Can you help me with this one?

[@bishoyadel1789]

thank you so much🤟

[@ahmedrabiul8576]

keep continue brother

[@user-albert87]

Thank you!

[@zeeshan8265]

Amazing 😃

[@AmnaHussain-j7q]

I followed each step, but my navigation isnt responsive at all

[@May-gv9ww]

So grate! Thanks!

[@beingShree_16]

Hey how did you get "highlighted" type for the menu type? 9:18 I can't select anything other than regular

[@May-gv9ww]

@@beingShree_16 the author at first created "highlighted" (9:15), and then choose it

[@vamboo8918]

thanks

[@nana973.]

In my advanced auto layout settings I don't have the spacing mode option what can i do pls

[@nkechiopara5946]

go to vertical spacing between items and click on the down arrow and select auto

[@achuprasad1817]

Did anyone checked its responsive or not in a frame ? mine is not responsive

[@laurencealuyog83]

How to use command? I'm totally beginner

[@chaerulhakim361]

now im facing problem i cant start preview it

[@danifeldman8767]

after creating the "change here" buttons and adding them all together under auto layout, I can't add the "text" property. Why is that?

[@topshelfnation2811]

Im having the problem. Have you found a fix?

[@islam-hossain]

fixed position is on prototype this is new update in figma

[@aerialwarfare]

Is it necessary to make the width as 1440px?? What is I make it 1728 px in width, will there be any problem? @Mavi Design

[@mavidesign]

not really, 1440px is the resolution of my screen. I chose this because it fits the screen 100%. The main thing is to maintain the grid width (if you want to get the same result), the frame width is basically just a container. I suggest choosing a size that fits your screen :)

[@rubenmunozaragon]

Fantástico Gracias

[@alexgupana5171]

Thank you so much. Great tutorial for beginners!

[@lailahhoque48]

any one elses prototype not changing on hover? I set the settings the same but its not doing the change to the variant on hover :/

[@vankawa]

please, check if they are connected.

[@zen-zen191]

Is anyone falling to copy the menu item? It's the same issue from the other video. Edit: Okay, Figma says to hold down option and drag. That worked

[@mirrasliva]

Спасибо большое

[@linkonsarkar7550]

You great

[@ИринаКим-ъ5ч]

Lee Barbara Martinez Larry Taylor Melissa

[@SpencerAshong]

Honestly i don't think your approach to teaching is beginner-friendly

[@filipmelnikov8411]

is no longer relevant in 2024. The new UI is a load of crap. Why change the interface every few months?

[@ashumishra2330]

Bro make on windows😂

[@sandrakhoury9476]

thank you so much!

[@skyachilles7789]

Thanks!