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 a quick tutorial on how to compress and downsize large PDF presentation exports from Figma using the Pitchdeck Figma plugin.
To get started, if you just jump into your Figma file, click on the little "Resources" icon up here. If you search for Pitchdeck, you can run the Figma plugin by clicking on the Pitchdeck item under the "Plugins" tab. Then, just click on this "Run" button here, or you can click on this little "Save" icon, which I'd recommend. That will save it to your Figma plugin list for easy access later. I've already clicked on the save icon, so I'm just 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 that it works is it allows you to load in frames, components, and instances from your Figma page as slides. Then, you can export those slides to various formats like PowerPoint web presentations and PDF files. Today, I'm going to be focusing on PDF files, specifically for large presentations that contain very high-resolution image assets.
You can see here I've got a couple of assets that I've downloaded from Unsplash, and you can see the size of them max out at the 4,000-pixel size limit for Figma. What I'm going to do is show you what this looks like when I apply those kinds of high-resolution fills to our image frames. I'm going to drag and drop those images into here, swap out these image frames that I've already kind of got added in, and I'm going to do a really quick export without the downsizing feature. Then, I'm going to show you it with the downsizing feature to compare the difference.
If we were just to export this from Figma itself, go to file and then click on export frames to PDF. This will give you a PDF file native exported from Figma. If I click save on that one and then open up the file information on that one, I'm just going to click get info and see what that looks like. We can see that the exported PDF from Figma is about 20 megabytes. That's fairly large for a deck with nine slides in it. I'm just going to close that off.
Now that we've kind of got a baseline for exporting the PDF from Figma and seeing it's about 20 megabytes, what we can do is now go to the export feature in the Figma plugin by clicking on this export button in the top right-hand side. Clicking on that, and by default, it will select the Pitchdeck presentation upload option. So that's the default, but we're actually going to click on that option. We're going to skip the PowerPoint keynote and Google Slides option and just go all the way down to PDF.
For PDF quality, I'm just going to leave that at 300 DPI, which is the maximum best quality for now. You can reduce that if you want to get even further compression for DPI. So you can set it to 150 DPI for screens. 72 DPI is going to look a bit average, so I'd probably just leave it at 300, and you'll get the best quality. I'm just going to do another baseline test without the downsize option enabled. I'm going to go through that in a second.
But just exporting this to PDF with the regular export from the Pitchdeck Figma plugin, this is going to optimize the PDF, as you can see. If I save that to my desktop, I'm just going to click on the get info for that option as well. If we open that up, we can see here that the compressed version is about 5.6 megabytes. But we can actually get it even smaller than that. So, I'll show you how to do that now.
If you go back to your export settings, just click on the export button one more time, and this time, we're going to enable a new feature called downsize large Figma image fills. To explain what this option does, as you can see here, you've got these really big 4,000-pixel image fills or images that have been added to these layers over here. These layers are only 700x700 pixels, but the underlying image fill is much greater. So the underlying image fill is about 4,000 pixels. What that means is that the full-resolution image is still being loaded into the Figma frame here and still being exported to your PDF files. But because all of that extra size doesn't really matter for a smaller layer, what this little toggle here will do is it'll go through any image fills in your slides, and it will check if the image is greater than 2 times the size of the layer itself. Then, it will automatically downsize that to a 2X resolution. This is going to save us a lot of image data.
If we enable the Downsize large image fills option and then re-export that to PDF, I'm just going to click on export to PDF. Once that finishes up in a moment, you can see here it's downsizing the image fills, so it's checking them, and it found that these two are going to be much larger, so it just downsized those. You can't tell the difference in quality. It's still clear. Now, if we download our PDF file one last time, so I'm going to click on download your PDF file, save that to my desktop.
Now that we've saved that to our desktop once again, we can click on that file, get the info of that, and if we open that up, you can see that that's now been shrunk down to 1.8 megabytes. So, we've gone from 20 megabytes with the native Figma export to about 5 megabytes with the PDF export from Pitchdeck without the downsize feature enabled. Then, we've now shrunk that down more than half again to 1.8 megabytes with the downsize toggle enabled.
That downsize toggle really makes a difference if you've got a lot of slides or even just a few slides with really large high-resolution image fields that have been used originally. You don't need all of that image data behind the scenes when the layers are much smaller. So, this feature will automatically go through and do that. It's worth noting that this will only need to be done the first time around. If we were to rerun this now, it's not going to try and re-downsize those images because they've already been downsized. It'll skip over those, which means that the first export with this toggle enabled is always going to be a little bit slower. But every subsequent rerun, this is worth just keeping enabled. So, if you've added any new images that are larger, it'll just check those out before it exports the PDF. You're ensuring that you're always getting the lowest size possible with that toggle enabled.
That's basically it. I just wanted to show you this quick tutorial with that new downsize toggle, which is going to help you shrink or compress all of these really large Figma exports when you are exporting your slides to a PDF file using the Pitchdeck Figma plugin with this downsize feature. As I mentioned as well, you can play around with the DPI in combination with that. So if you were to set that to 150 DPI, that file size would shrink down even further. So, that's probably a pretty good compromise if you want to play around with those settings too.
Thank you as always for watching. I hope that's been helpful for compressing your PDF exports, and we'll be back soon with more Figma tutorials like this one in the weeks and months ahead.
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