Prototype: disable navigating screens through keyboard (left/right buttons)

+1
That’s a major issue we experience in our team presentations and with research participants.

+1

Also I am not sure how to organize the pages within the prototype. It does not depend on the structure of the layer panel! Can someone help?

Figma gets the prototype screen order from the canvas. From left to right and top to bottom.

Yes! I just figured out that navigating with arrow keys is why prototypes don’t seem to appear in order. This is a problem. I need a way to disable this so that it doesn’t cause any further embarrassment.

I have this issue with pagination as well. My screens do not show up in the order in which I have prototyped the flow. A previously closed chat here in the forum on the same topic does not solve the issue. @tank666 states:

Change the order of the frames on the canvas in your file. Note: Figma orders frames based on their co-ordinates in the canvas. First, by their x co-ordinate from left to right, then their y co-ordinate from top to bottom. If the y co-ordinate is offset in any way, then frames may appear out of order. To fix, you can set horizontal alignment for each row of frames to align-top.

My prototype is more complex than this. I have 32 frames and nearly double that in hotspots. Horizontally aligning all the screens would make extra work and (according to numerous others in the forums) not solve this problem. I’d like to add a comment from Gavin McFarland on a 2018 archived Spectrum chat on this very topic as it perfectly mirrors my problem with this issue:

I guess I don’t understand why you would order the frames by their respective hotspots. Screens that are connected by a flow don’t necessarily follow a linear hierarchy, so I don’t know how you can predict what order is best for the author.

@Charles_Lai has a good point in that navigating linearly with arrows is often confusing for participants and does not follow the flow of the prototype desired by the designer. So, Figma, is there a way to hide the left/right arrow flow through the prototype? Or some way to manually paginate based on layer order? Or another manual way to reorder the screens that is not based on hotspots or x/y-axis positioning? Would love to know any updates on this! Thanks 🙃

You can disable key navigation by assigning unused interactions to the frame. For example:

This will prevent default behavior. It does take some manual work to set up though.

I also want to add that there’s this setting right here:

If you’re using the browser app, the URL will update so that the presentation can be shared with this setting on. I noticed that the link that you copy from the desktop app does not include the setting.

The setting should be set on the prototype itself. When i select to “disable keyboard navigation” and share the link by the Figma app, it allows the viewer to navigate via keyboard by default. If i close that prototype view and open it again now the option “disable keyboard navigation” is back to unchecked.

Whats the point in having the option if it doesn’t do anything and doesn’t save the state?

Big +1 on this. I prototype for TV apps where communicating accurate behaviors of the left/right/up/down keys is essential. Some sort of setting in the Prototype panel at the Flow level to shut down all default interactions would be great.

@tank666 The problem is that it isn’t enforced if you share the link from the app.

@Figma_Support would this be considered as a bug, given that the desktop app isn’t adding the ‘&disable-default-keyboard-nav=1’ to the url string when creating the prototype share link?

Hey @Figma_Support is there anybody looking into this? This seems like a major bug. You should be able to share a prototype w/settings that you decide.

bump.

I am doing a lot of keyboard-driven prototypes, and requiring them to be published via web so that my testers don’t need to modify the prototype settings themselves is an inconvenience at best, and embarrassing as a default if/when I forget.

I wonder why this has not been fixed yet? It’s nuts

Hi, still the prototype setting is not set when prototype is shared or uploaded in a usability test application. Especially the most important one is disabling the keyboard navigation . Please fix this.

I’m not sure if it is what you’re looking for, but I faced the problem that all my screens of mobile app are simply from one to another by tapping on the sides (same as by arrow keys) and this option “Disable keyboard navigation” is not the solution cause you still able to see all the screens.

I was messing around with the some options and I FOUND THE SOLUTION. You need to create Flow! Select the first screen, on the panel click + on the Flow starting point and voila!

I think the main logic of the Figma is to navigate through the screens in Prototyping just to be able quickly inspect some stuff without hopping back to Design file, but if you want to have strict direction from one screen to another as you see it by your site map, you need create Flow, that disable this navigation feature.

I had this issue and fixed it.

Make sure your first screen in the prototype uses a Flow starting point.

Happy prototyping!