Figma ♥ AutoHotKey

An illustration of a cat with the hotkey "ctrl+zzz"

I found out about AutoHotKey last week because I was looking for a lightweight alternative to Logitech Options. My plan was to remap the buttons on my mouse and be done with it. But after going through the AutoHotKey tutorial, I realized that it’s actually much more powerful than I thought. It got me excited because I felt like it could open up a whole world of customization possibilities to me.

The first thing I wanted to do with it was to improve my design workflow on Figma because I use this app quite a bit. To localize my hotkeys to Figma, I put this directive at the top of my Figma.ahk file:

; Look for Figma.exe
#IfWinActive, ahk_exe figma.exe

This means that everything written below this line will only apply to Figma.

Fast toggling between tools

Toggling between the Hand tool and Move tool.

I switch between the Hand tool (h) and the Move tool (v) a lot, but I often find myself looking down to readjust my hand on the keyboard because my left hand would rather hang out around the Ctrl and Alt keys area.

I figured it would be easier if I could switch between the tools with just my mouse. So I mapped the 4th and 5th extra buttons to h and v in AutoHotKey and that allowed me switch tools using my thumb. In AutoHotKey, these buttons are XButton1 and XButton2 so all I did was to point them to h and v respectively.

The v and h keys are now toggled using my thumb. Much easier!
; Hand Tool
; Trigger: 4th mouse button
XButton1::h

; Move Tool
; Trigger: 5th mouse button
XButton2::v

Switching between tabs

Moving between two tabs.

When I’m designing, I often have two tabs open: one file has the components (the component library) and another file has the instances. I move between these two files often which is why I want tab switching to be as effortless as possible.

I know that there are a few ways to switch tabs on Figma, but unfortunately none of them feel fluid to me. After some experimentation, I ended up mapping the left tilt of my scroll wheel to Ctrl + Shift + Tab and the right tilt to Ctrl + Tab. It’s simple, but it works wonderfully. It basically lets me switch tabs with just one finger!

The middle button can tilt left and right so I mapped that to switch between tabs.
; Move between tabs
; Trigger: Left and right wheel tilt
WheelLeft::^+Tab
WheelRight::^Tab

Running Figma plugins

Running quick actions and launching the Find and Replace plugin.

As far as I can tell, there’s no easy way to map a specific Figma plugin to a keyboard shortcut on Windows (you can do it on macOS though). The fastest way that I can think of is through “quick actions” which is triggered by pressing Ctrl + / and then typing in the plugin name. That got me thinking … maybe I could let AutoHotKey run quick actions and type in the plugin name for me?

This is where I started to see the power of AutoHotKey. It doesn’t just let you map a set of buttons to another set of buttons—it can also do any sort of arbitrary action for you! With my setup, whenever I press Ctrl + F, AutoHotKey runs the Find and Replace plugin by doing the following:

  1. Presses Ctrl + / to bring up quick actions.
  2. Waits a little bit because the quick actions search bar doesn’t show up instantaneously.
  3. Types in “find and replace” to bring up the plugin.
  4. Presses Return to run the plugin.

It’s hacky, but it works! I also have Component Page plugin mapped to Ctrl + Alt + K and Similayer plugin mapped to Control + Alt + F.

; Function to run Figma Plugins
FigmaPlugin(searchQuery) {
	; This triggers Quick Action
	Send, ^/
	; Issues come up when things are typed instantaneously
	Sleep 500
	; Search for the plugin
	SendInput, %searchQuery%
	Send, {Enter}
}

; Run the Find and Replace Plugin
; Trigger: Control+F
^f::
FigmaPlugin("find and replace")
return

Super Nudge

Notice the X and Y values incrementing by 100 pixels.

Figma lets you move a selection with a keyboard: pressing the arrow key moves the selection by 1px and pressing the arrow key while holding down Shift moves the selection by 10px. But what if we want to move the selection over a larger distance?

I saw the question on Figma’s forum, and I wanted to see if I can do it myself with AutoHotKey. After a bit of research, I learned that you can specify the number of key presses with a one liner—no looping needed! Here’s an example: if I wanted to hold Shift and press the left arrow key ten times, I can type in Send, +{Left 10}. That’s it. Then I mapped this to caps lock because I almost never use that key:

; Nudge selection 100px to the top/bottom/left/right
; Trigger: CapsLock+[Up/Down/Left/Right]
CapsLock & Left::Send, +{Left 10}
CapsLock & Right::Send, +{Right 10}
CapsLock & Up::Send, +{Up 10}
CapsLock & Down::Send, +{Down 10}

What’s next

It’s only been a week, but I feel like I’ve already improved my workflow thanks to AutoHotKey. I’ll definitely be tweaking things as I go but for now I feel like I’m in a good place with it. My AutoHotKey scripts can be found here.

Screencast showing tool switching (using extra mouse buttons), tab switching (using middle button), and plugin launching (using hotkeys).