Used in this video
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Video Transcript
Today I'm going to be showing you how to view analytics for your presentations created in Figma using the Pitchdeck Presentation Studio Figma plugin.
To get started, all we need to do is go to your Figma file and click on the little "Resources" icon at the top. If you search for "Pitchdeck" and then click on the "Plugins" tab, you'll see the Pitchdeck Figma plugin pop up. All you need to do to run it is click on the result and then click on the "Run" button down here. Or, I'd recommend clicking on this more options icon here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for easy access later.
So, I've already gone ahead and saved my Figma plugin to my list. I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.
If you're new to the Figma plugin, the way it works is it basically allows you to take any of your frames that you've designed in Figma, and each of those frames gets treated as a slide in the Figma plugin. So, you can go ahead and create these slides in 16x9 ratios, typically 1920 by 1080, and you can start constructing your slide deck in the Figma plugin, which can then be exported to various formats.
Today, I'm not going to be going into details about how to design the slides or how to add animations and things like that. There are some other videos on the channel if you want to check those out. Today, I'm just going to be assuming you've already got your presentation ready to go, and you want to upload it to the Pitchdeck presentation web app and then look at some analytics based on who's viewing those slides.
So, let's get started by first uploading the presentation. You can see here, if we go to the analytics button, now it's going to tell us that we need to upload the presentation to the Pitchdeck web app first. So, we can do that through the export panel. If you close that off and just go straight to the export panel, you can click on this export button in the top menu here. Then, you just want to make sure that the Pitchdeck presentation option is selected as the format. There are some other options you can export to, like PowerPoint and PDF, but the analytics feature only works for the web presentation. So, I'm just going to make sure Pitchdeck presentation is selected as the format, and then I'm going to click on "Upload web presentation." This is just going to export the slides and create a link that you'll be able to use to view the presentation in the browser using the Pitchdeck presentation web app.
You can see here we've got our presentation uploaded. So, we can see what that looks like just by copying the link, clicking on the little copy icon, and then pasting that into the browser. I'm just going to paste that in there now, and this is going to load up the presentation that we just uploaded from Figma. You can see here we've got our slides, we've got our first slide, second slide, and all of the other slides as you'd expect. So, you can go through these and view the presentation directly in the browser. You can basically share this with someone, or you can present the deck yourself using the Pitchdeck web app.
Now that we've got this loaded and now that we've had a look at it in the browser, what we can do is actually now close off this presentation. If I go back into my Figma file, because I've now uploaded the presentation, if I go back into the Figma plugin main screen and just click on the analytics button, this time, because we've got a link created, you can now see that the analytics panel loads up with some statistics based on what kind of activity the link has had.
If we click on this activity tab up here, you can basically see the session that we just had in the browser. So, the one we just opened up a minute ago, this is a record of that session. If we expand this out, we can basically see all the slides that we looked at, what time the presentation was opened, when it was closed, and if we click on any of these slides, this will basically jump to those slides in the Figma file. So, you can see exactly which slide was which. We can also see a graph of views, showing which slides have actually been viewed and for how long each slide was viewed for. You can see here, this is a total duration of each slide. We can see here that the third slide was the one that had the most time spent on it, and the same with views. You can see these are basically all even because there was only one slide viewed.
Going back to the overview, the other cool thing we can do is create custom links. Instead of just having the default link which we got from the export panel over here, you can also create custom URLs. You can get to that either by clicking on this link here or just clicking on the analytics button. What that allows us to do is basically create custom URLs that we can attribute later. So, what I mean by that is if we create one for me, I'm just going to put my name in there and click on "Create new custom share URL." That's going to give us a brand new custom URL over here.
If we open up this settings panel, you can see here that we've got a brand new link that is specific to this link. If we click on the copy button down here and open that up in the browser, I'm just going to paste that in and load that up. You can see here the presentation is the same, so it looks exactly the same. The one thing you'll notice is that the controls at the bottom have been simplified. It only gives you access to the thumbnails for jumping around. If you did want to enable those controls and have more of those advanced features available for the person viewing, you can do that by toggling this "Enable all toolbar buttons" switch on. But by default, that's turned off. The other thing you can do is turn off activity tracking. So, for whatever reason, if you didn't want any activity to be logged on this particular URL, you can turn off activity tracking. By default, it's turned on. You can also disable the link entirely. If you wanted to decommission the link just for this person or just for this group, you can toggle that on, and that will disable the link. We can basically see what that looks like in a second if we just go through a few of these different slides, just to get some analytics data in there that we can look at in a second.
If we now go back into the Figma plugin and we decide to disable that link, we can check "Disable link", if we now try to visit that link again, I'm just going to reload the page, it's going to tell us that the presentation wasn't found. That just means that the person who has the link isn't going to be able to view the presentation with that setting turned off. So, if you basically want to archive a link for a certain person or a certain group that you've shared a custom URL with, you can do that just by disabling the link, and that will put it out of commission. You can re-enable that at any time as well, just uncheck that link, and then if you go back to your browser, paste that link in again and refresh, you can see that it's active once again. That's just a really quick way of decommissioning links if you wanted to archive them or turn them off for someone that you sent it to who you no longer want them to have access to.
That's basically what it looks like there. The cool thing is, because we've got this new custom link created, what we can do is basically filter by that person. If we close off our presentation here and go back to our Figma file, what we can do is refresh the data just by clicking on this little refresh icon up here. Click on refresh, and it's just going to refresh our analytics. We can see now that we've got three link opens, still one unique visitor because it's just me, and we've got a 48% completion right now and one minute 10 seconds of total time viewed, and all that sort of good stuff. But what we can do is, if we just want to narrow that down to that custom link, we can go up here to this dropdown box and instead of saying "Show all presentation data," we can say "Only show data for Adam." I'm going to click on that option now, and that's basically just going to filter it down to any activity that was specific to that custom link that we just created. It's going to exclude all the other activity. It's only going to include any activity that was created under that particular link. We can see here we can show all of the data, and then we can show just that link. You can see that it's quite different down here.
This also applies to all the other tabs. If you go to the activity tab, you can see here that if we only show data for me, it's going to show those two entries, or we can show all presentation data and get that third entry in there with the default link as well. You can also just filter by non-custom links. So, if you've got a bunch of custom links but you only want to see the data for the default link, which the Figma plugin creates automatically, you can filter down by that as well. So, you've got a few different options for filtering out the data, and you can see here that we've got our data basically tracking what kind of journey that user went on in the slide deck. You can see here they open the presentation at this time and then basically went through a bunch of these different slides, clicked around a little bit, viewed different slides for different durations, and then closed out the presentation. That's basically what it looks like there.
The other cool thing you can do is download this data to a CSV. You can click on this "Download CSV" button. I'm just going to do that now, save that to my desktop, and if I open up that CSV as a preview, you can see here that the CSV file we just saved to the desktop basically contains an export of all the data that's in the activity Figma plugin. You can see here we've got the open time, the location, how many interactions, total duration, and this is filtered by whatever options you put in the top here. So, we can export it with all of the data. We can do that again, download the CSV again, save that to the desktop. I'm just going to replace that and open that up again, and you can see this time it's included the default share link as well. So, we've got all the data in there.
The other thing you can do is filter by time. So, if you wanted to only show activity from the last 24 hours, you can do that, or the last week, the last two weeks, the last three months. You can basically specify time, but by default, it's going to do from all time, from whenever the presentation was first created or whenever the first person viewed it, which is in this case today. Finally, the other thing you can do is exclude yourself from the data. Basically, if you are creating these links or viewing the presentation on your own computer, in this case, we're doing all of this on the same computer, and we're basically including our own views by default. Even though I've created the share link here and maybe I want to send that to someone else, because I've already looked at that, this data is coming from me. If you want to exclude that, you can click on this "Exclude your views" toggle up here, and that will basically exclude any activity that has happened on your own machine, whatever you're currently using on your computer to use Figma. You can exclude your own views from the data, which might be helpful if you just want to tidy up the data by excluding your own views.
You can see here there's basically no data at the moment because we're the only one who's looked at it, but if we include our own views again, you can see it's going to give us all the data there as well.
That's basically what it looks like, and yeah, that's basically it. You can create as many of these share links as you want. So, if you want to share them around with different stakeholders, different investors, different clients, you can create an individual link for each of them, and that will be their own special link that you'll be able to see exactly what kind of activity that link is getting based on who you've shared it with. You'll get a nice breakdown in here over time when all of that data kind of starts to make more sense when you've had more than a couple of views on it. It'll start to be more meaningful over time.
We'll leave it there for today. I'm sure the feature is going to be improving over time, but this is kind of the first initial version of it just with some basic analytics at a high level, and then, of course, the detailed views that you can go into as well, as we just looked at.
So, yeah, we'll leave it there for today. I hope that's been helpful if you've been curious about how your presentations are performing once you do share them around. This is going to be a really easy way to get a quick overview of what slides are most popular, who's looking at what, and yeah, hopefully give you a bit more of an idea of what's working and what you might need to tweak.
Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.
Adam Brock
Founder of Hypermatic
The secret weapons used
in high performing teams.
World-class teams of designers, developers and copywriters use our Figma plugins to 1,000x their daily workflows.
TinyImage
タイニー
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Try TinyImageGet started today
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Convertify
コンバート
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.
Try ConvertifyGet started today
Emailify
メール
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Try EmailifyGet started today
CopyDoc
コピー
Everything you need to easily export, import, localize and update text in your Figma designs.
Try CopyDocGet started today
Bannerify
バナー
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Try BannerifyGet started today
Crypto
ロック
Securely share your Figma designs and prototypes as password protected URLs or PDF files.
Try CryptoGet started today
Favvy
ファビー
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Try FavvyGet started today
Pixelay
ピクセル
Compare and visually QA your Figma designs against real website URLs using smart overlays.
Try PixelayGet started today
HyperCrop
クロッパー
Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
Try HyperCropGet started today
Commentful
コメントフル
Supercharge your Figma comments and gather external feedback from stakeholders.
Try CommentfulGet started today
Weblify (Beta)
サイト
Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.
Try WeblifyGet started today