Walkthrough: Figma Integration
This walkthrough shows how to use hardware to control UI in Figma by using the blokdots Figma integration.
Because of technical limitations set by the Figma API, there are certain limits to what is possible to do with this integration: The communication works only from blokdots to Figma, but not the other way around (you can’t trigger something on your hardware when a button is clicked in Figma). It is also only compatible with the canvas view of Figma, not its prototype preview. We’d be thrilled to add more advanced functionality to the integration, but unfortunately, these limits are set by Figma.
Prerequisites
This example assumes you are somewhat familiar with both Figma and blokdots.
Necessary Components
For this example you are going to need these components in addition to your board:
All of the components are included in the Grove Beginner Kit.
Project File & Assets
This file contains the finished project – if you get stuck along the way, feel free to download it and take a look!
Step by Step
1. Installing the blokdots plugin in Figma
The first thing you need to do to be able to control elements of the Figma canvas using hardware is to install the blokdots Figma plugin. Simply click the Open in Figma” button on that page.
You must make sure to use the Figma Desktop App when running the plugin: The plugin does not work in the browser version of Figma, only in the Desktop app.
Now you can copy our Figma community file so you concentrate on learning how to set up the blokdots integration, rather than worrying about naming layers.
2. Exposing the Figma layers to blokdots
In the Figma file, navigate to Plugins and open blokdots. If blokdots is open and the Figma integration is *enabled, the plugin window should look like this. If it doesn’t, make sure you didn’t jump over that last step, or try restarting both blokdots and Figma.
For blokdots to be able to manipulate a layer, that layer must be exposed by the plugin. So let’s select the layers we want to be able to control from blokdots, and press the button labeled “Expose current selection to blokdots”. In the case of this example, first, select the rectangle layer named “Bar” and press the button. Then select the text layer named “Text” and press the button again. Both layers will now appear in the blokdots plugin window. Do not close the plugin window – the integration only works as long as the plugin is active.
3. Creating the blokdots project
Let’s open blokdots. Here you can click on "Connect A New Component" and add two components: A potentiometer and the "Figma" component.
Immediately we can see, that the indicator in the slot of the Figma integration has turned green and a connection to Figma is established. To check if the exposure of the layers did work, click the icon on the right side of the slot. A panel appears in which all the currently exposed layers are listed. You should be able to see both the layers that you selected in the plugin.
Now we are ready to start building the logic for our protoype.
Our goal is to use the progress bar in the Figma file to display the current position of the Potentiometer. This is not a single “When … then …” kind of behavior, but a continuous relationship – whenever the Potentiometer changes, the bar should change as well. To program this behavior we need a ”Map … onto …“ Card.
After clicking on "Add Card" select the ”Add Map Card“ tab at the top. This card type allows us to map the value of one component onto the value of another. In our case, we want to map the Potentiometer onto the width of the “Bar” layer in Figma.
These kinds of cards are filled out step-by-step, just like the “When … then …” cards. In our case, we want to map our Potentiometer onto the width of the “Bar” layer in Figma. Therefore we select “Map Potentiometer from 0 to 270°” – that’s the full range of values of the component. In the second part of the clause, we select “Figma“ and then pick the layer and property we want to change. Finally, we add the range of values that we want the property to be set to, based on the current value of the Potentiometer. In our case we want to go from 0px up to 500px. So in the end the second clause says “Onto Figma layer Bar width from 0 to 500”.
Continue this for all elements that you want! In the end the sketch could look like this:
4. Sending to Figma
Now let’s see our prototype in action. Click “Start Project” in the top left corner of the window, then switch to Figma. Make sure the plugin is running, then start turning the Potentiometer on your board. You should now be able to change the width of the rectangle with your Potentiometer.
Now hit play again and you have a little sensor dashboard prototype! Maybe next you could try to map the temperature sensor instead of the potentiometer and create a visual thermometer for your room.
If it doesn’t work, make sure your board was recognized by blokdots, by checking whether the status in the Live View is “ready” and seeing if the visualization in the Live View responds when you turn the Potentiometer. Then check if the project is really running. Finally, make sure the blokdots plugin is open and connected to blokdots.
If the performance is a bit choppy and not as smooth as you’d like, make sure that the blokdots window is not in the background. This means it shouldn’t be minimized or completely covered by another window, but be partly visible all the time.