Working with Arduino in Framer

Framer is a flexible web-based tool that can allow your prototypes to talk directly to a connected device. By starting a server on your computer you can connect to a socket server in a few different ways-locally on your computer, over a local-network, or within Framer. This capability makes it possible to work with Arduino, RaspberryPI, or any other IoT device.

You can connect to an external device through USB, Bluetooth, or HTTPS. In this guide, we’ll be connecting to the Arduino via USB and using HTTPS to connect to our web sockets. HTTP support is not possible.

We’ll show you how to work with an Arduino in both communication directions.

• Arduino sending a command to Framer to trigger an animation
• Framer sending a command to the Arduino to blink a light

Here’s how you can make an Arduino communicate with a Framer prototype

1. Set up your Arduino board and connect it to your computer using the cable.
2. By following the example below you’ll create a loop from your Framer prototype to your Arduino. The button on the breadboard can trigger an animation in your prototype and your prototype can toggle the LED on and off.
3. Open the terminal on your computer.
4. You can use this template to get a headstart. Open this folder in your code editor.
5. Run yarn install in your code editor's terminal (ensure you have yarn installed on your computer)
6. Run yarn start to start your socketio server.
7. Open this example project in Framer if you don’t have it open already.
8. Once your Framer project is ready, preview it alongside your local server console from earlier. If all is working as expected, you should see a line that says “Connected to Framer”.
9. Preview the frame on the canvas and toggle the first item.
10. You should be able to click your component and see your Arduino light up. Pressing the button connected to the Arduino should toggle your light again and reflect that state in your prototype.
11. Now you have basic two-way communication working between your Arduino and Framer. You can add functionality to either side to create limitless hardware-based prototypes.

Originally published at https://www.framer.com.