When using a Figma prototype, there should be a way to disable the ability to navigate through screens via left & right keyboard buttons. Some research participants are inadvertently skipping through the prototype this way, rather than clicking hotspots.
Is anyone using a plugin or workaround to help solve this?
+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!
