Skip to main content
Alex_Sweet
Alex_Sweet
September 21, 2022
Question

Problem navigating with arrow keys linearly through screens on prototype

  • 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.

    This topic has been closed for replies.

    19 replies

    Alex_Sweet
    Alex_SweetAuthor
    September 21, 2022

    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…

    Avokadomos
    Avokadomos
    Active Member
    September 21, 2022

    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:

    image

      Avokadomos
      Avokadomos
      Active Member
      September 21, 2022

      A handy tip is to also include an introduction frame which explains the interactions you’ve set up for your clients. Example:

      image

        Alex_Sweet
        Alex_SweetAuthor
        September 21, 2022

        Thanks for your response.

        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.

        Screen Shot 2022-09-21 at 10.51.31 AM

        Alex_Sweet
        Alex_SweetAuthor
        September 21, 2022

        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.

        Alex_Sweet
        Alex_SweetAuthor
        September 21, 2022

        Screen Shot 2022-09-21 at 3.10.59 PM

        I see older videos where there is a number here, has the numbering been removed in the latest version?

          Avokadomos
          Avokadomos
          Active Member
          September 21, 2022

          Yes, it changed.

          Avokadomos
          Avokadomos
          Active Member
          September 22, 2022

          I recommend making connections for left/right arrow keys to make them go where you want them.

          Alex_Sweet
          Alex_SweetAuthor
          September 22, 2022

          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.

            Jason_Wong
            Jason_Wong
            November 1, 2022

            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.

              Show more replies
              Terms & ConditionsAccessibility statement