Figma's Shortcuts

Notes

Figma makes heavy use of modifier keys.

Modifiers are not used for “tools” like for R rectangle or P pen, except for ⇧ which can provide a related tool, like ⇧P pencil.

Related functions usually include the same modifier keys. For example, create component is ⇧⌘K and break component is ⇧⌘B.

It seems like some shortcuts were taken directly from Adobe products - a smart move. E.g. ⌘Y for outlines.

Important OS/Browser shortcuts seem to be avoided: ⌘W, ⌘Q, ⌘L (focus address field), ⌘N

Sometimes extra modifiers are added or used to avoid collisions. ⇧⌘L locks a layer without colliding with ⌘L. And ⇧H flips horizontally while avoiding ⌘H for hide. The inverse ⇧V flip vertically is grouped for semantic ease, also avoids ⌘V paste.

Figma provides a large number of shortcuts for fine control - things like font line height or object alignment.

Thoughtful controls for navigating the UI

Efficient use of keys - ⌥ 0 1 2 (nav) is totally different than ⇧ 0 1 2 (zoom) or 0 1 2 (opacity). And ⌘ 0 1 2 on the browser app is reserved for tab navigation, but the desktop app also has tabs, so it actually maps well.

I think they are following Apple’s guidelines sorta: Prefer ⌘ Command, then ⇧ Shift, then ⌥ Option though sparingly. Let’s take the case of number keys. First order actions get ⌘ - so ⌘0 1 2 control tabs, which matters most in a browser. Second order get ⇧ - ⇧0 1 2 control zoom, which is maybe most important to an editor. And third is ⌥ which controls navigation in the UI.

Organization

Essential

Tools

View

Zoom

Text

Shape

Selection

Cursor

Edit

Transform

Arrange