Facebook Sound Kit, now in Framer

It’s time to design with sound in mind | Framer.com

Sound is addictive. Neutral, positive or otherwise, the auditory experience of product users has come a long way from the classic dial-up tone. Frantic keyboard clicks, the optimistic ping of a right swipe, even the jarring chord of a 4 a.m. incoming email. In today’s world, sonic interaction is designed to be seamless and contextual in nature. And as technology starts to shift toward algorithms and automation, sound is poised to become a core component of interaction design.

A Sound Kit for prototypes.

As harbingers of future tech, Facebook has long been mindful of sound’s place in product design. Today they’re releasing Facebook Sound Kit, a set of sounds designed to give you a starting point for leveling up your product’s stickiness through tactile feedback.

“Many of the designers at Facebook arrived here thanks in part to the resources and tools others created. Those tools enabled us to learn, move fast, and jump on opportunities. As a result we feel naturally inclined to give back to the design community by building resources and tools ourselves.” — Jeff Smith, Product Designer at Facebook

In partnership with Facebook, we’re now offering Sound Kit as a full integration within Framer. Simply update to the latest version to enjoy a new menu of sounds, available under Snippets in the Code editor sidebar. This release follows swiftly on the heels of the Framer Design release, a graphics tool designed to complement our Auto-Code feature.

Simple sounds, dramatic effect.

Choose between navigation, notification or error sounds and hover over each type to get an audio preview. Once you’ve selected your preferred sound, we’ll drop in a snippet of code that auto-plays your sound once.

sound = new Audio("sounds/Alert1.m4a")
sound.play()

You’ll also be able to trigger sounds to play according to a myriad of events, states or transitions. Loop, pause or preload sounds to suit your interaction needs. Since Framer is web-based, you have complete access to the Web Audio API out of the box. Check out the list to see how you can manipulate sound to enhance your app experience.

To help inspire your use of sound, here are a few prototypes that display the full range of possibilities:

1. Apple Watch Notification
   Play a sound after a timed delay. Open in Framer.
2. iOS Notifications
   Play multiple sounds in sequence. Open in Framer.
3. Like Animation
   Play a sound on tap. Open in Framer.
4. Sound Shuffle
   Explore all included Sounds. Open in Framer.

Update to Framer v95 to enjoy the full palette of sounds in your Code sidebar. For deeper insight into the craft of sound design, read this fascinating Medium post by Facebook’s Sound Design Director Will Littlejohn. We’d also like to extend a huge thank you to Will, Jeff Smith, Debashish Paul and the entire Design team at Facebook for including us in this release and continually inspiring us with the work they do for the community.