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

Показать описание

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

Mavi Design

Рекомендации по теме

Комментарии

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

vankawa

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

DesignDen

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.

umerjaved

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

MKrizbe

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

Dymaniaaa

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

lilracheloak

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

ilyasclarkson

Finally full website tutorials coming 😍 ep 1

jt

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

mronshoh

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

edgarbusto

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

inespd

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!

jamesauble

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!

KejangSekali