Zoom menu/panel doesn’t follow Figma’s UX patterns or meet its high standards

One of the reasons that Figma is such a pleasure to use is that the interface manages input focus intuitively and consistently. There’s rarely a case where I feel hindered by focus management. That said, the zoom menu/panel is one such case.

  1. I expect to click on the menu button, which displays the current zoom level, to first give focus the zoom input field. However, while the input field is decorated with a blue outline as if it has focus, it does not. There is no keyboard accessible way to focus the zoom input field.

  2. I expect tabbing to move my input focus—e.g., from the input field to the first menu item (Zoom in). However, tabbing immediately closes the menu.

  3. When the zoom input field has focus, I expect Up and Down keyboard arrows to increment and decrement the zoom in 1% increments, or—if I hold down the Shift key—by 10% increments. Just like every other numerical input field. However, the Up and Down arrow keys move focus to the last and first menu items, respectively. (BTW, addressing this might satisfy other users’ requests for more granular zoom increments, at least in part.)

  4. When the zoom input field has focus, I expect the Escape key to close the menu and restore whatever focus was in effect prior to opening the menu. However, the Escape key only closes this menu if the zoom input doesn’t have focus. There are two ways to dismiss the menu at this point: either click outside of it (and lose your layer selection) or use the Up or Down key to move focus to a menu item before pressing Escape (however, no other menu or panel interaction works this way).

While the zoom menu/panel isn’t something I interact with all of the time, it would be helpful if it followed the same interaction patterns and standards that make the rest of Figma such a smooth experience.

Thanks!

You could address this issue by using a combo box instead of a menu button. That is, the current zoom level could be a input field in the toolbar separate from the menu caret (⌄) button. That way, you don’t have to mix an input field into what’s otherwise a typical menu (and likely the reason that the input field doesn’t work as expected in this context).

1 Like

Thanks for the feedback, Mikol!

We’ll pass this onto our team for future consideration.