Design a WEBSITE IN FIGMA ep.01: The HEADER MENU
Vložit
- čas přidán 16. 07. 2024
- 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 - Jak na to + styl
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
Thank you good man!
Thanks for this, I almost cried looking for that option in the usual place. Pheeeew!
life saver
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
THANK YOU! I was losing my mind and you made it so easy to follow and understand.
Done with the basics! Time to start this one 😊
Thanks a lot for this wonderful tutorial and explanation !!
You are a savior man, keep up the good work!
I really learned many things new, not only something haha, please continue the great work !
Finally full website tutorials coming 😍 ep 1
Thank you for posting the video on how to use Figma.
Thank you. Learned a lot.
Thank you so much. Great tutorial for beginners!
Awesome job! I really like it! A lot of useful things)
Thank you for your awesome help. You are rockstar!
I learned a lot from one video. The course is amazing
Thank u i'm excited for more videos 😍
top top stuff, really going to help with my prototyping.
Awesome tutorials 💜💜
that's amazing. Thank you
Really awesome this tutorial. I never use yet like that. thanks.
thank you for this video. learnt new things
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 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?
Hello Mavi! Congratulations on your videos, simply incredible, they are helping me a lot. Greetings from Brazil! \😁/
Great learning tutorials
very easy and helpful, expecting more, thanks
awsome, thanks
Thank you for sharing...its useful tutorial
Your teaching ❤🔥
Thank you!
Thank you very much!
very helpful man💖
Please do more videos like that.. Please make video about full length mobile app design..
Amazing 😃
thank you so much!
A lot of thanks bro
keep continue brother
Thanks bro ❤
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.
great video
thank you so much🤟
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! :)
thanks
thanks
Fantástico
Gracias
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"
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?
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!
Perhaps it was necessary to make a hover for the logo?
You great
Great video.
How much is the margins here? 144 per side?
Isn't it too much?
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! ...❤
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!
Thank you so much! Just a quick question in advanced auto layout settings i dont have spacing mode… how can i do it ?
same here
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?
So grate! Thanks!
Hey how did you get "highlighted" type for the menu type? 9:18
I can't select anything other than regular
@@beingShree_16 the author at first created "highlighted" (9:15), and then choose it
also why the Menu items don't interact with me when I'm make run?
in my figma there is no spacing mode in advance layout... how can i fix it ?
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
thank you! i couldn`t find it lol
Same here
there isn't content to add. im so confused
why is my content tab is missing? gosh
fixed position is on prototype this is new update in figma
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
same , do you know how to fix it?
now im facing problem i cant start preview it
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?
I'm getting that too! but the "reach out to us" button is working fine! is someone able to troubleshoot?
@@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.
make sure your component is right
whats the is difference between sretch and centre in grids ? why did u use centre
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 CZcams - thank you for your understanding!
Mavi
In my advanced auto layout settings I don't have the spacing mode option what can i do pls
go to vertical spacing between items and click on the down arrow and select auto
after creating the "change here" buttons and adding them all together under auto layout, I can't add the "text" property. Why is that?
Im having the problem. Have you found a fix?
11:32 cannot select
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?
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
@@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".
@@mavidesign i use the latest version of figma btw
@@raymondfigoinuhan9504
Hello Raymond, I also have the same problem were you able to fix it? Thanks 😊
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 :/
please, check if they are connected.
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
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 :)
11:38 could not fint the text property button, it shows create boolean property
Select all and than go to text property which is below the layer panel
Thanks a lot @@sanaakram3167
Bro make on windows😂
Thanks!