Navigations: Mobile Menus - A Deep Dive into Framer's New Features

Introduction

Framer has introduced new features designed to improve mobile navigations. These features are particularly useful for ensuring that navigation menus are responsive and adapt well to different screen sizes, especially mobile devices.

🚀 Ready to elevate your design game? Dive into Framer now! 🚀

Table of Contents:

1. Introduction to Framer's June 2024 Update
2. Speeding Up Page Creation
3. Enhancing Effects Reliability
4. Resolving Layout Issues
5. Noteworthy Bug Fixes
6. Scroll Sections Improvements
7. Instagram Component Fix
8. Conclusion: The Impact on Your Design Workflow

Creating a Mobile Navigation Menu

Starting with a Basic Navigation Component

Initially, Framer have a simple top bar navigation component that scales down nicely to a tablet size. However, on a phone, the links get cut off. To address this, they need to design a mobile navigation menu.

Designing the Mobile Navigation Component

1. Editing the Component: Double click to edit the component. You should have your desktop variant set up.
2. Adding a Hidden Menu Icon: There is a hidden menu icon next to the logo. This is contained in a shared stack called 'top'. This will be stretched out on mobile.
3. Setting up Links: There is a stack called 'links' that contains all the links horizontally distributed with a 20-pixel gap. They all have placeholder links pointing to framer.com. This stack also contains a hidden grid that contains a few images that will resurface on the phone menu.
4. Adding a Second Variant: Add a second variant for the mobile version. Rename it to 'phone' and set the width to 390, matching the default phone breakpoints in Framer. Set the height to fit content and the direction of this stack to be vertical.
5. Configuring the Menu Icon: Find the hidden menu icon and make it visible. Stretch out the stack by setting the width to fill and the distribute property to space between.
6. Configuring the Links: Set the width to fill, direction to vertical, align to start, gap to 10, and add some padding. Select all the links and give them a different text style that simply increases the font size.
7. Bringing Back the Grid: Set the grid to visible.
8. Adding a Third Variant for Expanded State: Add a third variant called 'phone open'. This will be used for the expanded state. Set the menu icon to the close variant.
9. Animating Between Variants: You can now start animating between these two variants. The trigger of this animation is the menu icon.
10. Testing on Mobile Devices: It's important to test the navigation on actual mobile devices to get a real sense of the scrolling experience.

🎨 Unleash your creativity with Framer's latest features! Get started here! 🎨

Framer Updates: 2024

Framer has released its 2024 update, which focuses on improving quality and reliability. The update addresses several small issues that can significantly impact the daily experience of using Framer. The update makes creating new pages faster, enhances the reliability of Effects, and resolves numerous intricate layout issues.

Key Highlights

• Faster Page Creation: Creating brand new Web and Canvas Pages is now significantly faster, enhancing the workflow for designers.
• More Reliable Effects: The reliability of Effects has been improved, especially Appear Effects triggered by Scroll Sections which previously animated out unexpectedly.
• Layout Issues Resolved: Numerous intricate layout issues have been fixed, including issues with layers in a Stack with padding getting incorrect width, and issues with layers with aspect ratios being incorrectly centered.
• Bug Fixes: A plethora of bugs have been fixed, including issues with ⌥ dragging breaking the duplicated layer, buttons having the wrong Fill color on publish, and issues with uploading images when working in Safari.
• Enhanced Scroll Sections: Fixed a bug where Variant Effects could not replay in a Scroll Section and Scroll Speed set to 1% behaving as 100%.
• Improved Component Functionality: Fixed issues with creating a Component breaking the Close Overlay action and Scroll Section ID being stuck on the Frame after componentizing it.
• UI Improvements: Fixed issues with corner radii not matching on dropdowns and selection controls on Canvas Pages not updating.
• Instagram Component Fix: Fixed a bug causing the Instagram component to break its embeds.

Detailed Changelog

