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.
I should also mention, all artboards are the exact same size. The interactions between artboards are a simple “click > next screen” moving horizontally left to right through each row and then down to the next one, left to right, repeat…
It’s not immediately clear how the keyboard navigation works. If there is no prototype flow, Figma will just order the frames according to their canvas coordinates. You will also see frame numbers in the presentation.
If there is a prototype flow, Figma will try to follow the flow. If you have multiple connections from a frame, Figma will pick according to coordinate rules again.
If you want to make your presentation into a slideshow, just remove your connections and place your frames in an orderly line, or override the keyboard behavior with your own interactions. The following interaction will disable the right arrow behavior:
Where are you seeing the numbers on the presentation? I don’t see that on my end.
I’ve been able to narrow the issue a bit. I have a title screen that jumps to different sections. Similarly on each screen there is a Table of Contents link that jumps back to this title screen.
As soon as I delete this screen everything works fine. I must be missing something basic here about how prototype screens are ordered once links are established non-linearly between screens.
I re-ordered all of my screens so they are in a line going left to right, but the issue of jumping screens when pressing the arrow keys persists unless I delete the table of contents screen.
Ok, thank you for your response. I will add the arrow connections individually and see if that fixes the issue. If not, I’ll make another post because I think I’ve pinpointed the issue a bit more.
I believe I’m having this same issue–frames are ordered in a row from left to right and I expect to be able to use the arrows / arrow keys to move between them in prototype mode. It’s not working and I don’t know how to get it to start working.
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.)
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.
