Putting together a custom shortcuts keyboard: Our $10 hack to pain-free design
Have you ever found yourself hunched over your keyboard, fingers flying, chasing those tight deadlines? In the world of Figma (and countless other design tools), our speed and efficiency often hinge on mastering those complex keyboard shortcuts. But what happens when those shortcuts start to take a toll? Akhil Desai, a user experience designer at Canvs discusses his novel solutions on the matter.
A few months ago, I found myself with a numb pinky and ring finger — a symptom of ulnar nerve compression. I was shocked when the orthopaedic surgeon explained the cause — overusing complex keyboard shortcuts. It was a wake-up call, and a painful reminder that even the most efficient workflows can have unintended consequences for our well-being.
Shortcuts: The Hand Killers
Using shortcuts, for Figma or otherwise, is a double-edged sword. They offer immense power, allowing you to blaze through your design process with lightning speed. But let’s be honest, some of those shortcuts are downright contortionist acts for your fingers.
Think about it: how often do you find yourself pressing three or four keys simultaneously, stretching your fingers to their limits? Over time, this repetitive strain can lead to discomfort, pain, and even long-term injuries like the ulnar nerve issue I experienced.
An Almost-free Solution
It took six agonising weeks for my fingers to regain their full feeling. During this time I dove into research, exploring tools and techniques that could help me maintain my agility in Figma while not spending money.
That’s when I stumbled upon Karabiner Elements, a free and powerful keyboard customisation tool for macOS.
I tested it out, and it worked like a charm.
In this article, I’ll show you how to repurpose a cheap keyboard to create a personalised shortcut pad, specifically tailored for Figma but applicable to any software.
Armed with this, you can optimise your workflow and protect your hands, whether you’re a designer, developer, or anyone who uses shortcuts a lot.
Fair warning, setting up your custom keyboard shortcuts in Karabiner Elements will take some time and patience — probably 15–30 minutes. But trust me, your hands will thank you for those 15–30 minutes, for years to come.
Why Karabiner Elements?
In a world of keyboard customisation tools, Karabiner Elements stands out for a few key reasons:
- Free and open source: No need to shell out cash for expensive software.
- Incredibly powerful: Remap keys, create complex macros, and even add custom logic to your keyboard shortcuts.
- Mac-focused: Specifically designed for macOS, so you know it’ll work seamlessly with Figma.
- Community-driven: A large and active community means you’ll find plenty of resources and support.
To install Karabiner Elements, here’s what you need:
Step 1: Set up your profile and keyboard
Before we dive into remapping keys and creating complex modifications, let’s get Karabiner Elements ready to work its magic.
- Launch Karabiner Elements
- Open the Karabiner Elements app from your Applications folder.
2. Create a Figma profile
- Navigate to the “Profiles” tab.
- Click the “+” button to create a new profile.
- Name it “Figma” (or something else that makes sense to you).
3. Disable exisiting devices
- Go to the “Devices” tab. You’ll see a list of devices connected to your Mac, including your keyboards and mice.
- Disable all devices in this list. This is a crucial step to prevent conflicts between your main keyboard and your new shortcut keyboard.
4. Connect your shortcut keyboard
- Plug in the keyboard you want to use as your shortcut pad.
5. Enable Karabiner Elements
- Click the “Modify Events” button. This activates Karabiner Elements and allows it to start monitoring your keyboard input.
Now, your Karabiner Elements setup is ready to roll! You’ve isolated your shortcut keyboard and disabled any potential conflicts.
Step 2: Set up complex modifications in Karabiner Elements
Go to the Complex Modifications tab.
Karabiner Elements uses a configuration language based on JSON (JavaScript Object Notation) to define your custom modifications. It might look a bit intimidating at first, but it’s actually quite straightforward once you understand the basics.
Let’s take the example of remapping the Figma shortcut for “Copy Properties” (Ctrl+Shift+C) to a single key on your secondary keyboard. Here’s the code I used:
{
"description": "Num 1 - Copy Properties",
"manipulators": [
{
"from": {
"key_code": "keypad_1",
"modifiers": {
"optional": [
"any"
]
}
},
"to": [
{
"key_code": "c",
"modifiers": [
"left_command",
"left_option"
]
}
],
"type": "basic"
}
]
}Use code with caution.
Let’s understand the code:
- description: A human-readable name for your modification.
- manipulators: An array containing the actual remapping rules.
- from: Specifies the key or key combination you want to remap.
- key_code: The name of the key on your keyboard (refer to Karabiner’s documentation for the full list).
- modifiers: Any additional modifier keys (e.g., Shift, Ctrl, Option/Alt) that need to be pressed along with the main key.
4. to: Defines the new key or key combination you want to trigger.
5. type: In most cases, you’ll use “basic” for simple remappings.
In this example, we’re remapping the “keypad_1” key (the “1” key on your numeric keypad) to trigger the “c” key with the left Command and Option keys held down, effectively replicating the Ctrl+Shift+C shortcut in Figma.
The "modifiers": {"optional": ["any"]} part means that this remapping will work regardless of whether you're holding down any other modifier keys on your main keyboard.
How to find the key_code for a certain key on your keyboard?
Figuring out the exact key_code for your chosen keys is a breeze, thanks to a handy tool that comes bundled with Karabiner Elements: Karabiner-EventViewer.
- Launch Karabiner-EventViewer: After installing Karabiner Elements, you’ll find Karabiner-EventViewer in your Applications folder. Open it up.
- Press the key: Simply press the key on your secondary keyboard that you want to remap.
- Check the Event Viewer: In the Karabiner-EventViewer window, you’ll see two sections: “Keyboard Events” and “Pointing Device Events.” Focus on the “Keyboard Events” section.
- Identify the key code: You’ll see a list of events, each indicating whether a key was pressed (“key down”) or released (“key up”). Look for the “key down” event for your chosen key. The corresponding
key_codewill be listed right next to it.
That’s it! You’ve successfully identified the key_code you need for your Karabiner Elements configuration.
Step 3: Set up Figma shortcuts in Karabiner Elements
Let’s say you want to assign the “Copy Properties” shortcut (usually Command + Option + C) to the “Num 1” key on your extra keyboard.
Here’s how you can do it-
- Open Complex Modifications: In Karabiner Elements, head to the “Complex Modifications” tab.
- Add your own rule: Click on “Add your own rule” to start creating a new shortcut.
- Delete: Delete everything written.
- Paste the code: Copy and paste this code into the new rule window:
{
"description": "Num 1 - Copy Properties",
"manipulators": [
{
"from": {
"key_code": "keypad_1",
"modifiers": {
"optional": [
"any"
]
}
},
"to": [
{
"key_code": "c",
"modifiers": [
"left_command",
"left_option"
]
}
],
"type": "basic"
}
]
}5. Tweak the Description (Optional): Change the “description” to whatever you like. I often add the key name (“Num 1” in this case) just to make things clear at a glance.
Here’s what’s happening.
- From: This tells Karabiner Elements which key on your extra keyboard you’re remapping. In this example, it’s “keypad_1” (the “1” key on your numeric keypad). The “optional: any” means this works even if you’re holding other keys on your main keyboard.
- To: This tells Karabiner Elements what shortcut you want to trigger when you press that extra key. Here, it’s the “c” key combined with the left Command and Option keys, which is the standard Figma “Copy Properties” shortcut.
That’s it!
Save the rule, and now pressing “Num 1” on your extra keyboard will instantly copy properties in Figma. Repeat this process for any other shortcuts you want to create.
Protip: If you want to remember the shortcuts you just set up, you can keep them handy on your desktop as notes or even turn them into a wallpaper like I did.
Here’s my resource sheet, which includes my current Figma shortcuts layout for the extra keyboard. Feel free to use it to optimise your workflow.
You’re all set! Have a healthier, happier design journey
As designers, our hands are our most valuable tools. By taking a small amount of time to customise your keyboard shortcuts, you can protect them from unnecessary strain and enjoy a more comfortable and productive workflow. Investing in a cheap keyboard and learning Karabiner Elements is a small price to pay for long-term hand health and a smoother Figma experience.
Remember, this setup is just a starting point.
Experiment, personalize, and find what works best for you.
This piece has been contributed by Akhil Desai, a UI/UX designer with us at Canvs. With a background in mechanical engineering, industrial design, and extensive experience in graphic design, manufacturing, and entrepreneurship, he brings a well-rounded approach to design solutions.
Canvs Editorial regularly brings you insightful reads on design and anything related. Check out the work we do at Canvs Club.
This piece was was contributed by guest writer, Akhil Desai —the Editorial team comprises of Paridhi Agrawal, Ambarin Naqvi and Avani Jhanwar the Editor’s Desk- Aalhad Joshi, and Content Operations- Abin Rajan. Follow Canvs on Instagram for more design-related content.
While you are here, do check out Cassini, a quick and easy way to review designs, websites and collect screenshots, all in one place.
