How to Add Sound in Figma Prototype

[@marcusferreira1768]

Well done! Great video, straight to the point. Thanks for sharing that with us.

[@DesignXstream]

Glad you found it useful! Cheers Marcus ✌🏼

[@ashutoshvashishtha6499]

LOVE YOU BRO!!!! This is sooooo freaking cool :D Straight to the point! Subscribed to ur channel man!!!

[@DesignXstream]

Glad you liked it! Cheers buddy ✌🏼

[@MR-DURO]

Thanks for sharing this. I hope Figma will add better control with audio and video in near future. Audio and video events to call instead.

[@DesignXstream]

Yes there could be more event triggers. Hope they add more!

[@erikmarkus7467]

nice, really helpful!!

[@DesignXstream]

Cheers ✌️

[@lu-ti-car]

Very helpful! Thanks!

[@DesignXstream]

Glad it helped! Cheers ✌🏼

[@laris-lila]

Muito obrigada! 🖤

[@DesignXstream]

De nada! Fico feliz que tenha gostado. ✌🏼

[@markwilde836]

Great work mate

[@DesignXstream]

Cheers ✌🏼 :)

[@andranemes790]

But can you add sound or music if you have the free version of Figma, the one that is not improved?

[@DesignXstream]

Figma's free plan doesn't allow to upload video/audio files into it.

[@elizabethj2508]

Thank you! Is there a way to play and pause the audio using this same method?

[@DesignXstream]

Yes that is possible. Check add video in Figma I think i showed play pause in that.

[@Mime_ee]

Thank you so much for this tutorial. Your a life saver🥹. I'm having some trouble though. When i click the button the sound works but once i link it to another page the sound doesn't work. How can i fix this? Thank you so much again

[@DesignXstream]

Hey! To get sound on a button click and also navigate we would need a work around. You need to first do a click of a button to a same page where you play the sound and then after delay navigate to the page you wish to. Duplicate this file to see how it works: www.figma.com/design/oEh2gnxjCqfevGjUWt6EDr/Play-Sound-in-Prototype-(Community)?node-id=1-61&t=JocERZQ6xUfeyh1v-1

[@Jayavarshan-e1b]

That's amazing but can i pause and play the audio ?

[@DesignXstream]

Yes its possible. you can link a pause button to the pause video action.

[@KeliHurst]

Is there a way to do this with just an audio file? I'm trying to prototype an app where I'll need to record multiple instructions in different languages. Thank you!

[@DesignXstream]

Mp3 or wav doesn't work. You can just add a empty background for your audio file and place it on Figma.

[@sheepy1283]

this requires professional plan right?

[@DesignXstream]

Yes, adding mp4 files is only possible in the pro plan.

[@smini9812]

Your video is great, but I am having trouble importing a mp4 or mp3 into my Figma prototypes. I have the Pro plan but when I try to drag and drop the file into my project, nothing happens. Why is this happening?

[@DesignXstream]

If the video more than 30mb? I suppose there is file size limit. and do you see any error?

[@smini9812]

No, there is no error message. I go to drag and drop the file into the project, and nothing happens.

[@DesignXstream]

@@smini9812 check the file size, check if figma is on latest version, check with a different mp4 file. I can't think of any other possible issues.

[@smini9812]

I got it to work! Put the video in a frame and put the fill as a video. Then inserted into prototype. Thank you for your help!

[@DesignXstream]

@@smini9812 That's interesting thanks for sharing the solution.

[@AzahraNurHanifah]

I cant drag audio to figma( this should be premium)?

[@DesignXstream]

Yes that's right as mentioned in the video its only possible in pro plan.

[@DéborahLevyBencheton-v8b]

It doesn't seem to work if I play the prototype from my phone

[@DesignXstream]

I haven't tried it on my phone. Have you used the Figma mobile app or on the mobile browser?

[@DéborahLevyBencheton-v8b]

both actually :) @@DesignXstream

[@dayanielart]

hi, is it possible to keep the audio/music playing while we change from frame to frame? as in it acts like background music

[@DesignXstream]

Yes that's possible. Just keep the audio layer with the same name in all the frame and make sure you don't checkmark the 'Reset Video' while adding prototype links.

[@ThelovelyCharlene]

Thanks for the Video. I have a question I get the figma for students that i can put videos in, but all the time figma says that my project is locked.. what can i do? 😭

[@DesignXstream]

Hey videos can be added only on pro and enterprise plan. If you are the free tier you might face this issue.

[@rlex3681]

Just put the gpay video below the frame or the rectangle

[@DesignXstream]

Yes that could also be done! 👍🏼 As far as the video stays within the frame layer structure any method could be used!

[@sushantneopaney9157]

Sound look like a pay cash google❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤sound of the Google pay of it

[@DesignXstream]

Yes! I think I searched for that sound in particular.

[@sohailrahman735]

Basic plan users left the chat 😅, including me 🥲

[@DesignXstream]

Yah,, that's sad!

[@sarthakmalik4160]

same bro