How to embed Spotify audio in Figma presentations using Pitchdeck

Video Transcript

Today I’m going to be showing you how to embed audio from Spotify directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little “Resources” icon at the top here, search for “Pitchdeck”, click on the “Plugins” tab, and you’ll see the Pitchdeck Figma plugin pop up. If you click on that result, you can run the Figma plugin by either clicking on the “Run” button here, or you can click on the three dots “More options” icon, then click on the “Save Figma plugin” option to save it for later. I’ve already done that, so I’m going to go to my canvas, I’m going to right-click anywhere, go down to “Plugins”, go down to “Saved plugins”, then go down to the Pitchdeck option and click on that; and this is going to run the Figma plugin that we just set up a second ago.

If you’re new to the Figma plugin, the way that it works is it basically takes all of the Figma frames that are on your current Figma page and it treats each of those Figma frames as a slide in your presentation, then you’ve got content layers inside; you’ve got text layers, image layers, and these basically make up the individual Figma layers that you can apply animations, links and embeds to. Today we’re just going to be focusing on embedding Spotify content, embedding audio from Spotify; that includes playlists, podcasts, or audio tracks. The way we do this is just by basically adding a couple of placeholder layers in Figma. For this example, I’ve got a couple of rectangle layers; I’ve got a rectangle layer here, and also an image layer. If we click on the “GIFs/Videos/Embeds” tab in the Figma plugin over here, that basically changes these options to give us an input field that we can paste and embed link into; all we need to do is basically click on this “Supported Embeds” link and that’s going to open up the Pitchdeck documentation and give you some examples of what those URLs can look like.

As I said, today we’re just going to be focusing on the Spotify embeds, and as you can see you can embed tracks, playlists or podcast episodes. I’ve got a couple ready to go over here; we’ve got this one, and this one, and this is an example of a playlist. If you just copy the Spotify playlist link from your browser, or if you’ve copied it from the “Share” function, you can just copy that to your clipboard, go back to Figma, and then if you find the Figma layer that you want to paste that embed into, then just paste it into the embed field. I’m going to do that now, and you’ll see here that the layer automatically gets swapped out to the Spotify embed; in this case we’ve pasted in a Spotify playlist, and that means we can basically have an interactive playlist with a bunch of different songs that you can change between. This is totally interactive, you can scroll around, you can change songs, and do everything you’d expect with the Spotify player, and if we again go back to our Spotify links, this time I’m just going to do a single song. I’m just going to copy another Spotify song URL from the browser, jump back into Figma, I’ll get rid of the Spotify playlist for now, and instead I’m just going to add a single Spotify track onto this rectangle layer at the bottom. I’m going to paste my Spotify embed link into that Figma rectangle layer and that’s just loaded in a Spotify player that we can now use interactively in Figma.

I can click on the play button, and if we want to we can also resize that Spotify player a little bit; if we make this Figma rectangle layer a little bit larger, or if we want to move it around, we can definitely do that as well. We can extend that out a little bit, we can make that kind of go a bit more close to the edge, and then if you refresh the slides just by clicking on the little “Refresh” icon, you can see that kind of stretched out the player a little bit more as well. You could even make that go full width if you wanted to; we can make that full width in Figma, and that’ll extend out. It just really depends on the design of your slides in Figma.

I’m going to leave that there, and then to actually export this Figma presentation to present in the browser, all we need to do is basically click on this “Export Presentation” button in the top right hand side. I’m going to click on that now, and if you’re uploading it for the first time, you’ll see a button that says “Upload Web Presentation”, I’ve already created a link, so I’m just going to update mine by clicking on the “Update Web Presentation” button; I’m going to click that now, that’s going to upload and export the slides that you’ve designed in Figma up to the Pitchdeck presentation web app, and it’s going to give you a link to that app. You can either clicking on this “Copy” button here; this is going to copy a URL with a password that protects the link, or you can use this bottom link here, which just signs in automatically without you needing a password.

Just to make it easy, I’m going to grab that one, I’m going to go back to my browser and I’m just going to paste that in, hit “Enter”, and this is going to load up our presentation as we’ve designed it in Figma. You can actually present this in the browser using all of the content that you uploaded from Figma, and if we go to our second Figma frame we’ll see our Spotify embed player automatically included. This has been brought in based on the link that we included in Figma; if you click on “Play”, that’s playing as we’d expect as well. If you have a Spotify account that’s actually signed in and is a proper account paid account, you’ll be able to listen to the full track; this is currently just a preview, that’s why it’s showing up that message but you can embed that full track if you’ve got your Spotify account signed in while you’re presenting. That’s basically what it looks like; as you’d expect, the player will automatically scale based on the size of the window. If the window resizes, the player is also going to resize; it’s totally responsive to the presentation window that the Figma plugin web app is using.

That’s pretty much it for today; I just wanted to cover this specific use case of embedding audio or songs from Spotify into your presentations that you create in Figma, and then upload to the Pitchdeck Presentation Studio web app that you can then present and play some of that audio in your presentation. If you’re doing a presentation that involves some music or you just want to add a little bit of extra richness or audio into your Figma presentations, than embedding a Spotify song, or embedding a Spotify playlist, or even a Spotify podcast preview might be something that you’d be interested in adding. I hope that’s been helpful if you’ve been wondering how to add audio from Spotify into your Figma presentations, this is a really quick way of doing it just using the embed function in the Pitchdeck Figma plugin and then presenting it with the web app. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.