Web Design

How to change figma’s shortcut (Zoom to ○○) to make it easier to use

figma のショートカット(Zoom to ○○)を使いやすく変更する方法

Hi there.
I’m Sato, a Web/App/UI designer.

This time, I will write about how to change the shortcut (Zoom to ○○) of figma to make it easier to use.
Sorry Windows users, this time it will be how to set up on macOS.

The “Zoom to Fit” and “Zoom to Selection” shortcuts in figma are difficult to use.

Zoom to Fit” is a shortcut that fits all artboards into the screen.
Zoom to Selection” is a shortcut that maximizes the selected objects to fit on the screen.

When I am doing design work, I often look at the whole thing, go back to the details, look at the whole thing again, and so on.
So I use these “Zoom to Fit” and “Zoom to Selection” operations quite a bit.

Of course, I also use other shortcuts frequently, so my left thumb is always on the command key.
I have to move my index and middle fingers to operate various shortcuts, but it is a pain to have to move my left hand to press shift + 1 or 2 only for “Zoom to Fit” and “Zoom to Selection”. It’s just a pain.

I think these shortcuts used to be “1” and “2” alone without auxiliary keys, but in the latest version (as of November 11, 2021), “Zoom to Fit” is set to “shift + 1” and “Zoom to Selection” to “shift + 2”, which is very It is very difficult to use.

Basically, I want shortcuts to be “command + ○○”, and I feel uncomfortable with the “shift + ○○” operation.

By the way, this “Zoom to Fit” and “Zoom to Selection” operation is a shortcut key for similar operations in other apps.

Application Zoom to Fit Zoom to Selection
Sketch command + 1 command + 2
Adobe XD command + 0 command + 3
Illustrator option + command + 0 None
Photoshop command + 0 None

Well, I can’t say that Adobe’s software is easy to use for me personally regarding these things….

In my case, I had been using Sketch for quite a while before I started using figma, so I guess it’s partly because I was ingrained with the idea that “Command + 1” for “Zoom to Fit” and “Command + 2” for “Zoom to Selection ….

Setting shortcuts in macOS preferences.

macOS has long had the ability to create your own keyboard shortcuts.
Users are free to create their own keyboard shortcuts, whether they are application-specific or common to all applications.

Using this feature, you can assign easy-to-use shortcuts to figma’s difficult-to-use “Zoom to Fit” and “Zoom to Selection” shortcuts.

Note, however, that you cannot override key combinations originally used for shortcuts in the application.

“command + 1” and “command + 2” are not available

In figma, the command + number keys are assigned as tab switching shortcuts.
Therefore, “command + 1” and “command + 2” cannot be assigned to “Zoom to Fit” and “Zoom to Selection”.

No…, do you need shortcuts to switch tabs in figma…?
Basically, I’m designing with figma and I don’t think there are many opportunities to switch tabs during design work….

Well, since that’s the way it is, let’s set it to other keys.

The combination that makes the finger movement as close to “command + 1” or “command + 2” as possible….

So I decided to set Zoom to Fit to option + command + 1 and Zoom to Selection to option + command + 2.
This is almost no different.

figma shortcut Before&After

How to set keyboard shortcuts on macOS.

The following is a step-by-step explanation of how to set up keyboard shortcuts on macOS, with images.

Procedures for adding macOS keyboard shortcuts

First, let’s take a look at the steps in a nutshell.

Open “System Preferences”
Select “Keyboard” from the list of preferences
Select “Shortcuts” from the tabs
Select “Applications” from the list on the left
Click “+” and select “figma” from “Applications”
Set and add “menu title” and “keyboard shortcut”

Let’s take a look at each step.

Open “System Preferences” and select “Keyboard”.

Select 'Keyboard' in System Preferences
Open “System Preferences” and select “Keyboard”.

Select “Shortcuts” from the tab

Select 'Shortcuts' in 'Keyboard' preferences
Select “Shortcuts” from the tabs.

Select “Applications” from the list on the left side

Select “Applications” from the list on the left.

Click “+” .

Click on “+”.

Select “Figma.app”.

Select Figma.app from the application list
Select Figma.app from the “Applications” pull-down list.

Enter the name of the menu for which you want to set a shortcut

Enter the name of the menu for which you want to set a shortcut
In the “Menu Title” entry field, enter the exact menu name for which you want to set a shortcut.
This is the menu name originally set in the application.
Note that the menu name must be entered correctly, including upper/lower case letters and spaces, or it cannot be set.
In this case, we will set “Zoom to Fit” and “Zoom to Selection”.

Settings for shortcuts

Press the key you want to set as a shortcut

Press the key to set the shortcut
Click on the “Keyboard Shortcut” input field and actually press the key for which you want to set the shortcut.
Finally, click “Add” to complete the setting.

Add shortcut complete.

Shortcut has been added
A shortcut has been added.

If you change the shortcut in this way, it will look like this, as shown in the image at the beginning of this page.

figma shortcut Before&After

Set shortcuts for other menus as needed to personalize them.

Of course, shortcuts can be set for menus other than “Zoom to Fit” and “Zoom to Selection,” so you can set shortcuts as needed to personalize the experience to your liking.

I use “Collapse Layers” a lot, so I changed its shortcut from “option + L” to “command + §”.
I also set “Command + §” for “Collapse All Groups” in Sketch.
The “§” is the top-left key on the UK keyboard.

[Postscript] figma now supports Japanese.

I haven’t used figma for a while now, but when I opened figma for the first time in a while, an update came out, and to my surprise figma now supports Japanese.
When the UI is changed to Japanese, naturally all menu names are also in Japanese, and the shortcut setting names are also changed.

English Japanese
Zoom to Fit Automatic Zoom Adjustment
Zoom to Selection Zoom to Fit Selection
Collapse Layers Collapse Layers
Collapse Layers

Now, I have written about how to change the shortcut (Zoom to ○○) in figma to make it easier to use.
How was it?
I would be happy if it was of any help to you.
See you next time.