No video :(

How to Design Responsive Header Navigation in Figma - Autolayout

Подписаться 1,4 тыс.

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

50% 1

How to Design Responsive Header Navigation in Figma - Autolayout
➡️ Figma link to download the file: www.figma.com/...
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!

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

9 мар 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

Thanks for watching and sharing your experience with the shortcut keys!

@vamboo8918 8 дней назад

Good

@designleague 7 дней назад

Glad it was helpful!

@vandersonmarinho7414 Год назад

I'm Brazilian 🇧🇷 and I learned a lot from your explanation. thank you very much.👍

@designleague Год назад

Glad it was helpful!

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

Thank you soooo much for this amazing video! Finally, I got it! Good job :)

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

Thanks for your comment, glad it helped you let me know if you have any questions!

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

Thankyou for the tutorial :)

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

Thanks for commenting, i hope it was helpful to you

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

It is helpful :)

@alexsmith5868 Год назад

❤❤❤

@user-uw4rm6bn1q 4 месяца назад

thanks for your tuto

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

Thanks for your comment 😉

@pollux8132 Год назад

nice video!

@sikandarmushtaq48 Год назад

Great tutorial thank you ❤

@designleague Год назад

thank you for your comment @sikandar appreciate that :)

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

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.

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

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! 👍

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

Nice tutorial!, and don't forget to drink more water bro!

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

Thanks for your comment, happy to help! Yes, you are right i do need to drink more water. 💦 probably have to set reminders 😀

@lari7094 10 месяцев назад

Thank you so much for the video!

@designleague 10 месяцев назад

You are so welcome!

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

Hi, good aproach, but how can we check, whether it is responsive?

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

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. 👋

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

Bro ur voice sounds like Saul Goodman in quite manner

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

Never thought about that i actually searched Saul Goodman to listen it 🤣🤣🤣 thanks for your comment, appreciate it 👍

@PureToneMusic Год назад

Can you do one with how you'd add a hamburger menu for the tablet and mobile?

@designleague Год назад

Thanks for your comment, I have created a video on how to add hamburger menu for mobile devices ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GLbbHmxqj10.html

@fUzZyboY420 Год назад

where are the urls to breakout rooms? How do I get into them?

@designleague Год назад

Thanks for your comment, please see the video description you will find the figma link, you can copy/duplicate the file if needed.😊

@tsiroukismichael9606 10 месяцев назад

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 ?

@designleague 10 месяцев назад

I will create a video, on this topic how to do it step by step. Please subscribe the video will be published on monday.

@designleague 10 месяцев назад

Hi here is the new video that I have explained step by step ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zyraRIgHU_w.html please let me know if I answered your question. thanks

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

@@designleague why I cant find this video anymore?! :(

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

@@Paris_objects Hi Paris, thanks for your comment, I am not sure here is the URL: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TSs1Bx4go90.html let me know if you have any questions, happy to help :)

@Jwarddesign-ca 11 месяцев назад

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?

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

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!

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

If you are familiar with the navigation on Figma, just listening already guide you where you need to go

@Jwarddesign-ca 8 месяцев назад

@@marckobuendicho3883 I know the interface well. I can't see the numbers. That's the problem.

@SomeOne-ri1ng 5 месяцев назад

good tutorial ,but accent and pronocment could be beter

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

Thanks for your comment, valid point, I’m working to improve it hopefully it will get better over time. 👍

@ebtehals6374 20 дней назад

your voice not clear at all 😩😫

@designleague 20 дней назад

Try the other video i've done, the concept and the techniques are pretty similar ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_gBeB3BM-dc.html and let me know if you have any questions.