How to embed SoundCloud audio in Figma presentations using Pitchdeck

Video Transcript

Today I'm going to be showing you how to embed audio or songs from SoundCloud directly into your presentations in Figma using the Pitchdeck presentation plugin.

To get started, if you just open up your Figma file, go up to the top here where it says "Resources", click on that icon, and if you search for "Pitchdeck", under the "Plugins" tab if you click on the Pitchdeck Figma plugin, you'll be able to run the Figma plugin by either clicking on this "Run" button here, or you can click on the "More options" icon here and click "Save to Figma plugins" and that's just going to add it to your Figma plugins list to use later. I've already added it to my Figma plugins list, so I'm just going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins", go down to "Saved plugins", and then just click on the Pitchdeck icon that we just installed a second ago. Once the Figma plugin loads you'll see that we've got a bunch of slides here.

If you haven't used the Figma plugin before, the way it works is it basically loads in any Figma frames that are on your page and treats those as slides. I've just got a bunch of Figma frames set to 1920 by 1080 pixels, and each of those has some Figma content layers inside them. We've got images, we've got text, and we can then add animations to those, we can add links to those, video embeds, and other embeds like that. Today we're just going to be focusing on adding a SoundCloud embed. This is going to allow us to embed an audio player for any tracks or any audio that you've got on SoundCloud; I'm going to show you how to do that now.

I've got this "Embed" Figma slide that I've got set up, and basically the way it's going to work is we're going to embed the SoundCloud player directly into this Figma layer here. I'm going to replace this Figma image with a SoundCloud player embed; to do that, you just have to switch into the "GIFs/Videos/Embeds" tab on the right hand side here, and that's going to switch this context here to allow you to paste in an embed link. You can see what those look like by clicking on the "Supported Embeds" link here, and that's going to take you to the Pitchdeck documentation page, and you'll get some examples of the different kinds of embeds that you can add to your presentation slides, but as I said, today we're just going to be focusing on SoundCloud.

All you need to do is go to soundcloud.com, and you'll be able to search or browse for any music. If you want to search for music, or they have podcasts, they have all different kinds of audio; you can basically go there and find a track that you like, or some audio that you like that you want to then embed into your Figma presentation. I've just got a SoundCloud song that I'm going to embed into the Figma presentation, and once you've found the track that you like just make sure you're on the actual track page, not a playlist page; I'm on a single track page. I'm going to grab the SoundCloud URL, you can either grab that from the web browser header, or you can click on the "Copy link" icon down here; you can copy that to your clipboard, and then if you go back to Figma you can then paste that link into this input field on the Figma layer that you want to embed the SoundCloud player into.

I'm just going to go ahead and paste that now, and you can see here that it immediately loads up the SoundCloud embed into the Figma layer; you could just see that it started playing the track immediately, and that means that as soon as you go from one side to the next, it's going to start playing that audio as you'd expect. Now that we've got that embedded, what I want to do is basically export this Figma presentation to present it in the web browser; and we can do that by clicking on the "Export Presentation" button in the top right hand side of the Figma plugin. I'm going to click that, and then if you haven't uploaded a presentation yet you'll see a button that says "Upload Web Presentation", but I've already created a previous presentation link, so I'm going to update mine by clicking on the "Update Web Presentation" button. I'm going to click that now, and that's just going to export all of our slides that we've designed in Figma, including this new SoundCloud embed that we've just added to our second Figma slide here.

It's just finished updating that link, and you'll get two different options; you can either share a link with a separate password, or you can use this bottom link down here which is a passwordless URL, and that will automatically load up in the browser. I'm just going to grab that one, I'm going to copy it to my clipboard, I'm going to paste that into my web browser, hit "Enter" and this is going to load up the presentation that we just uploaded from Figma a second ago. You can see we've got our presentation slides, these are being loaded in as we'd expect from our Figma designs. Then if we go to slide two, we're going to get that auto playing SoundCloud embed pop-up. I'm just going to click on that now; you can see that our SoundCloud embed has been added to our Figma slides. We can present this in the browser, we can interact with the player, and we can even do things like open up the link in a new tab if we want to open that in the SoundCloud player, and do all that sort of stuff.

That's basically what it looks like; you can obviously resize this depending on your screen size and the embed will automatically scale, that'll just keep getting resized as you scale the browser. This is going to work on different sized screens and it's still going to look really good. I've just got mine as a square, I think that's probably the best format for the embed player; you can make it a landscape or portrait, but you might get a little bit of cropping on the background image from SoundCloud. I'm going to leave it there for today, I just want to do a really simple overview of how to specifically add SoundCloud embeds. If you've got some SoundCloud hosted on the platform, some audio tracks, some podcasts, anything that you've got hosted on SoundCloud or if you want to embed another artist's SoundCloud player into your Figma presentation, you can definitely do that, as I said, by just grabbing that SoundCloud URL and simply pasting it into the Figma embed input in the Pitchdeck Figma plugin.

I think that's going to leave it there for today; I hope you found that useful if you're wondering how to embed SoundCloud audio into Figma presentations, this is a really quick way of doing it using the Pitchdeck Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.