A Figma + Max/MSP Workflow and Process Example

As I've discussed my project, Interaction Design in Max/MSP, over the months I find that people are intrigued by the possibiltiy of using Figma in the process. Some people ask if there's a way to just export directly to Max. The answer is not exactly but almost. Some have wondered if the worflow is just about exporting code from Figma and using Jweb in Max. The answser is, "Only if you want to". Let me go over a recent Rapid Prototype I created.

The Initial Design Inspiration

I wanted to include the use of a radial design element. Something that was circular and reflected some sonic data. Due to my experience with a programming library known as P5js, I immediately jumped there to sketch out some ideas.

As I sat impatiently in front of P5js, trying to find an example of my earlier code that could solve this problem I decided to do something that is at times controversial: I turned to an AI code tool.

Vibe Coding vs Guidance Coding

I've had to ask a couple people, a couple of times, to define what "vibe coding" actually is. I simply had no idea several weeks ago. As I come to understand it now, the definition suggests it's a process of asking AI LLMs to generate code while not understanding the language and science behind the code in first place. Hopefully I don't sound dismissive. Vibe coding probably makes sense for many emergency and rapid prototyping scenarios. A term I want to propose is "Guidance Coding". I define that as a process where the practiioner uses enough foundational knowledge to effectively direct an LLM to generate specific code that solves specific tasks. We can probably agree that this is better and more efficient.

Why did I choose a "Guidance Coding" to create P5js code?

The graphic technology in P5js is very similar to the Mgraphics API in Max/MSP. Many AIs are more familiar with P5js as well, since there is a massive amount of tutorials online. I chose this as a starting point so that I can quickly assess the results using the online P5js editor. Additionally, I can quickly make changes.

There's another reason. A small hack. Some LLMs can not generate effective Mgraphics API JavaScript. However, they are well suited for converting P5js code into Mgraphics JavaScript. You can see the results below.

The Initial Figma Design (first iteration)

Since this a rapid protoype, I skipped some details that I may address in later iterations. I decided that the responsive, radial, graphic will be placed on the right hand side and the limited parameters will on the left. I selected a cool color scheme. The grays are not neutral. They lean towards blue. The same can be said for the black. You rarely want to use pure black. This instead is a very dark, cool, gray.

Working in Max For Live

I exported the labels from Figma as transparent PNGs. You can easily drag and drop them into your Max For Live device. Some larger shapes are actually just panels. Each panel copies the exactly color explored in the Figma design. I'm using some rudimentary FM synthesis.

My embarassingly messy patch!

The Final Results of this Rapid Prototype

This approach has allowed me to investigate a few User Experience and Interaction Design questions.

1. Does the visual feedback offer anything novel and interesting to the audience?

2. How should be adjusted to better suit my objectives with this M4L device?

3. If I were selling M4L devices, how can move the design forward to better express its value?

As you can see, I didn't spend too much time on the audio portion in this example but if I was working in a team, I could easily hand off this functional prototype so that a team member can do their part. Another scenario could be that if I needed to offer a beta test, I now have some modestly presentable to my audience.

You can learn more about the design process, Figma software, and tips and tricks in my course, Learn Interaction Design, which focuses on Max/MSP, Figma, and JavaScript.

The results of this rapid prototype.