Prototype mode skips connected frames when using arrow keys

Hi,, ​@Anna_Paramonova 👋 Welcome to our community! Prototype flows acting up across multiple files usually points to something repeatable — which is good, means we can probably pin it down.

Could you grab a screen recording? Screenshots work too. Expanding the Prototype tab in the right sidebar before you trigger the issue is helpful for “seeing” what’s happening.

If it's already cleared up, no need — just let me know. Talk soon! — Jaycee

Hi ​@Jaycee Lewis,

Thanks for your reply. I’ve attached a screen recording here.

In the example, there are five frames connected within one flow. One of them is connected as an overlay, and the others use “Navigate to” interactions.

The clickable prototype itself works: when I use the connected buttons/areas, I can access all frames. The issue happens only when I navigate through the flow in Prototype View using the arrow keys — then only some frames are shown, while others are skipped.

As far as I remember, it used to be possible to go through all frames connected within one flow using the arrow keys in Prototype View, so I’m not sure why this is happening now.

Thanks!

Hi ​@Anna_Paramonova! Stepping in for ​@Jaycee Lewis.

Thanks for the video - it’s super helpful to see what you are describing with your actual file and I can see why it’s a bit confusing. I did some digging on our end and found that we fixed a bug that I think has caused the change in behavior for you, along with a solution you can try. The bug would cause using the next/prev navigation to sometimes behave like a slideshow (what you were expecting), and sometimes follow interaction flow (which is what was intended). With that bug fixed, navigating with the arrow keys will follow interaction flows in specific, which I think is why in your video when you use the next key on the navigation frame it follows the interaction to the karte frame.

For a solution, you’ll want to add the following interactions to each frame:

1. On KeyPress (Left Arrow) -> Navigate To (destination is the frame to the left)
2. On KeyPress (Right Arrow) -> Navigate To (destination is the frame to the right)

While this requires adding additional interactions, it can also give you extra control over what order these are in; this can be helpful on more complex prototyping where you may want to organize them in different ways on the canvas.

Let me know if I’ve misunderstood what you are seeing, or if you see something else unexpected after adding those additional interactions. Cheers!

Hi ​@adamsmasher ,

Thanks a lot for looking into this and for the explanation.

I still have two things I’m not fully clear about.

First, in my example, the frame “Ertrag vgl. Prognose” is also part of the same flow. It is connected from the previous frame “Navigation - mit Dropdown” via an interaction, and it is also placed on the canvas before the “Karte” frame. The “Karte” frame is connected from the same previous frame as well. So if the arrow-key navigation follows the interaction flow, why is one of these connected frames shown and the other one skipped?

Second, I’m trying to understand the intended purpose of the visible left/right arrow navigation in Prototype View. If the arrows only follow specifically defined keypress interactions, then I understand that I can manually add “On KeyPress → Navigate to” interactions to control the order. But in that case, what are the built-in arrows in Prototype View meant to represent? I had expected them to allow users to go through all frames connected within one flow, especially when all frames are part of the same prototype flow.

Could you clarify how Figma determines which connected frame is shown next when using the built-in arrow navigation, especially when multiple frames are connected from the same screen?

Thanks!

Not a problem, ​@Anna_Paramonova! The answer to both your questions is related so I’ll try and answer them together. 

It’s my understanding that adding the keypress interactions is to make sure an interaction flow exists that keyboard navigation in specific can use when you are presenting the prototype; clicking the built-in next and previous buttons with a mouse will follow the interaction flow as well, but would ignore the interactions that require a keypress unless that’s the only interaction in that step of the flow. 

If you have a frame that has two or more interactions that go to other frames, one is a keypress and the others are not, and you are navigation the presentation with a keyboard, then it should follow the keypress interaction. This could mean that it skips a frame that you expected it would show. Having said that, though, I’d really need to see the interactions to know if this is what is happening and intended or if something else is happening. 

Does this make sense?