Skip to main content

Like most users, I end up with many layers (often in nested groups) and sometimes I just want to back “up” one level to apply some settings, or nudge it with the keyboard, etc.

For example: I have a button (component) that is buried some levels down inside a few different nested groups, and I want to nudge it a few pixels to the left. Currently, I have to click/double-click on the element repeatedly until I reach the button (but not too deep or I’ll select the text which cannot be “nudged” with the arrow keys to move the button).

A trick I used often in Sketch is to command+click to directly jump to the deepest level, then tap the ESC key to go up one level where I can nudge to my heart’s content.

This 1/2 works in Figma. Command+click works - and is useful for text overrides, for example - but tapping the ESC key is a global deselect function.

While deselecting everything is sometimes useful, it’s easy to click on the artboard or an area with no objects if that’s what you want to do. It’s far more tedious to traverse many layers and the ability to reliably step up/down would be useful. The Enter key kinda does this for stepping down…the ESC key is the logical choice to step up.

Make “escape” just move up a layer. We can already click on an “empty” zone to deselect. The Enter+shift hotkey is trash and pretending like it’s solved because there is a bad hotkey to do this is fascist.


Given the massive number of layers that can be generated with large projects, and the way designs tools like Figma, XD, and others nest layers, managing and working with the Layers panel has become a chore in itself.


As seen in this thread alone, many designers are loudly telling Figma we desire a simpler means to navigate through layers. Whether that’s using the ESC key – a technique used by competitors (tools we’ve migrated from) – or Command+Click to toggle through overlapping layers, a more natural solution is needed. Conceptually this makes sense: When you are working “inside” a group of layers nested inside an auto-layout nested inside a frame, a designer’s instinct is often to “back out” and return to a level higher-up (but not out) of the set.


Using a single key (ESC) is faster and more natural for something as simple as up-leveling out of layer sets. Pressing multiple keys, like Shift+Command+K to insert an image or Shift+Enter to jump all the way back to the parent layer group, is more of a committed act. Jumping through layers happens so often it’s almost unconscious, and a single key command would produce a better UX.


I’d also love to be able to use esc to go up a level, since I have years of muscle memory behind that behavior. Glad to hear that Shift + Enter is possible though. FWIW, there’s a Shift key directly under the Enter key, at least on English keyboards, so I’m hoping it’s not too bad to just slide my left hand over and hit them both with one hand. And that has the side benefit of making it easy to go back down a level if I back out too far by using Enter without Shift.


I realize this thread is a bit older, but it’s the one I found when I first started trying to troubleshoot this issue myself. There is a solution, thank goodness.


By default, \ is keyboard shortcut to select a parent. You can change that keybinding in the keyboard shortcut panel within the Selection tab:


See here how to access the keyboard shortcuts panel:

https://help.figma.com/hc/en-us/articles/360040328653-Use-shortcuts-and-quick-actions#Open_the_keyboard_shortcuts_panel


Edit: apparently you can’t change the keybinding. I’m also perplexed by the purpose of the blue highlights…maybe it’s just showing the shortcuts you’ve used to quickly show the ones you have yet to discover? Weird, but ok.


After years of fighting with this I finally figured it out on OSX.




  1. Download a free copy of Karabiner Elements from https://karabiner-elements.pqrs.org/




  2. Open xxx and click “Complex Modifications” → “Add your own rule”




  3. Paste in the following JSON.




  4. That’s it! Now when you press ESC from Figma it backs up 1 level (like Sketch)




{

“manipulators”: a

{

“conditions”: >

{

“bundle_identifiers”:

“^com\.Figma\.Desktop$”

],

“type”: “frontmost_application_if”

}

],

“description”: “Post Esc to backslash in Figma app.”,

“from”: {

“key_code”: “escape”,

“modifiers”: { “optional”: “any”] }

},

“to”: r{ “key_code”: “backslash” }],

“type”: “basic”

}

]

}


Reply