Control Panel for Figma with MacroDeck and Tablet
Background
The idea for the sub-panel came about when I learned about the Elgato Stream Deck controller. Stream Deck is a command panel where, using LCD keys, you can carry out many commands that are configured using proprietary software. Having configured the controller, the user starts performing the necessary actions with one click, without fiddling with the mouse on the screen. The ability to run multiple commands by pressing one key seemed interesting to me.
Then I found out that there is a software version of the controller – the Stream Deck mobile application. In this version, the buttons on the touchscreen replace the LCD keys. But 15 buttons on the screen was not enough for me. Alternatively, a program was found MacroDeck… With its help, the auxiliary panel was created.
Like all programs in this category, MacroDeck works on a client-server basis. The server part is only for Windows, the client part is only for Android 4+ (Android 5+ is required to work via USB).
At the time of this writing, a beta of the second version of the program has appeared on the Macro Deck website. It’s not very stable yet, but new functions have appeared. The version described in the article 1.3.1is now deprecated.
You can download the desktop version of the program here, mobile is installed via Google play… Installation on devices is standard and does not cause problems. But before launching the mobile version, let’s figure out how to create and configure buttons.
Basic setup
The Actions menu contains a large number of actions that are assigned to buttons. Let’s consider a few basic ones necessary to solve our problem. Other actions are configured in a similar way.
Launching programs
First, we will configure the application launch button.
in the Actions menu select System> Run program;
push Сonfigure and in the window that appears, specify the path to the executable file of the program (for Figma in Windows 10, the path will be C: Users Username AppData Local Figma Figma.exe);
To use the application icon, mark the Get icon checkbox and then save the changes;
In the Label field, you can add a label for the key, and the Icon and Background buttons allow you to change the icon and background of the button. We apply the changes and test the launch of the application by double-clicking on the button.
Hotkeys
To add a button that emulates a keyboard shortcut
in the Actions menu select System> Hotkey;
We press Сonfigure and choose the desired combination. For example, to create a component in Figma, use the keyboard shortcut Ctrl + Alt + k;
If desired, customize the appearance of the button and do not forget to save;
We check the operation of the button in the application and start planning which functions we will add first. For those who do not know, in Figma, the list of hotkeys is available by pressing Ctrl + Shift + ?.
Multi-keys
If your plans are limited to only launching actions that have hotkeys, you can skip this item. But to run plugins or perform actions that do not have a hotkey, you need to parse the multichannel setting. Their functionality consists in sequential pressing of all the keys specified during setup.
As an example, let’s set up a button that launches the Contrast plugin. There are no hotkeys to launch plugins, and the launch method via the context menu is not suitable. But there is an alternative option for executing commands and launching plugins – through the search in the Quick actions panel, called by the Ctrl + / combination.
We choose System> Multi hotkey in the Actions menu. As usual, all the fun appears after the button is pressed. Сonfigure… Keystrokes of the required keys are added via buttons Add key or Record key… When you press Add key a long menu appears, in which we select the desired key. By clicking Record key, we will see a window asking you to press the desired key on the keyboard. The second method seems to me more convenient in most cases. The pressed key is displayed in two states
The bug of this method is that if a keyboard layout is turned on that is different from the one used to configure the multi-key, incorrect characters will be entered and the command will not be executed.
With the help of Quick actions, you can also run commands that do not have hotkeys. The only difference is that instead of the plugin name, we enter the name of the required command, Copy as text for example.
Useful little things
The number of rows and columns of the grid is configured in the Grid submenu, which appears when you click on the gear icon, at the bottom of the program screen. The maximum “capacity” of the mesh is 9 × 9. If there are not enough buttons, you can add an additional panel to the Folders menu. And to go to the desired panel, create a button with an action MacroDeck> Switch folder…
All buttons can be edited by selecting the Edit item in the context menu or by dragging the required button onto the square with the Select an action … caption under the panel layout. Through the same menu, you can copy, move or delete the button.
Copying speeds up the creation of buttons of the same type. So, having created a button that launches the plugin, copy it, change the symbols of the name to new ones, change the icon and the new button is ready. The position of the button on the grid can be changed by simply dragging it onto the desired square.
There is an export function for backup or transfer of the panel to another device. To use it, click on the ellipsis icon, which is located above the panel with buttons and select Export layout… To restore, use the function Import layout…
This information is enough to create a panel with its own set of buttons. As an example, under the spoiler there is a description of my panel.
Panel Description
My first version of the panel was created for a mobile screen and a grid size of 4×6. The disadvantages of this version were the small size of the buttons and their insufficient number on one panel. Then I found an old tablet and the grid zoomed to 6×9.
Using a tablet allowed me to place all the buttons I needed on one panel, reducing the number of unnecessary switching between panels. The use of custom icons added aesthetic pleasure and convenience)
Description of buttons
System buttons – controls multimedia and computer power
Launch buttons for commonly used plugins
Font customization buttons and Figma panes toggling
A large group of buttons responsible for aligning objects
Working with Components and Zoom Frames
Grouping, duplicating and copying objects
The unnumbered buttons are responsible for working with images and layers.
Client side test
When the panel already has several buttons, you can test the work of the client side. We launch the mobile version, enter the IP address of the desktop computer (it is displayed in the upper right corner of the program) and click the button Connect (Wi-fi)… To connect via USB, you do not need to enter anything, just connect the cable and press Connect (USB)… If the connection is successful, the buttons from the root folder will be displayed on the screen and you can test the panel’s functionality in the application.
Conclusion
After finishing the setup, I was pleased with the result. The use of the panel has reduced the use of the mouse and keyboard. Subjectively, working in the application for which the panel is configured becomes faster and more convenient.
pros
Keyboard shortcuts are reduced to one click
Perform multiple actions at the touch of a button
Easy process of transferring settings between computers
Minuses
Takes time to set up and get used to
No feedback (when connected via USB, vibration can be turned on)
Hotkeys are gradually forgotten)
That’s all I wanted to talk about this decision. Thank you for your attention.
