How to Design Responsive Header Navigation in Figma - Autolayout
HTML-код
- Опубликовано: 9 мар 2023
- How to Design Responsive Header Navigation in Figma - Autolayout
➡️ Figma link to download the file: www.figma.com/community/file/...
In this tutorial, you will learn how to design a responsive header navigation using Figma's powerful Autolayout feature. Whether you're a web designer, UX/UI designer, or simply looking to improve your design skills, this tutorial is perfect for you. We'll cover everything you need to know, from setting up your design file to creating a flexible and responsive header that works on any screen size. By the end of this tutorial, you'll be able to create a beautiful and functional header navigation that adapts seamlessly to different devices and screen sizes. So grab your Figma tool and let's get started!
➡️ Countdown Timer Animation: • Creating a Countdown T...
➡️ Create Typography Design System: • Typography Scale Guide...
➡️ Modern Car Dashboard Design | Components in Figma: • Modern Car Dashboard D...
➡️ Create Input Fields with Auto Layout and Variants: • How to Create Input Fi...
➡️ Website Master Smart Animate: • Video
➡️ Smart Animate -Using Interactive Components: • Video
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE
If you found this video helpful, don't forget to like and subscribe for more design tutorials and tips. Thanks for watching!
To group auto layout click shift-A , this is my first video in figma and I used to use ctrl G usual to Group but its not the same I noticed , so I found this SHIFT A
Thanks for watching and sharing your experience with the shortcut keys!
Good
Glad it was helpful!
nice video!
I'm Brazilian 🇧🇷 and I learned a lot from your explanation. thank you very much.👍
Glad it was helpful!
Thank you soooo much for this amazing video! Finally, I got it! Good job :)
Thanks for your comment, glad it helped you let me know if you have any questions!
Thank you so much for the video!
You are so welcome!
Great tutorial thank you ❤
thank you for your comment @sikandar appreciate that :)
bro, thank you really. I subscribe, you fcking made it work for me. Godbless. I hope you continue making videos, especially for a whole landing page design process.
Thank you for your comment, im happy it was helpful for you. I will definitely create the landing page process thanks for suggesting it’s important for me to create the content that you guys want! 👍
❤❤❤
Thankyou for the tutorial :)
Thanks for commenting, i hope it was helpful to you
It is helpful :)
thanks for your tuto
Thanks for your comment 😉
Bro ur voice sounds like Saul Goodman in quite manner
Never thought about that i actually searched Saul Goodman to listen it 🤣🤣🤣 thanks for your comment, appreciate it 👍
Hi, good aproach, but how can we check, whether it is responsive?
Thanks for your comment, ideally it you select the header nav component (left or right) and move it you should be able to adjust it to specific screen size, when you add a mockup e.g. 1440px, try to specify header constraints (left/right/top) this should adjust it accordingly. I will create a step by step tutorial for you on this topic in a next few tutorials and will break it down into more details, would be happy to hear your feedback if it worked. Also subscribe not to miss it. 👋
Can you do one with how you'd add a hamburger menu for the tablet and mobile?
Thanks for your comment, I have created a video on how to add hamburger menu for mobile devices ruclips.net/video/GLbbHmxqj10/видео.html
Nice tutorial!, and don't forget to drink more water bro!
Thanks for your comment, happy to help! Yes, you are right i do need to drink more water. 💦 probably have to set reminders 😀
Hi, i have an issue on creating an instance of the head navigator (@ 13:20 ). It produces only 1 of the 3 head navigators each time i copy and paste them over the frames (desktop, tablet and mobile). I cannot change the properties of the navigator header (S, M , L). I have followed the steps multiple times , but without luck. Is there any solution for that ?
I will create a video, on this topic how to do it step by step. Please subscribe the video will be published on monday.
Hi here is the new video that I have explained step by step ruclips.net/video/zyraRIgHU_w/видео.html please let me know if I answered your question. thanks
@@designleague why I cant find this video anymore?! :(
@@Paris_objects Hi Paris, thanks for your comment, I am not sure here is the URL: ruclips.net/video/TSs1Bx4go90/видео.html let me know if you have any questions, happy to help :)
where are the urls to breakout rooms? How do I get into them?
Thanks for your comment, please see the video description you will find the figma link, you can copy/duplicate the file if needed.😊
good tutorial ,but accent and pronocment could be beter
Thanks for your comment, valid point, I’m working to improve it hopefully it will get better over time. 👍
Am I a complete boomer or just a dummy? I can never see the details on the person's screen as they're showing us. I don't have bad vision either. How does everyone see everything they're showing? Can you zoom in on videos or something?
Thanks for your comment! Sorry that you weren’t able to see the details, maybe try to increase the video quality to 1080p that might help!
If you are familiar with the navigation on Figma, just listening already guide you where you need to go
@@marckobuendicho3883 I know the interface well. I can't see the numbers. That's the problem.
your voice not clear at all 😩😫
Try the other video i've done, the concept and the techniques are pretty similar ruclips.net/video/_gBeB3BM-dc/видео.html and let me know if you have any questions.
This guy sounds like he's falling asleep
Nice comment, i hope the tutorial was helpful for you! 😁
this dude talks like my dentist
🤣🤣🤣 I hope you like your dentist 🦷 thanks for your comment. 👍