Question

Problem navigating with arrow keys linearly through screens on prototype

Forum|Forum|4 years ago
September 21, 2022
19 replies
15104 views

Hi, I believe I’ve exhausted all the existing help articles on this.

I’m having a hard time with something that should be very basic. I have 25 or so screens, the ONLY interaction between them is that the user should be able to click and/or press the arrow key to navigate LINEARLY between them.

Sometimes it works (especially if I go slowly, it works every time). But sometimes it doesn’t, sometimes it inexplicably jumps through sections (pretty much only happens if I press the arrow keys quickly). It appears that if I click through it goes linearly every time without skipping screens. So the problem is only with the arrow keys (which I can’t disable so I need to understand the behavior before handing off to my client).

I’ve adjusted all the artboards. The desired order is Row 1 Left to Right, Row 2 Left to Right (as described in the documentation). All rows have the exact same Y coordinate. All columns have the exact same X coordinate.

I’ve spent hours on this already and this is really basic behavior so I’m not sure why it’s so hard, I want it to act like powerpoint in presentation mode.

Any help is appreciated. I can’t really share the prototype because I’m on NDA.

Ask the community

This topic has been closed for replies.

Show previous replies

A.J

New Participant

I don’t know if this is a related topic, but when prototyping tab navigation for web accessibility, we should be able to have some analog of the HTML tabindex= attribute on items, to enable easier keyboard navigation inside screens. (And, if possible, toggle a state on keyboard nav vs mouse pointer events, like showing focus states.)

Mike61

I had the same problem, so started to do this by hand and found it very time consuming, then I found Aashrey Sharma’s brilliant Prototyper plugin, Prototyper | Figma Community

With the Figma Prototype tab open
Run the Prototyper plugin
Go to the Link tab
Select top-level frames you’d like to navigate in your prototype
Select Navigate with Keyboard | Arrow Keys
Click Link Frames

Navigation direction and inputs are automatically assigned based on the arrangement of selected elements, so make sure your frames are ordered consecutively and spaced horizontally.