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

Actions menu
Actions menu

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

Configuring the launch of the program
Configuring the launch of the program

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

Setting up a button that will create components
Setting up a button that will create components

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

Configuring Multi key to run the Contrast plugin
Configuring Multi key to run the Contrast plugin

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. СonfigureKeystrokes 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 Down and Up. First, add the Ctrl + / shortcut to invoke Quick actions. The keys will appear as ControlKey and OemQuestion. Then, symbolically enter the name of the plugin CONTRAST and complete the entry with the Enter key. We save the configuration and check the button operation.

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)

Button assignment
Button assignment

Description of buttons

  1. System buttons – controls multimedia and computer power

  2. Launch buttons for commonly used plugins

  3. Font customization buttons and Figma panes toggling

  4. A large group of buttons responsible for aligning objects

  5. Working with Components and Zoom Frames

  6. Grouping, duplicating and copying objects

The unnumbered buttons are responsible for working with images and layers.

Client side test

Client side test
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.

Similar Posts

Leave a Reply