Hello, WebSensePro enthusiasts! Welcome back to another exciting tutorial on our channel. I’m Nida Shaikh, your co-host at WebSense Pro, and today we’re diving into the world of Figma to create a sleek Uber-style navigation menu. If you’re a Figma beginner, this tutorial is tailored just for you.
Building the Foundation
Our navigation menu begins with selecting a frame. Opt for the desktop version, and let’s create a rectangular container. Duplicate it with Ctrl + D, adjust the width to 1280, and align it center. This container will be the canvas for our navigation menu.
Now, let’s add text. For our Uber-inspired navigation, we’ll be crafting options for ‘Company,’ ‘Product,’ ‘Safety,’ and ‘Login.’ Duplicate the text with Ctrl + D as needed.
Crafting Icons
Icons add visual appeal. For the Uber icon, use ellipses and lines. Group them and adjust their sizes and positions. Repeat the process for the ‘Product’ and ‘Login’ icons, ensuring a consistent design language.
Styling and Grouping
Apply colors to the rectangles and icons. Group related elements using Cmd + G for a more organized structure. Adjust text sizes for visual balance, and ensure the spacing is consistent.
Creating Hover Effects
Give your navigation menu a dynamic touch by adding hover effects. Use rectangles with curved edges to highlight the selected option. Adjust layer order if needed for better visibility.
Conclusion
I hope you enjoyed this tutorial on crafting an Uber-style navigation menu in Figma. If you found this video helpful, don’t forget to like, comment, and subscribe to our channel. Your feedback fuels our creativity, and we’re eager to bring you more insightful Figma tutorials.
