How to embed Canva designs in Figma presentations using Pitchdeck

Video Transcript

Today, I’m going to be showing you how to embed designs from Canva directly into your Figma presentations using the Pitchdeck Figma plugin.

To get started, all we need to do is go to your Figma file, click on the little “Resources” icon at the top, and if you search for “Pitchdeck” and click on the “Plugins” tab, you’ll see Pitchdeck pop up. Just go ahead and click on that item, and you can then run the Figma plugin by either clicking this run button here or, I’d recommend, clicking on this more options icon over here and clicking “Save Figma Plugin.” That’s just going to save it to your Figma plugins list for easy access later. I’ve already gone ahead and done that.

I’m going to go back to my Figma canvas and right-click anywhere. I’m just going to go down to “Plugins” and go down to “Saved Plugins” and then click on the Pitchdeck item to run the Figma plugin that we just saved a second ago. If you’re new to the Figma plugin, the way that it works is it basically treats any frames that are directly on your Figma page as slides. You can create these frames at 16x9 ratios normally – these ones are at 1920 by 1080 – and then you can just go ahead and put in any content layers that you want. I’ve got text layers in mind; I’ve got some images in mind, and then in the Figma plugin, it’ll load those frames up as slides, as you can see here, and then you can do things like add animations and embeds and links and things like that onto the slide layers too.

For today, I’m just going to be focusing on how to embed a design from Canva. Canva.com is basically a popular design platform that allows you to design things like websites, documents, and graphics using their own platform interface. It’s separate from Figma, but you might want to design some assets or websites in Canva and then embed those into your Figma presentation. That’s what we’re going to be doing today. I’ve basically got a design here, which is just a little portfolio site created in Canva. If we open that up, you’ll obviously have a different type of design, but the interface should look very similar.

The way that we can embed this into our Figma presentation is we need to go up to the right-hand side here in the top and click on this share icon. If you click on share in Canva and then go down here, you’ll see that there’s this little “more” option at the bottom of the share pop-up. If you click on more, that will give you a range of extra options for publishing or sharing the embed, and the one we want to go to is this one down here called “Embed” with the little code icon. If you click on embed, it’s going to ask you if you’d like to enable the embeds. This is a really important step; this is going to tell Canva that you want this design to be embeddable on other websites. We’re going to go ahead and do that. I’m going to click on this embed button, and this is going to make the design public. You can read a bit more about that if you want, but we need to click on this embed button here. I’ve just clicked on that now, and it’s telling us that our embed links have been created.

We basically created the embed; it’s now live, and now what we need to do is go down to this second link here called “Smart Embed Link.” That’s the one that we want, and it’s going to look like this, as you can see here. Just go ahead and click on the copy button. I’m going to click “copy”; that’s just going to copy the Smart Embed Link from Canva to my clipboard. Now, I’m going to go back to Figma, and I’ve got a slide set up over here in my designs in Figma. I’ve got a placeholder, which is basically this gray rectangle frame here; it’s just a normal rectangle frame, and that’s just a placeholder frame that I’m going to add my embed into.

If you select that slide in Pitchdeck and then click on the Embeds tab (by default, it’s on animations), find that slide, and I’ve just got the slide here, I’m going to click on that input and paste it. I’m just going to click “paste,” and you can see here when I paste the Canva embed link that we copied into the input field for that embed layer, it’s basically gone ahead and embedded that Canva design directly into my slides. That’s pretty cool; that means we can now interact with this directly in the presentation. I can skip through these frames from Canva and have that show up in my presentation.

You might want to adjust the aspect ratio of that as well. If you’ve noticed that there are these lines on the side, that’s because the aspect ratio is probably a little bit off. You could tweak that. If you just tweak the width of that and refresh, you’ll be able to get that looking much better. It’s really up to you what kind of size you create the embed; it’s just going to be based on whatever the Figma layer size is, and you can basically just embed that as you like.

We’ve also got a little bit of a fade on there, so that’s just going to fade in from the bottom when it gets introduced. We can extend that if we want to and see what that looks like. That’s just going to add a little fade, and you’ve got all your Canva controls down here as well.

Now, if we actually want to present this to somebody, what we can do is go ahead and click on the Export button in the Figma plugin. If you click on Export in the top right corner of Pitchdeck and then want to make sure that the “Pitchdeck Presentation Web URL” option is selected. There are a few different options; you can export to PowerPoint or PDF, but the Canva embeds are only going to work in the Pitchdeck web presentation URL. I’m going to select that, and I’m just going to go down here, and I’ve already created one; it’ll say “Upload Presentation” if you haven’t created it already. I’m just going to click on “Update Web Presentation,” and that’s going to export all the slides for me and upload those to the Pitchdeck web presentation format.

This is going to give us a link, so it’s going to give us either a URL with a separate password that you can send to the person you want to share the deck with, or you can click on this “Passwordless URL,” which will automatically log them in without needing a password. I’m just going to use the passwordless URL option for today. You can just go ahead and click on this Passwordless URL link or copy it to your clipboard. I’m just going to click on the link for now and open that up in the browser, and you can see once it loads the presentation, you’ll have all your slides in there, as you’d expect.

We’ve got a few different slides here with normal content, and then our fourth slide is our Canva slide. If we click on slide four, you can see that it’s now loading up our Canva portfolio site that we included as an embed. This is inside of our presentation, and we can click through that now as if it was a native embed of that Canva presentation, which it is. We can basically treat this as if it was a normal Canva link that’s been embedded in the presentation. You can do everything that you’d normally be able to do with the live embed link, but you can do that all inside of the presentation itself.

This is a really nice way of embedding things like portfolios, websites, documents, or anything that you’ve created in Canva. You can embed it into your Figma presentation that you give using the Pitchdeck Presentation Figma plugin and web app. That’s basically what it looks like; you can apply this to any of your Canva designs, as I mentioned. You just have to go through the same process: click on the Share icon, go down to “More,” then click on the “Embed” button, and just make sure the embeds are enabled. If you do want to unpublish that, you can click on “Unpublish this design,” and that’s basically going to unpublish the embeds. If we now refresh this presentation, that’s not going to load up the embed that we created. You can see here it says it’s forbidden because we basically disabled embeds.

You’ve got control over that; if you want it to show up, you obviously have to click “Embed” and publish that as a live embed, and then that will work when you copy that embed URL. You can see here it’s back because we just enabled it again, and that’s what that looks like there.

In summary, you just have to enable the embeds, copy the Smart Embed Link, and paste that into Figma into the Pitchdeck Presentation Studio Figma plugin, and you’ll be good to go. We’ll leave it there for today. I just wanted to give you a quick run-through of how Canva embeds can work in the Pitchdeck Figma plugin. If you’ve been wondering how to automatically embed live Canva designs into your Figma presentations, this is a really quick way of going about it.

I hope that helps if you’ve been wondering how to use Figma with Canva in your presentations. Feel free to give Pitchdeck a try, and I hope that it works well for you. We’ll leave it there for today; thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.