Skip to main content
William_Sexton
July 3, 2023
Question

Can't get multiple actions to work when combined with variant interaction

  • July 3, 2023
  • 25 replies
  • 8549 views

I have a button component with the typical default, hover and active states for mouse over animation, nothing special. I want to click this button and:

  1. Navigate to a new frame
  2. Open an overlay on this frame.

If I map multiple On Click actions to a static element then this works. As soon as I try to map these actions onto a button component, only the first action of navigating to a new frame works. So I can’t get it to work on a hover animated button and I have no idea why this would be the case. I don’t have any conflicting actions with the danger icon on anything. Please help! Thanks.

Edit: To clarify, I even tested this with a component that had the 3 button states but didn’t have any prototyping links between the states in the component and it worked just fine. As soon as I added a link to a hover state variant the multiple On Click actions broke.

    This topic has been closed for replies.

    25 replies

    Show previous replies
    Thiago_Vieira1
    Thiago_Vieira1
    New Member
    November 6, 2024

    I am struggling with the same issue.
    The multiple actions feature simply doesn’t work.

    On a Toggle Switch component (with no state changes) inside an overlay I added “On Click” with the actions “Navigate to” (another page) and “Opens overlay” (the same overlay with the toggle switched on).

    The “Opens overlay” action doesn’t happen.

      Andrei_Alexandru_Matei
      Andrei_Alexandru_Matei
      New Member
      March 28, 2025

      I know this is an old thread, but I managed to find a workaround:

      i.e:

      • if I have a Button with multiple states, make sure you don’t use all of the states that are provided by Figma.
        • For example just leave ‘mouse down’ as interaction if you want to integrate the button in a prototype, so don’t use in prototyping your variants.
      • use ‘mouse down’ to complete the action such as: navigate to a  page or open an overlay
      James_Touhey
      James_Touhey
      New Member
      April 24, 2025

      This is still a limitation, which is a shame. I’m still digging around trying to see how I might be able to do this with variables. For context, I wanted a button (with default-hover-pressed states) to 1) show the hover state on hover, AND 2) open an overlay on hover. 

      The best I could do was show the hover state on hover and use the “while pressed” event to show the overlay interaction. This enables me to demonstrate the effect to my client, but I have to explain how it will actually work once built!

      If the rumors are true about Figma moving into no-code territory (e.g., competing with Framer and Webflow), we’ll likely get more control over things like this. ✌

        Marian_Tester
        Marian_Tester
        New Member
        April 30, 2025

        Icon interactions:

        1. On hover change icon color (solved inside interactive icon component)
        2. Then, show tooltip (open overlay) on top of the icon.

        Anyone has a workaround for that? Even on paid seat, I can’t get it working.

        AlexisU
        AlexisU
        New Member
        July 18, 2025

        Having the same issue across a lot of situations. The common one for me is for a button which I’ve added an “on hover” “change to” interaction at the component level. I wanted to use this button to navigate to a page and show a success message (overlay - bottom left). With two effects  (1. navigate to  AND 2. open overlay) for this “on click” interaction it stops after the first effect, so no success message. The two effects worked only when I removed the component-level hover interaction for that instance.


        One workaround I have found is attaching the “open overlay” interaction to the destination page with “after delay” then I set the delay to 1ms. This doesn’t always fit the situation, since the success message does not always need to show on that page, but it works some situations where I need this pattern.

        Has anyone found work-arounds for this that they (relatively) like?

        Terms & ConditionsAccessibility statement