• Creating brand new Web and Canvas Pages got a lot faster.
• Fixed a bug where ⌥ dragging would break the duplicated layer.
• Fixed an issue where a button would have the wrong Fill color on publish.
• Fixed Appear Effects triggered by Scroll Sections animating out unexpectedly.
• Fixed a bug where switching sizing options would keep decreasing width.
• Fixed a bug where layers in a Stack with padding would get incorrect width.
• Fixed a bug where you could not Upload Images when working in Safari.
• Fixed a bug where Variant Effects could not replay in a Scroll Section.
• Fixed a bug where Scroll Speed set to 1% would behave as 100%.
• Fixed a bug where Fit Text could be accidentally applied to CMS Content.
• Fixed a bug where invisible layers could reset a Stack’s height to fixed.
• Fixed a bug where a ghost layer could appear after moving components.
• Fixed a bug where layers with aspect ratio were incorrectly centered.
• Fixed a bug where an Overlay could be permanently visible in a webpage.
• Fixed Scroll Section ID being stuck on the Frame after componentizing it.
• Fixed a bug where corner radii would not match on dropdowns.
• Fixed a bug where selection controls on Canvas Pages would not update.
• Fixed a bug where clicking on Start with AI was impossible after an error.
• Fixed a bug where z-index would disappear when creating a Component.
• Fixed a bug where creating a Component broke the Close Overlay action.
• Fixed a bug causing the Instagram component to break its embeds.

💡 Discover the future of design with Framer. Click here to explore! 💡

Key Features

• Max Height: Set a max height to ensure that the menu never exceeds the height of the viewport on any device.
• Overflow Scroll: Set overflow to scroll on the entire phone open variant.
• Over Scroll Property: Set the over scroll property to 'contain'. This ensures that you can freely scroll the mobile menu without also scrolling the page behind it.
• Improved Previewing Experience: Framer has improved the previewing experience of interactive components. You can now freely preview height animations right from within the component canvas.

Conclusion

Framer's new features including viewport support in components, the over scroll property, and the improved previewing experience allow designers to create high-quality mobile menus directly in Framer. These features are essential for delivering an exceptional user experience,especially on mobile devices where screen real estate is limited.

With the ability to create responsive navigation menus that adapt to different screen sizes, designers can ensure that their websites and applications are accessible and user-friendly across all devices.

The introduction of these features in Framer demonstrates the tool's commitment to empowering designers with the tools they need to create stunning and functional designs.

🛠️ Build stunning designs effortlessly with Framer. Jump in now! 🛠️

Frequently Asked Questions - FAQ's

Why is Mobile Navigation Important?

Mobile navigation is crucial because a significant number of users access websites and applications through mobile devices. With the growing prevalence of smartphones and tablets, ensuring that your site is easily navigable on these devices is essential for user retention and engagement. Moreover, Google considers mobile-friendliness as a ranking factor, so optimizing your mobile navigation can also improve your site's SEO.

What is Framer and How Can It Help in Designing Mobile Navigations?

Framer is a powerful tool that allows designers to create responsive and interactive web designs. With its latest features, designers can easily create mobile navigation menus that are both visually appealing and functional. The tool offers various features like viewport support, over scroll property, and an improved previewing experience which are essential for designing high-quality mobile menus.

How Do I Make My Mobile Navigation Menu Responsive?

To make your mobile navigation menu responsive in Framer, start by creating a basic navigation component. Then, add a second variant for the mobile version. Configure the menu icon and links to adapt to the mobile screen size. You can also set a max height and overflow scroll to ensure the menu doesn’t exceed the viewport. Finally, animate between the normal and expanded states of the menu for a smooth user experience.

What is the Over Scroll Property in Framer?

The over scroll property in Framer is used to control the behavior of scrolling past the boundary of a scrolling area. By setting the over scroll property to 'contain', you can allow users to freely scroll the mobile menu without also scrolling the page behind it. This makes for a much better user experience, especially on mobile devices where screen space is limited.

Can I Preview My Mobile Navigation Design in Framer?

Yes, Framer has an improved previewing experience that allows you to freely preview height animations and other interactive elements right from within the component canvas. This is particularly useful for testing how your mobile navigation menu will look and function on actual mobile devices.

Is Framer Suitable for Beginners?

Framer is user-friendly and suitable for both beginners and experienced designers. It offers a range of features that are intuitive and easy to use. Moreover, there are numerous tutorials and resources available online to help you get started with Framer.

How Does Mobile Navigation Affect SEO?

Mobile navigation directly impacts user experience, which is a critical factor in SEO. Google has made it clear that mobile-friendliness is a ranking factor. A site with optimized mobile navigation is likely to have lower bounce rates and higher user engagement, which can contribute to a higher Google search ranking.

What are Some Best Practices for Mobile Navigation Design?

• Keep it simple and intuitive.
• Make sure that the touch targets (buttons, links, etc.) are large enough to be easily tapped with a finger.
• Use standard icons for the menu (like the hamburger menu).
• Keep the navigation menu short and prioritize important links.
• Use animations sparingly to ensure smooth performance on mobile devices.

‍