Voice Chat Interaction in Framer

About the resource

To create this interaction, I first laid down every single element on the design canvas that I’d need within the interaction—like the profile images, the audio waveform animation, the button, and so on.

Once everything was designed, I turned them into a single component where I could easily create an “Open” and a “Closed” variant. Then, all I had to do was connect the “Close” variant to the “Open” and set a “Click” trigger, so when “Close” is clicked, it animates to “Open”. I also connected the “Open” variant’s close button back to the “Close” variant, again with a click trigger.