I used Origami Studio, a prototyping tool, to create a working Phillips Hue controller.

Many design tools like Sketch and Framer X now include the ability to use live data from APIs. In May 2018, Origami Studio was updated to include a “network request” feature that allows prototypes to make POST and GET requests. Beyond simply reading data, prototypes can now create and update data in all the same ways as a real app. Combined with Origami Live, which allows prototypes to run independently on iOS, it’s possible to create a fully functional app without writing a line of code.

The Hue API is particularly fun for experiments because it controls real-life objects.

To turn a light on or off, the Hue API requires a PUT request with an access token in the request header. Origami Studio doesn’t support PUTs or headers, so I created a proxy server to format and forward its requests. The prototype sends a POST request to the proxy, and includes an options object in the request body. The proxy parses and transforms the options object, makes a request to the Hue API, and sends the response back to the prototype.

Support for more request types is likely to land in Origami Studio soon. Many more ideas are possible with network requests: a search page that returns real results, a working chat app, an Apple TV remote, and so on.

The code and working files for this project are on my GitHub.