Toplist
- Mistakes
- Beginner
Toplist
- Mistakes
- Beginner
Toplist
- Mistakes
- Beginner
5 Framer Mistakes You Should Absolutely Avoid
In this Framer tutorial, I’ll tell you about 5 of the biggest mistakes beginners make that literally drive me crazy anytime I see them. And I’ll show you how to avoid them. Pay close attention to these, as often, it's the small details that can make or break a website.
Posted by
Nandi
Table of contents
1. Forgetting to disable hover states on mobile
This one’s a classic! Hover states work great on desktop, but on mobile? Not so much. Here’s the deal: mobile devices don’t have a mouse that’ll rest on a component to see the hover.
If you leave hover states enabled, they get triggered when a user taps an element, which can lead to awkward transitions.
1. Forgetting to disable hover states on mobile
This one’s a classic! Hover states work great on desktop, but on mobile? Not so much. Here’s the deal: mobile devices don’t have a mouse that’ll rest on a component to see the hover.
If you leave hover states enabled, they get triggered when a user taps an element, which can lead to awkward transitions.
1. Forgetting to disable hover states on mobile
This one’s a classic! Hover states work great on desktop, but on mobile? Not so much. Here’s the deal: mobile devices don’t have a mouse that’ll rest on a component to see the hover.
If you leave hover states enabled, they get triggered when a user taps an element, which can lead to awkward transitions.
Mobile hover transition mistake.
Mobile hover transition mistake.
Mobile hover transition mistake.
How to avoid this mistake:
Create a mobile variant of your component without the hover state.
Apply this variant to the phone breakpoint.
This little tweak ensures a smooth and intuitive user experience on mobile.
2. Not disabling user-select on text layers
Ever clicked on some text and found it gets highlighted when you didn’t mean to? That’s what happens when user select is left enabled on text layers within interactive elements.
How to avoid this mistake:
Create a mobile variant of your component without the hover state.
Apply this variant to the phone breakpoint.
This little tweak ensures a smooth and intuitive user experience on mobile.
2. Not disabling user-select on text layers
Ever clicked on some text and found it gets highlighted when you didn’t mean to? That’s what happens when user select is left enabled on text layers within interactive elements.
How to avoid this mistake:
Create a mobile variant of your component without the hover state.
Apply this variant to the phone breakpoint.
This little tweak ensures a smooth and intuitive user experience on mobile.
2. Not disabling user-select on text layers
Ever clicked on some text and found it gets highlighted when you didn’t mean to? That’s what happens when user select is left enabled on text layers within interactive elements.
User-select text mistake.
User-select text mistake.
User-select text mistake.
How to avoid this mistake:
Find the text layer in your design.
In the right panel, set the user-select style to “none.”
By doing this, you’ll keep your interactive elements unselectable, making it look more integrated.
3. Skipping ARIA labels for icon-only elements
Accessibility is key! If you have buttons or interactive elements that only show icons, screen readers might not pick up on their function. That’s where ARIA labels come in – they provide descriptions for users who rely on screen readers.
How to avoid this mistake:
Add an ARIA label to your icon-only elements through the accessibility section in the right panel.
Describe the function of the button clearly, like "quick preview button."
This simple step makes your site more inclusive and user-friendly for everyone.
4. Not using “button” tag for non-URL elements
If you have elements that perform an action (like opening a modal) but aren’t linked to a URL, you should set their HTML tag to “button.” This helps maintain accessibility and functionality across your site.
How to avoid this mistake:
Select the element in question. In this case a button
In the right panel, set the HTML tag to “button.”
This is necessary when buttons are used to switch between variants instead of different URL’s.
How to avoid this mistake:
Find the text layer in your design.
In the right panel, set the user-select style to “none.”
By doing this, you’ll keep your interactive elements unselectable, making it look more integrated.
3. Skipping ARIA labels for icon-only elements
Accessibility is key! If you have buttons or interactive elements that only show icons, screen readers might not pick up on their function. That’s where ARIA labels come in – they provide descriptions for users who rely on screen readers.
How to avoid this mistake:
Add an ARIA label to your icon-only elements through the accessibility section in the right panel.
Describe the function of the button clearly, like "quick preview button."
This simple step makes your site more inclusive and user-friendly for everyone.
4. Not using “button” tag for non-URL elements
If you have elements that perform an action (like opening a modal) but aren’t linked to a URL, you should set their HTML tag to “button.” This helps maintain accessibility and functionality across your site.
How to avoid this mistake:
Select the element in question. In this case a button
In the right panel, set the HTML tag to “button.”
This is necessary when buttons are used to switch between variants instead of different URL’s.
How to avoid this mistake:
Find the text layer in your design.
In the right panel, set the user-select style to “none.”
By doing this, you’ll keep your interactive elements unselectable, making it look more integrated.
3. Skipping ARIA labels for icon-only elements
Accessibility is key! If you have buttons or interactive elements that only show icons, screen readers might not pick up on their function. That’s where ARIA labels come in – they provide descriptions for users who rely on screen readers.
How to avoid this mistake:
Add an ARIA label to your icon-only elements through the accessibility section in the right panel.
Describe the function of the button clearly, like "quick preview button."
This simple step makes your site more inclusive and user-friendly for everyone.
4. Not using “button” tag for non-URL elements
If you have elements that perform an action (like opening a modal) but aren’t linked to a URL, you should set their HTML tag to “button.” This helps maintain accessibility and functionality across your site.
How to avoid this mistake:
Select the element in question. In this case a button
In the right panel, set the HTML tag to “button.”
This is necessary when buttons are used to switch between variants instead of different URL’s.
Setting tag to "button."
Setting tag to "button."
Setting tag to "button."
5. Overlooking pointer events on decorative elements
I get this all the time “Nandi, I can no longer click my button on my website, what should I do?!”
This often happens when a decorative element is placed above the button, blocking the click.
How to avoid this mistake:
Select the decorative element (like an overlay).
Set the style
pointer-eventsto "none."
5. Overlooking pointer events on decorative elements
I get this all the time “Nandi, I can no longer click my button on my website, what should I do?!”
This often happens when a decorative element is placed above the button, blocking the click.
How to avoid this mistake:
Select the decorative element (like an overlay).
Set the style
pointer-eventsto "none."
5. Overlooking pointer events on decorative elements
I get this all the time “Nandi, I can no longer click my button on my website, what should I do?!”
This often happens when a decorative element is placed above the button, blocking the click.
How to avoid this mistake:
Select the decorative element (like an overlay).
Set the style
pointer-eventsto "none."
Setting pointer events to "none."
Setting pointer events to "none."
Setting pointer events to "none."
Wrapping up
By steering clear of these common mistakes, you'll ensure that your Framer sites not only look great but also provide a smooth, intuitive experience for your users.
Before we part ways I wanted to mention there is one more mistake, that might be the most important one that you have to avoid. I covered it in full in this lesson here: Avoid the #1 Rookie Mistake
Until next time!
Wrapping up
By steering clear of these common mistakes, you'll ensure that your Framer sites not only look great but also provide a smooth, intuitive experience for your users.
Before we part ways I wanted to mention there is one more mistake, that might be the most important one that you have to avoid. I covered it in full in this lesson here: Avoid the #1 Rookie Mistake
Until next time!
Wrapping up
By steering clear of these common mistakes, you'll ensure that your Framer sites not only look great but also provide a smooth, intuitive experience for your users.
Before we part ways I wanted to mention there is one more mistake, that might be the most important one that you have to avoid. I covered it in full in this lesson here: Avoid the #1 Rookie Mistake
Until next time!
