Shortcut machine

Have you ever wanted to do something quickly in Figma but can’t remember the shortcut? Or have you ever wanted to speed things up by having dedicated physical key for everyday actions? Well, now you can have dedicated physical keys for common shortcut keys. All you need is a midi keyboard or any sort of USB midi device with buttons on it, two opensource Software and a bit of Setup and you are good to go.

Here is what you need

The hardware — USB Midi keyboard/Controller This will act as your interface / Control surface. you can use this (opens in a new tab)

MIDI Loupe Aallows you to monitor and log MIDI messages from one or multiple MIDI devices. Download it here (opens in a new tab)

MidiStroke Converts a midi signal to Keyboard events.Download it here (opens in a new tab)

Before we start

So before we start with the Setup, we need to understand how this works.

The Midi devices send out a midi signal to the computer each time you press a key.

Midi signal from Controller to Computer T#hat signal reaches the computer, but Figma does not understand Midi (yet…) and thus can’t do anything with it.

So we need a translator that can take the midi signal and convert it into Keyboard signals.

As shown above, Midi Stroke (our translator) listens to the incoming midi signal and converts it to keyboard shortcuts that Figma understands.

So basically every time you press a key an appropriate keyboard shortcut (configured by you) will be initiated.

Let's get started

Step 0 Open Figma and open the shortcut panel and make a list of all the shortcuts you would like to have a dedicated key for.

Protip: you can find the panel in the help menu or by using the shortcut key

Step1 Connect your midi controller to the computer and make sure you have both midi loupe and ministroke installed.

Now Open MidiLoupe, select your midi device. Press a few keys to see if you are getting a signal.

Step 2 Now that we know everything is working its time to think of what key to map for what shortcut.

I did it by marking out my keyboard with a marker. (you can skip this)

Step 3 This is the most important step. This is where I will show you how to set up midi stroke to send keyboard shortcuts to Figma (Pro tip: or any app )

Open midi loupe and press the key on the midi you want to assign. you will get a message on like the one you see below.

The number immediately after “Note on” / “Note off” is the number that represents the key. Note it down, in this case, its “48”

Now open midi stroke and enter the value in the first column followed by the shortcut key in the second column.

Once you have done this open Figma and see the magic! Rinse and repeat step 3 until all your keys are mapped and you are done.

Make sure to always keep midi stroke running when you want to use midi shortcuts.

That's all Folks