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
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.
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.
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?
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! :)
@@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
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 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!
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.
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!
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
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
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 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.
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?
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".
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"
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 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?
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 TH-cam - thank you for your understanding! Mavi
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 :)
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
thanks man😍
thanks you man
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.
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
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.
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?
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! :)
THANK YOU! I was losing my mind and you made it so easy to follow and understand.
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
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
@@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
where is it , still cant find it
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
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!
yes, even me I can not find the content section in new version of figma.
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!
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.
same
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
You have to choose automatic in vertical gap between items and it does the same
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.
I learned a lot from one video. The course is amazing
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!
Thanks a lot for this wonderful tutorial and explanation !!
in my figma there is no spacing mode in advance layout... how can i fix it ?
Done with the basics! Time to start this one 😊
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?
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
@@deborahodinga8739 it's not working mate
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
Thank you for posting the video on how to use Figma.
top top stuff, really going to help with my prototyping.
hovering is not working please help
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
did you find a solution? Im facing the same problem
Thank you for your awesome help. You are rockstar!
Awesome job! I really like it! A lot of useful things)
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?
Thanks for teaching us what you know
Thank you. Learned a lot.
Great video.
How much is the margins here? 144 per side?
Isn't it too much?
Perhaps it was necessary to make a hover for the logo?
Why the hell i am failing in the first videos ahhhh
Rewatch several times, in my 3rd attempt I have succeeded and had to rewind a few times
there isn't content to add. im so confused
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 😊
Really awesome this tutorial. I never use yet like that. thanks.
Please create a course - I would pay for this type of content.
very easy and helpful, expecting more, thanks
Please do more videos like that.. Please make video about full length mobile app design..
Thank u i'm excited for more videos 😍
there is no advance auto layout T-T I cannot put the menu item on the right side of the frame
thanks
Beneficial thanks for this video !!
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"
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! ...❤
that's amazing. Thank you
why is my content tab is missing? gosh
also why the Menu items don't interact with me when I'm make run?
Thanks a bunch❤
I followed each step, but my navigation isnt responsive at all
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?
11:32 cannot select
Awesome tutorials 💜💜
Your teaching ❤🔥
great video
Great learning tutorials
Thank you for sharing...its useful tutorial
thank you for this video. learnt new things
keep continue brother
very helpful man💖
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
Superb video.
How to use command? I'm totally beginner
Hello Mavi! Congratulations on your videos, simply incredible, they are helping me a lot. Greetings from Brazil! \😁/
Amazing 😃
awsome, thanks
Did anyone checked its responsive or not in a frame ? mine is not responsive
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 TH-cam - thank you for your understanding!
Mavi
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?
now im facing problem i cant start preview it
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
Thank you so much. Great tutorial for beginners!
A lot of thanks bro
Thank you very much!
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.
Thanks bro ❤
thank you so much
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
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 :)
Thank you!
thank you so much🤟
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
thanks
fixed position is on prototype this is new update in figma
You great
Fantástico
Gracias
Спасибо большое
Lee Barbara Martinez Larry Taylor Melissa
Honestly i don't think your approach to teaching is beginner-friendly
is no longer relevant in 2024. The new UI is a load of crap. Why change the interface every few months?
Bro make on windows😂
thank you so much!
Thanks!