Go to Fox Pass home
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.
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.
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.
I made the pressed variant for each style, added mouse down and after delay interactions to switch between the two states.
The board was made using the same technique: variables and lots of drop shadows.
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.
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.
