Thanks for this video! I'm designing an app with potentially a lot of audio, and I've been using Figma so far and didn't want to switch tools. Is there a way to use an audio clip that we can upload somehow? (Like it's not some url on the web)
As shown in the video currently the only workaround I could find is via Anima Plugin which needs a URL. However, you can upload your audio file on any web hosting and use those URLs. There are tons of free hosting website where you can just dump your audio files and use the URLs just search for 'upload mp3 online free' on google.
@@nancolyt9955 Hey you can have your own audio but you need to put it on a file server Google drive doesn't work. However if you have a pro figma account then go for the new method: ruclips.net/video/JqLdRgdjYY0/видео.html
Thanks for taking time and for the tip. I just have a little prob doing this, my "layer" where i want to put the sound effect dissapear in the preview.
Hmm.. I haven't come across such an issue. Are you applying the effect on a single layer only? Make sure that dont apply it to a group. For example, if you are applying it to a button then apply it to the rectangle and not the group of rectangle and text.
Good night congratulations for the video, unfortunately I can't hear the sound later... I used the same site as you host the sound... you have something in mind that could be
Hi thank you for the teaching video, but I have a problem with it, although you explained everything in detail and I did exactly the same but mine is not working well, is there any chance to help me directly, please?
hello thanks helpful video. I want to ask a question.I downloaded a music to my pc .When I press to button I want to run that music. How can I do ? What have to I write to html code?
Hey, you have to follow the video.. and upload the music to a file hosting service. If you Figma pro version then you can do it without any plugins check this: ruclips.net/video/JqLdRgdjYY0/видео.html
I have a problem. When I run the prototype the sound only plays the first time i click my "rectangel". If i repeate it, no sound is played. Any ideas what could be wrong?
Hello! Your video was very useful and clear) Thank you for it! Figma just got simpler Maybe there are some other sites where the audio will become a link? I've tried different sites, but none of them put an mp3 at the end of the link. Because of this, the code does not work correctly
Amazing! How can I do it if I want a music playing during all the time? For example, if I have a book prototype and I want music in the background! Thanks, man!
Really helpful video! but i have the same question with Jose. Although I tried the autoplay option, i cant make it work. Should i consider something else? Thank you
Hello! I am trying to find that Anima plugin but i cant find the one that you use, maybe because the video is 2 years old, but if anyone could help me i would be appreciated
Hey, I'm not sure if they still support this feature. This is the plugin: www.figma.com/community/plugin/857346721138427857/Anima---Export-Figma-to-HTML%2C-React-%26-Vue-code However, if you have a paid figma plan you can embed sounds without any plugins. Checkout my latest video on this.
Hi, help 😢 Can i add a long sound for example to teach music to children? Do you think that can i use figma to create a interactive storybook for children?
Hey, If it includes a lot of music then Figma is not a tool for it. I would suggest you go with Adobe Xd. And if you want a more scalable solution then you should be going for some no code tool like Webflow or EditorX.
Hi! I tried this in figma however no sound was playing. The only thing I changed was the URL. Do you know why it didn't work well? I was sure I ungrouped and used a rectangle to embed codes.
Hey Ellen, I just checked my demo file and it still works. Not really sure what's the issue in your case. Did you check the sound clip URL on a browser? Does it work? And is it ending with a .mp3?
@@DesignXstream Hi I am sure that the URL and mp3 format are all correct, I even tried the website URL from the video. Anyways, thank you so much for helping me!
@@ellenxu9845 The URL I used in this video has expired so that wouldn't work. If possible do share me your figma file link on our Instagram page I can have a quick look at it.
@@DesignXstream Yeah I know, I mean I tried another mp3 on that website. I hardly use Instagram but I would like to. Here's our Figma file www.figma.com/file/UL8JcOLsdx9v6DKje1UEEC/INST704-Group-Project, I embedded code on page 1 for the first three screens (two rectangles).
@@ellenxu9845 Okay I got the issue. It is bcoz you are using a google drive link. Google drive doesn't give you the file link instead it gives the path of the file. There are many site which allows you to host files for free. Try this one: www.mailboxdrive.com/upload/ Just browse and chose the mp3 file and it will instantly give you the link which ends with .mp3 use that in the audio code and that should work.
Hey! Awesome tutorial. I am facing issue with the sound, can we upload music to drive and add that link (public)? Can you please suggest some site to get UI sounds/audio ?
does that mean all the other prototype settings we have to do them according to anima then or will the prototyped elements from Figma will be shifted to anima ?
I noticed that certain animation don't work they have a doc of what work and what don't work. So try exporting to anima once you will get to know which are working and which dont.
The sound in Anima is good, but when I upload the project to MAZE, the audio is not playing, do you know how to do the import into Maze with the audio not being lost?
I haven't used Maze. However I suppose you cannot embed Anima into other tools. The other alternative is to go for Adobe Xd. As it has in-built audio playback feature so the prototype will play sound.
Hey, If i want to make a button that plays random music from a selected amount of songs, How do i put multiple mp3's instead of one, I Have tried one song and it worked but now i want to add other songs
You need to modify the javascript code accordingly. This code is just to play one mp3 file. You need to write a new script where you can provide the multiple mp3 links and then use a random function to pick one and play it.
Hi Jen, No the audio uploaded to gdrive won't work. You have to put it on some hosting site where you get .mp3 at the ending of the link. Try this site: www.mailboxdrive.com/upload/
I followed all instructions, copy/pasted the code into the Layer section of Embed Code, and swapped an .mp3 from mboxdrive yet it' still not working on preview. Any ideas?
this is really complicated things , cant understand why figma didn't add sound options yet this is essential feature for a web building...
Possible with Figma pro plan.. I've made a new video on this!
Thanks for this video! I'm designing an app with potentially a lot of audio, and I've been using Figma so far and didn't want to switch tools. Is there a way to use an audio clip that we can upload somehow? (Like it's not some url on the web)
As shown in the video currently the only workaround I could find is via Anima Plugin which needs a URL. However, you can upload your audio file on any web hosting and use those URLs.
There are tons of free hosting website where you can just dump your audio files and use the URLs just search for 'upload mp3 online free' on google.
@@DesignXstream Sorry for asking this, but can you upload our own selected audio that we have on from our Google Drive account. Will it work or not?
@@nancolyt9955 Hey you can have your own audio but you need to put it on a file server Google drive doesn't work. However if you have a pro figma account then go for the new method: ruclips.net/video/JqLdRgdjYY0/видео.html
Thanks for taking time and for the tip.
I just have a little prob doing this, my "layer" where i want to put the sound effect dissapear in the preview.
Hmm.. I haven't come across such an issue. Are you applying the effect on a single layer only? Make sure that dont apply it to a group. For example, if you are applying it to a button then apply it to the rectangle and not the group of rectangle and text.
Good night congratulations for the video, unfortunately I can't hear the sound later... I used the same site as you host the sound... you have something in mind that could be
Hi thank you for the teaching video, but I have a problem with it, although you explained everything in detail and I did exactly the same but mine is not working well, is there any chance to help me directly, please?
I need to play a 3 minutes song,
You can ping me on insta @designxstream
Figma is amazing! i have a question. How can i make the sound listen all time that i want?
Not sure if that would work but you can try setting the audio to autoplay and see if that works.
hello thanks helpful video. I want to ask a question.I downloaded a music to my pc .When I press to button I want to run that music. How can I do ? What have to I write to html code?
Hey, you have to follow the video.. and upload the music to a file hosting service.
If you Figma pro version then you can do it without any plugins check this: ruclips.net/video/JqLdRgdjYY0/видео.html
I have a problem. When I run the prototype the sound only plays the first time i click my "rectangel". If i repeate it, no sound is played. Any ideas what could be wrong?
Hello!
Your video was very useful and clear) Thank you for it! Figma just got simpler
Maybe there are some other sites where the audio will become a link? I've tried different sites, but none of them put an mp3 at the end of the link. Because of this, the code does not work correctly
This is an outdated method. Made a new video on adding sound. Did you check that?
@@DesignXstream I'm in a hurry to see! Thank you
Amazing! How can I do it if I want a music playing during all the time? For example, if I have a book prototype and I want music in the background!
Thanks, man!
Hey Jose, I've not tried anything like that... Maybe you can try to set the autoplay property in html to true and place it on some container.
Really helpful video! but i have the same question with Jose. Although I tried the autoplay option, i cant make it work. Should i consider something else?
Thank you
@@corbywhite4662 Could you share use your sample Figma file link on our Instagram page.
Hello! I am trying to find that Anima plugin but i cant find the one that you use, maybe because the video is 2 years old, but if anyone could help me i would be appreciated
Hey, I'm not sure if they still support this feature. This is the plugin: www.figma.com/community/plugin/857346721138427857/Anima---Export-Figma-to-HTML%2C-React-%26-Vue-code
However, if you have a paid figma plan you can embed sounds without any plugins. Checkout my latest video on this.
Hi, help 😢 Can i add a long sound for example to teach music to children? Do you think that can i use figma to create a interactive storybook for children?
Hey, If it includes a lot of music then Figma is not a tool for it. I would suggest you go with Adobe Xd. And if you want a more scalable solution then you should be going for some no code tool like Webflow or EditorX.
hey great video thanks, do you perhaps have the code available which enables the user to turn off the music after pressing the button?
Just use the same code but with .pause() instead of .play()
Hi! I tried this in figma however no sound was playing. The only thing I changed was the URL. Do you know why it didn't work well? I was sure I ungrouped and used a rectangle to embed codes.
Hey Ellen, I just checked my demo file and it still works. Not really sure what's the issue in your case.
Did you check the sound clip URL on a browser? Does it work? And is it ending with a .mp3?
@@DesignXstream Hi I am sure that the URL and mp3 format are all correct, I even tried the website URL from the video. Anyways, thank you so much for helping me!
@@ellenxu9845 The URL I used in this video has expired so that wouldn't work.
If possible do share me your figma file link on our Instagram page I can have a quick look at it.
@@DesignXstream Yeah I know, I mean I tried another mp3 on that website. I hardly use Instagram but I would like to. Here's our Figma file www.figma.com/file/UL8JcOLsdx9v6DKje1UEEC/INST704-Group-Project, I embedded code on page 1 for the first three screens (two rectangles).
@@ellenxu9845 Okay I got the issue. It is bcoz you are using a google drive link. Google drive doesn't give you the file link instead it gives the path of the file.
There are many site which allows you to host files for free. Try this one: www.mailboxdrive.com/upload/
Just browse and chose the mp3 file and it will instantly give you the link which ends with .mp3 use that in the audio code and that should work.
What's more good to use? adobe xd? or figma
If your prototype has a lot of sounds/audio interaction involved then would definitely recommend Adobe Xd. It's in-built audio feature makes it easy!
Yeaaah that's also what I thought. Btw thaaanks!
Hey! Awesome tutorial. I am facing issue with the sound, can we upload music to drive and add that link (public)? Can you please suggest some site to get UI sounds/audio ?
Hey Karthik, You can try this site: mailboxdrive.com/upload/
I think it allows to host files for free!
@@DesignXstream Thanks for the video, I uploaded the audio there but the link is not working. Would you please suggest another one?
@@rseif4788 I just tried it works for me. Anyways you can just google for free file hosting websites and you will find many!
@@DesignXstream drop box maybe?
I can't find Anima plugin you have used. Please attach link of it
Just search "Anima" on figma community tab. The UI has changed a bit but the features still remain the same.
does that mean all the other prototype settings we have to do them according to anima then or will the prototyped elements from Figma will be shifted to anima ?
I noticed that certain animation don't work they have a doc of what work and what don't work. So try exporting to anima once you will get to know which are working and which dont.
Is there anyway to get the audio to autoplay when you "enter" a frame
Just add the follow property inside the audio tag:
autoplay="true"
@@DesignXstream thank you!
How to show in figma - highlight audiobook content equivalent to highlighting text in ebooks ??
Figma doesn't have any audio capabilities yet. This is using a plugin called Anima.
Beware... in my case it not only didn't play the sound but also modified my frames. Hopefully I could revert the changes.
Yes pls beware! 👍🏼
yes me too.. the sound didn't play and my frames changed :( please help me ASAP
hi good video :) i have question. if my audio is longer than your audio, how fiix it? i want to play all sound when i click my prototype.
Any audio length would work. What issue do you face?
Audio source link is broken so the code plays nothing
Need to host it. But if you have Figma pro then I made a better version to do this.
Where do you get these audio effects?
You can find many websites that have free audio library... like pixabay
Does this work running the prototype on an iPad as well?
Yes this prototype runs on a browser so it will work anywhere!
The sound in Anima is good, but when I upload the project to MAZE, the audio is not playing, do you know how to do the import into Maze with the audio not being lost?
I haven't used Maze. However I suppose you cannot embed Anima into other tools.
The other alternative is to go for Adobe Xd. As it has in-built audio playback feature so the prototype will play sound.
What would I do if the Anima plug-in no longer exists?
I've not found any other solution for this! Anyhow Anima is still there. I've used it last week only!
is the google drive will work if I use it to upload my music and paste the link in the script?
No google drive doesn't work as a file host. You need to have .mp3 at the end of the link.
Can you recommend any site where I can upload the audio hehe
You can try this: catbox.moe/
hi can i add a recorded voice to prototype in figma?.Is it possible?
Yes you can. Just record and upload the voice. Try the new audio method.
Hey, If i want to make a button that plays random music from a selected amount of songs, How do i put multiple mp3's instead of one, I Have tried one song and it worked but now i want to add other songs
You need to modify the javascript code accordingly. This code is just to play one mp3 file. You need to write a new script where you can provide the multiple mp3 links and then use a random function to pick one and play it.
I couldn't make it work!
Does the link have to be .mp3? will it work if I upload the audio file to google drive and use the google drive share link?
Hi Jen, No the audio uploaded to gdrive won't work. You have to put it on some hosting site where you get .mp3 at the ending of the link.
Try this site: www.mailboxdrive.com/upload/
I do the steps and choose all my frames but nothing works in the browser I mean none of my promoting worked.
Reach out on instagram @designxstream
Same(((
i cant find on manage plugin in 2022, anybody you have options?
I can still see it on community plugins!
where can i find the anime plugin ?
You can find it on Figma community and install it.
@@DesignXstream wow thank you for the Quick response!!
I followed all instructions, copy/pasted the code into the Layer section of Embed Code, and swapped an .mp3 from mboxdrive yet it' still not working on preview. Any ideas?
Did you use anima preview or figma preview? It works only on anima preview!
I can't find this plugin
Hey checkout this new video for a easier method: ruclips.net/video/JqLdRgdjYY0/видео.html
not working
This is an old method. try the new one ruclips.net/video/JqLdRgdjYY0/видео.html
i need code bro
The html code is in the description.
nice1
dammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
check out the new method: ruclips.net/video/JqLdRgdjYY0/видео.html