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

Подписаться 42 тыс.

Просмотров 115 тыс.

50% 1

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Playlist: FREE Figma Web Design Course : • FREE Figma Web Design ...
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In this video we’re going to start a website design project in Figma. We will be creating a fixed website navigation bar with menu items / buttons that also have hover states. This will serve as a basis for future videos where we’ll expand on our design and turn this into a final, polished website design. Stay tuned for future videos as this is quite a big project to cover in just one single video - I think you’ll be able to learn more through a series. Let’s get into it!!!
How to design a website in figma - how to design a header menu navigation with hover states in figma (step-by-step tutorial with examples)
--------
© 2023 Mavi Design

Хобби

Опубликовано:

1 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 98

@vankawa 11 месяцев назад

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 11 месяцев назад

Thank you good man!

@rosemaryogugua7338 9 месяцев назад

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

@mundojones7477 Месяц назад

life saver

@DesignDen673 11 месяцев назад

A lot of the stuff in this tutorial has changed in Figma. like "fixed position of navigation" while scrolling has been shifted under prototype tab. The autolayout settings have also changed. Now you need to double tap on the alignment to align the menu tabs

@j33t78 Год назад

Finally full website tutorials coming 😍 ep 1

@Dymaniaaa6969 Год назад

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

@jdmji 11 месяцев назад

Done with the basics! Time to start this one 😊

@ezrarichard Год назад

Thanks a lot for this wonderful tutorial and explanation !!

@edgarbusto4196 11 месяцев назад

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

@ilyasclarkson2556 Год назад

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

@Angelxoxo757 9 месяцев назад

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

@alexgupana5171 3 месяца назад

Thank you so much. Great tutorial for beginners!

@alemjamir698 Год назад

Thank you. Learned a lot.

@user-lt7kk3sg4d Год назад

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

@m17ronshoh Месяц назад

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

@EDGfrontlinegrafix Год назад

Thank you for your awesome help. You are rockstar!

@wanderamartin1315 Год назад

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

@ghalian9407 Год назад

Thank u i'm excited for more videos 😍

@sharifurrahman2538 5 дней назад

very easy and helpful, expecting more, thanks

@ahsunhabibrasel 5 месяцев назад

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

@inespd 3 месяца назад

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! :)

@akaonochie6897 9 месяцев назад

thank you for this video. learnt new things

@hnquran1002 Год назад

Awesome tutorials 💜💜

@sandykust Год назад

that's amazing. Thank you

@umerjaved3708 3 месяца назад

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.

@ribeiroroqueisrael 8 месяцев назад

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

@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 5 месяцев назад

@@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?

@abayomiolabode3355 Год назад

Great learning tutorials

@koksiangkoh3401 8 месяцев назад

Thank you for sharing...its useful tutorial

@DineshKumar-gy5yh 4 месяца назад

Your teaching ❤‍🔥

@matthewchristopher2736 Год назад

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

@annak7905 4 месяца назад

Thank you very much!

@JesperPerssonen Год назад

awsome, thanks

@user-albert87 8 месяцев назад

Thank you!

@fatinazmyan 5 месяцев назад

very helpful man💖

@sandrakhoury9476 3 месяца назад

thank you so much!

@zeeshan8265 Год назад

Amazing 😃

@theofficialbreaker1779 8 месяцев назад

Thanks bro ❤

@ahmedrabiul8576 Год назад

keep continue brother

@AbuJafarcda 3 месяца назад

A lot of thanks bro

@vamboo8918 3 месяца назад

thanks

@bishoyadel1789 3 месяца назад

thank you so much🤟

@Paul_Ochola 5 месяцев назад

great video

@RustemmKh 4 месяца назад

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

Год назад

thanks

@uxnewb 7 месяцев назад

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?

@updates4043 7 месяцев назад

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

@rubenmunozaragon 9 месяцев назад

Fantástico Gracias

@haifashamla7598 2 месяца назад

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"

@Deborah_D 3 месяца назад

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! ...❤

@hajarabdulla4727 9 месяцев назад

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

@nandhak7823 3 месяца назад

same here

@lilracheloak 5 месяцев назад

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

@monikabenesova2387 Месяц назад

thank you! i couldn`t find it lol

@IITD2023 17 дней назад

Same here

@haifashamla7598 2 месяца назад

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

@jamesauble8091 2 месяца назад

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!

@chaerulhakim361 2 месяца назад

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?

@OsmanSandhu 23 дня назад

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

@KayleighKeciaMartin 5 месяцев назад

there isn't content to add. im so confused

@linkonsarkar7550 Год назад

You great

@May-gv9ww 6 месяцев назад

So grate! Thanks!

@beingShree_16 6 месяцев назад

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

@May-gv9ww 6 месяцев назад

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

@rabinshrestha4346 3 месяца назад

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 27 дней назад

same , do you know how to fix it?

@nicholasalvaro5407 8 месяцев назад

why is my content tab is missing? gosh

@islam-hossain 5 месяцев назад

fixed position is on prototype this is new update in figma

@chaerulhakim361 2 месяца назад

now im facing problem i cant start preview it

@smilli6415 8 месяцев назад

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

@mavidesign 7 месяцев назад

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 RU-vid - thank you for your understanding! Mavi

@sanskaryadav1119 9 месяцев назад

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 9 месяцев назад

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

@nattivo6386 5 месяцев назад

@@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 4 месяца назад

make sure your component is right

@nana973. 11 месяцев назад

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

@nkechiopara5946 9 месяцев назад

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

@danifeldman8767 9 месяцев назад

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?

@mysticsnippets. 6 месяцев назад

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 6 месяцев назад

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 :)

@raymondfigoinuhan9504 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

@@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 8 месяцев назад

@@mavidesign i use the latest version of figma btw