Contact

Soundboard prototype in Figma

My step-by-step process to design an interactive soundboard prototype in Figma.

karthik
My step-by-step process to design an interactive soundboard prototype in Figma.

All the cool stuff people made during the #figbruary challenges was really inspiring. Especially the stuff @realvjy makes pumped me up.

So I thought of creating a soundboard and to make it more interesting I wanted to achieve it with just shadows and variables.

Sound on!

You may have seen the prototype in our March update. If that piqued your curiousity about how I designed it, follow along!


The button was made of two layers: a switch and a socket. The switch was made up of fill, 1px gradient stroke, and a bunch of shadows.

buttons

The fill of the switch and all its drop shadows were set to surface and shadow variables, respectively. The shadow variable was aliased to the surface variable.

This made the job of creating more button variants much easier as I didn't have to manually adjust all the shadows.

button variants

I made the pressed variant for each style, added mouse down and after delay interactions to switch between the two states.

pressed button

The board was made using the same technique: variables and lots of drop shadows.

board put together

I searched and found a few sounds online. Since Figma doesn’t support audio playback, I used an ffmpeg command to convert them to videos.

ffmpeg -f lavfi -i color=c=blue:s=100x100 -i inputfilen.mp3 -shortest -fflags +shortest outputfile.mp4

Last step was to map play interactions to sounds.

interactions

Final Version

You can ▶︎ play with the Figma Prototype. Copy the file and make it your own.

Variations

Tejas used the steps described here to build an Interactive Pop-it toy as Figma prototype. You can play with these two prototypes—Square & Hexagon and then download the file.


Digital experience design studio.
Fun process. Serious output.

We at 3 Sided Coin put play to work with editorial and product design.

We look out for new & exciting challenges to design amazing digital experiences. Get in touch.

image of a letterbox with fox pass sticker