This website uses cookies to ensure you get the best experience on our website.Learn more.
Understood

Start building with these example projects:

LED Toggle

In this project, we will connect a LED to the board and let it toggle, every time when a button is pressed.

These are all the components you need for this project:

  • 1x Grove Beginner Kit
  • 1x USB Cable

(We will use the button and the LED of the kit, in case you broke them out already or want to use individual components)

1/12

Before we start, just a quick explanation: When you open blokdots, two windows will appear. A smaller one, which we call “the Live View” (on the left) and a bigger one which we call “a Project” (on the right). Please keep that in mind when going through this tutorial.

2/12

Open blokdots and plug in your board using the USB cable. On top of the Live View a little green box should appear, flashing your board with the necessary Firmata, so we can use it. If it does not work, simply unplug it and plug it in again, eventually it should flash.

3/12

The beginner kit already has components plugged in by default. We are using the LED at "D4" and the button at "D6". If you are using the shield or have the components already broken out, you can also just connect them with the Grove connector cables, of course.

4/12

In the Live View you now can click on the slot you just plugged in a component (so in our case "D4" and "D6") and select it in the list. This way we tell the software which component to expect and how to handle it. If you have done this with the button, try pressing it. In the Live View you should now be able to see a green bar and the number 1, when the button is pressed. Now also connect the LED. You should be able to toggle it in the Live View.

5/12

We know it can be confusing to know which component needs to get into which slot. If you are not sure, click on “Connect A New Component” on top of the Live View, select the component you want to connect, and the “Wizard” will show you where to plug it in.

6/12

Now we need to switch windows. In the Live View we can control which components are actually connected, while in the Project we can add logic to them. Just select the button and LED here in the slot list and click “use” on both of them.

7/12

We are ready to go and let the programming begin! In the main area of the window (the big white space) is a button. This one lets you add cards. We have two variants of cards, but for this project we will only need the “If … then …” version.

8/12

Once clicked on the button it changes to an empty card (blue). Step by step, you now can click through the different options and create your card. Try to build “If button is pressed 1 time, then LED should toggle”. If a card is done, it will move away and make space for the button again. You can add as many cards as you like!

9/12

If you are happy with your project, do not forget to save. There is a little save button below the big “Run Project” button in the top left corner of the project window.

10/12

Now all that is left is to actually press the big “Run Project” button. If you want to change your code, simply press “Stop” again and make the changes you want.

11/12

The only thing that is left is to test your prototype! Try pressing the button. Now the LED should turn on and off when you press it. Congratulation, you just created your first prototype!

12/12
LED Toggle
Download the example .blokdots file (1kb)

Figma Plugin Example

A basic intro, showing how to use blokdots with Figma. We will connect a potentiometer with a frame in Figma, changing the color and size of a bar as well as text above it.

These are all the components you need for this project:

  • 1x Grove Beginner Kit
  • 1x USB Cable

(We will use the potentiometer of the kit, in case you broke it out already or want to use an individual component)

1/11

Open the blokdots Preferences (cmd + ,) and make sure you have the Figma Integration enabled. You should restart the app for it to work.

2/11

Install the blokdots Figma plugin (it only works with the Figma Desktop App!) and copy our Figma community file.

3/11

In the Figma file, right click onto the canvas, navigate to Plugins and click on blokdots. If blokdots is open and the Figma integration is enabled, the plugin window should look like this. If not, make sure blokdots is open and the integration is enabled.

4/11

Now select a layer that you want to manipulate with blokdots, then click on "Expose current selection to blokdots". This will make it accesible as a compnent in the blokdots app. Do so with every layer you want to manipulate. In our case this will be the rectangle "Bar" and the text "Text". That's it for now!

5/11

Let's switch back to blokdots. To check if your exposure did work, hover over the small Figma icon at the bottom of the Project slots. You should be able to see all layers that you have selected in the plugin.

6/11

Connect the potentiometer to the slot "A0" (the Grove Beginner Kit has it already preconnected there if you didn‘t break it out yet), set it up in the Live View, and "use" it your project.

7/11

Now in the Project window you should be able to select Figma as an actor. Let's start with a Relationship card. To do that, simply click on the "Map … onto …" button. Here, the same as with the "If … then …" cards, you can step-by-step create your connection. We want to map the potentiometer to the Figma layer "Bar's" width. Therefore select "Figma", then the layer "Bar", then width, and finally the range. In our case we want it to go from 0px up to 500px.

8/11

If you hit play now, and switch to Figma, you should be able to change the width of the rectangle with your potentiometer. Keep in mind, that the blokdots plugin needs to be open for the connection to work!

9/11

We do this with every parameter we want. E.g. mapping the color to the rotation of the potentiometer. A little hidden feature is that you are able to also display the value of the potentimeter in Figma if you type "{{value}}" the output text field. Your final program should look something like this.

10/11

Now hit play again and you have a little sensor dashboard prototype! Maybe try next to map the temperature sensor instead of the potentiometer and create a visual thermometer for your room.

11/11