Prototype arrow key navigation

[SLT-UX]

I have a prototype with the simple default “on click go to this screen” behavior, but also want to have the left and right arrow keys cycle through the same linear flow. Coming from Powerpoint, Invision, and most other prototyping tools, I was expecting this to work right out of the box… But instead the order seems really strange.

I tried to reorder the frames in the left panel, but that didn’t do anything. I see that I can manually add the key press to go to the linked screen, but even with 10 screens or so, it is very tedious to do (so many steps involved).

Anyone know of a good workaround to this that won’t be as painstaking?

[Ahmed_Hashim]

Bumping this up as I am also looking for a solution to this

[Vinay_S]

Same… I’m so confused something so basic is missing - or am I missing something?

[tank666]

Prototyping Flow

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. https://help.figma.com/hc/en-us/articles/360040318013-Present-designs-and-prototypes#Present_your_designs

[Marc_Hudson]

That’s very unfortunate that the arrows follow the order that frames are placed on the canvas because Figma allows you to create multiple prototype Flows. This means the arrow keys can’t easily follow a Flow without lots of re-ordering and then it will only follow a single Flow correctly and any additional Flows will be incorrect or, basically, ignored by arrow navigation… Bit frustrating, tbh, if this is indeed the case.

[robin_figma]

While the above is true. It depends if you have a Flow starting point set or not, it will behave differently for each case as noted in the linked article above (see excerpt below). Deleting my flow starting point fixed the problem for me.

Prototypes with a flow starting point

If your prototype has a starting point, Figma will create a “history” of frames you’ve visited when viewing the prototype.

• ← will go to the previous frame, if one is available.

• → will navigate to the next frame. If there is no history—like after using ←—then it will navigate to an adjacent frame you haven’t visited.

Prototypes without a flow starting point

If a prototype doesn’t have a flow staring point, 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.

• ← will go to the previous frame if one is available.

• → will navigate to the next frame. First by x co-ordinate, then y-co-ordinate.

[Akshay_Parakh]

This fixed it for me.
Thank you so much!

[Margot_Gabel]

Thanks for the clarification, one issue here is that it is impossible to keep a prototype without a flow starting point as whenever you remove it, it will come back when you start adding interaction within the prototype. I haven’t find a workaround so far…

[robin_figma]

I have the same issue. Someone has started an idea you can upvote here:

Remove auto creating flow starting points

I love the new feature that allows multiple prototypes per page. One issue I’m having with it, is it assumes I want everything to be a new flow starting point each time I don’t link something from the first flow starting page. It has a very linear mindset. When I work/prototype I tend to work on a section, then link it back and that creates many flow starting points on accident and I have to delete them. It’d be nice if either - it only created the first one, and doesn’t assume you want many o…