Why Is “On Click” Disabled in Figma? How To Fix

Figma is a popular vector graphics editor and prototyping program that attracts thousands of users due to its easy to navigate interface. Recently, it rolled out a new feature that allows users to create interactive components and bring their prototypes to life. However, there seem to be several glitches, and many users have reported difficulty activating the “on click” interaction.

Unfortunately, Figma offers no built-in way of resolving the issue since the feature is relatively new. The good news is there are several ways to bypass the problem and enable “on click” interaction. Keep reading to learn more.

Figma Why Is “On Click” Disabled on a PC

Let’s look at how you can troubleshoot “on click” issues on a Windows PC.

Check the Main Component

Although Figma’s interactive components are supposed to work well with other elements within the program, that’s not always the case. If you’ve used the Figma web page to add interactive elements to your prototype, you’ve probably tried to test out the “on click” option.

If the interaction fails to work correctly, it’s best to check the main component. The following steps will help you tweak your main component so that it doesn’t disrupt the prototype:

1. Open your prototype and see whether you’ve included the main component in the finished result.
   
2. If the prototype contains the main component, remove it to optimize the design.
   
3. Create a new frame and place the instance of the main component inside it. Never add the main component itself, only its instance.
   

After embedding the main component inside a top-level frame, your prototype should implement the “on click” interaction without issue.

Use “Mouse Up” Instead

Another reason the “on click” interaction is disabled might be overriding components. While users expect to be able to combine several interactive elements smoothly, sometimes bugs can occur and disrupt component logic. However, dedicated Figma users have found a temporary solution they can use until Figma addresses the issue and implements a permanent update.

When building a prototype that contains the “Mouse Up” and “Mouse Down” variants, you may be tempted to add the “on click” interaction to simulate a button press. But these elements interfere with each other, and the software ignores the “on click” action. To create a functioning button click, make sure to use the “Mouse Up” option instead of “on click.”

Although this method helps you create an interactive prototype, note that it has drawbacks. When you tap and hold an area outside your instance, the cursor will lead to another “Mouse Up” action. This may not be a dealbreaker if you intend to use the “on click” component sparingly. But it’s not the most effective solution for those whose projects often involve creating menus, navigation bars, and responsive lists.

Figma Why Is “On Click” Disabled on a Mac?

Those who have trouble activating the “on click” interaction on their MacBooks are probably wondering how to enable this important element.

Here are two ways to fix it and ensure your prototype is interactive.

Keep the Main Component Out of the Prototype

Figma’s interactive components are still a work in progress, and there are bound to be some glitches. If the “on click” component fails to perform well, you may have improperly constructed the prototype. Fortunately, you can tweak the main component and allow the prototype to execute the “on click” action. The instructions below will guide you through the process:

1. Launch the Figma program on your Mac.
   
2. Go through your projects and open the prototype you wish to change.
   
3. Navigate to the main component and see whether you’ve inserted it directly into the prototype.
   
4. If the main component is inside the prototype, remove it.
5. Make a new frame and transfer the main component into it.
   

Keep in mind you should never move the original component but rather its instance.

When the main component is inside a top-level frame, it won’t interfere with component logic. You can return to your prototype and see whether it will now execute the “on click” action.

Rely on “Mouse Up” Instead

If the prototype contains several interactive components, they might prevent each other from functioning correctly. For example, interactions with “Mouse Up” and “Mouse Down” help you simulate a button click. But when you add the “on click” option, the prototype ignores it.

Figma currently has no built-in solution to prevent overriding elements. But Figma users have developed a handy workaround. Rather than including “on click” to perform a button press, add the “Mouse Up” component instead.

Although the workaround enables users to make responsive simulations, it’s not a long-term solution and has one potentially serious disadvantage. When you tap and hold an area outside of your instance, the program will generate another “Mouse Up” action when you release the cursor. If you plan on using the “on click” component once, this won’t be an issue. But it may be frustrating for users who routinely create prototype buttons, navigation bars, and drop-down menus.

Activate Your Clicks

Figma is an impressive tool, but there are many areas where it can improve its performance, especially when it comes to interactive components. While several elements disable the “on click” action, you can bypass the issue by moving the main components or using the “Mouse Up” interaction. Hopefully, Figma will soon introduce a built-in solution to smooth out the remaining glitches.

Have you had trouble using the “on click” interaction? Which of the above methods helped you resolve it? Let us know your thoughts in the comments section below.