Framer Dynamic Filters: A Complete Guide to the New CMS Update

Framer has officially introduced a massive update that many designers have been eagerly anticipating: Dynamic Filters.

This new feature allows you to add powerful, fully customisable filtering controls to your CMS collections, making it much easier for visitors to navigate your site.

Whether you are a professional designer, a template designer or just starting your journey with Framer, this update significantly changes how you can present and categorise content.

By removing the need for complex workarounds, Framer has made advanced site functionality accessible to everyone.

The End of Complex Workarounds

Before this update, creating category filters often required designers to set up complicated systems using various component variants.

This was a time-consuming process that could be difficult to manage as a project grew in size.

Now, that complexity has been replaced by a streamlined, "dynamic" menu within the filters section.

You can simply select your collection list, navigate to the new dynamic menu, and choose the filter type you need. These filters work instantly without any extra configuration, meaning you can focus more on the visual design of your site rather than technical troubleshooting.

A Variety of Filter Controls

One of the most impressive aspects of this update is the variety of controls you can now add to your pages.

You are no longer limited to a single type of interaction; instead, you can mix and match different styles to suit your specific project.

• Search Fields: you can add a search field that allows users to type in keywords and see the collection items update in real-time.

• Dynamic Tabs: these are perfect for switching between broad categories, such as blog topics or project types.

• Dropdown Menus: if you have a lot of categories, a dropdown is a space-efficient way to let users select an option.

• Checkboxes and Toggles: for sites where users might want to select multiple criteria at once (like choosing different difficulty levels or tags) checkboxes offer a familiar and intuitive interface.

Because all of these filters are compatible with each other, your site visitors can use a combination of them to narrow down their search results to find exactly what they are looking for.

Total Design Freedom and Layout Flexibility

Framer is known for its "canvas-first" approach, and Dynamic Filters follow this philosophy perfectly.

Unlike some platforms where filters are locked into a specific sidebar or header, Framer’s new filters are not tied to any specific layer. This means you can move them anywhere on your page, allowing for incredibly flexible and unique layouts.

The customisation options are also extensive.

Since filters are treated similarly to regular canvas layers, you have complete control over their styling. You can easily change the background colour of an active tab to add contrast or adjust text colours to match your brand.

You can even add icons from vector sets to your tabs, ensuring that your functional elements look just as good as the rest of your design.

Page Variables and Query Parameters

While the setup is simple for the user, there is some clever technology working behind the scenes.

Dynamic Filters are powered by "page variables," which are automatically created when you add your filter fields. Essentially, the input field (like a search bar or a checkbox) is linked to a page variable, and the filter on your collection list is linked to that same variable. When a user interacts with the input, it updates the variable, which then tells the list which items to show.

Another brilliant technical feature is the integration of query parameters. As users apply filters, you will notice the URL in the address bar updating automatically.

This is a huge benefit for user experience because it allows visitors to copy and share a link to a specific, filtered view of your site. You can even customise what these query parameters look like in the address bar through the page variable settings.

Enhanced User Experience with Reset Actions

To make your site even more user-friendly, Framer has included a simple way to clear all active filters. By using the "Reset Variables" interaction, you can create a "Clear Filters" button.

If a user has selected several checkboxes and typed in a search term that leads to no results, they can simply click this button to reset everything and start fresh.

This ensures that your visitors never feel "stuck" while browsing your content.

Compatibility with Existing Features

Framer has ensured that Dynamic Filters work seamlessly with the tools you are already using. They are fully compatible with pagination options, including both "load more" buttons and infinite scrolling.

This means you can have a massive collection of items that users can filter through without worrying about how the page will load or perform.

Additionally, these filters work perfectly with "empty states," allowing you to design a specific message or graphic that appears when a user’s filter criteria don’t match any items in your collection.

The release of Dynamic Filters marks a major milestone for the Framer community. This update encourages you to experiment with new layouts and interactions that were previously too difficult to build.

Whether you are building a complex portfolio, a directory, or a simple blog, Dynamic Filters will undoubtedly help you create a better experience for your users. Happy building!