Used in this video
TinyImage
タイニー
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Try TinyImageGet started today
Video Transcript
Today, I'm going to be showing you how to export PDFs with password protection directly from a Figma.
So, I've got this three frame design, which are the principles of design that Figma adheres to, and this is just an example file that I'm going to use to show you how we can export it as a PDF and add password protection on it; in order; anybody I send that PDF to will only be able to open it if they've input the right password that I've set before exporting.
The first step is installing a Figma plugin called TinyImage. If you haven't already done that, you can go to the top left corner up here with a little Figma icon and if you click on that you'll see a little search bar up here, you may have to click on "Community" or "Plugins" first, but once you do type in the search bar the word "TinyImage", underneath "plugins" you'll see a result called "TinyImage Compressor" pop-up. If you haven't already installed it, you'll see a button on the right hand side that says "install"; and if you click on that it'll change to say "installed" with this little check mark, and once you see that checkmark that means the Figma plugin is installed and you can switch back into your Figma project or Figma file and we can get started.
To run the Figma plugin, you can just right click anywhere and go down to "plugins", and then go down to "TinyImage Compressor" and click on that, and that's just going to load up the plugin that we just installed, and the default view is going to show you a list of all of the elements in your design that contain export settings that you've added in Figma; for example if I click on this frame over here you can see in the right-hand column that we've got one export setting of "PDF", of course I can add more if I wanted to, and if I refreshed the TinyImage layers you'll see that PNG with a 2x retina setting will pop up in the list; that's what it does, it just looks through any layer in your file that contains the export settings on a layer it's set in Figma over here and it will list out those as some of the images that you can compress that you select; for today we're just going to be looking at PDFs.
I'm just going to leave the PDF settings on there as is, and up here we've got our quality slider; you can see it's changing 150 dpi up to 300 dpi, and then at the lowest you've got 72 dpi, but 150 dpi is a good mix between compression size and quality, so I tend to leave it at 150; but you can change it depending on new use case. Today I'm just going to show you what it looks like to export a PDF without a password first, and then I'm going to show you how to add a password on to your PDF exports too. If I just click "Compress Selected", I'll just do one; it's just an example I'm going to click "Compress Selected", and this is just going to do a regular TinyImage PDF compression without any password protection.
If I save that and open it up, you can see here that it's exported it as we'd expect, and we've saved 98% of the original file size that would have been exported from Figma normally. It's taken it down from 5.83 megabytes down to 144 kilobytes; we've saved quite a lot there. That's just the regular PDF export from TinyImage compression, but if we rerun the Figma plugin, which you can do easily by going over to the right hand side and clicking on the little TinyImage icon; if you click on that it means you won't have to right-click go down to "plugins" and find the Figma plugin every time; it's a quick way of doing it.
Now that we've had a look at what it looks like without the password, I actually want to export this PDF from Figma with a password. I'm going to do all three this time, and I'm going to go to the "settings" icon up here, in the top right you'll see this little "settings" icon, and if you click on that that will load up all of the TinyImage Figma plugin settings. There's one about halfway down which is called "PDF password protection", and you'll see here that we've got a little checkbox which says "Require a password to open exported PDF files", and if I just click on that, that will toggle it on, and you can see here the text box underneath has been made available to us. If I turn that off, this is disabled, if I turn it on, it's now editable; that text field is going to allow me to specify a password. There's an example of what that could look like here, but of course you can use whatever you want; in this case I'm just going to use the password "figmatic" and that's going to become the password that is required whenever one of these PDF files is opened.
Now that I've set that, that'll save automatically as soon as you click out of it; if you go back into settings you can see it's still got "figmatic" set there, and now what I'm going to do is I'm just going to export or compress these three frames again... actually, I'll just do one just; it's the same example and I'm just going to click "Compress Selected", exactly the same as before, but this time of course we've just got our password protection setting enabled. In this case I'm just going to rename this one to say "password" so I can tell the difference, then save that to my desktop, and you'll notice the file size is exactly the same; the PDF password protection doesn't impact the file size at all.
If I go back to my finder, you can see here the one we just exported was down here which I could open freely, however, when I go to "approachable password", which is the one I just exported with the password on it; if I try and preview that one, you can see here that it's telling me this document is password protected and it wants me to enter a password to view it. If I type in that password which was "figmatic", and hit enter, that's now let me view the PDF. You can see here at the top it's got "approachable password.pdf"; that was the password protected one.
If I close that off again and then try and reopen it, you can see once again it's asking me for the password; the same thing will happen if I double-click it and try and open it with the preview app, exactly the same thing; it's going to ask me for that password which I just copy/pasted. If I enter that once again, it's allowing me access to that, and if I use the wrong password, if I just put in a couple of letters; it'll tell me that it's an invalid password. That's what it looks like to export the PDF files from Figma with a password.
There's another way with that we can do this as well; if I just close this and restart it from the right-hand side; I'm just going to load up the Figma plugin once more and this time instead of exporting; obviously you could select as many PDF files as you want and these will all get exported as individual PDF files each of which will have the password protection on them; you'll get three files all password-protected separately, but of course there's going to be some cases where you want to export these files as a single PDF and password protect that. TinyImage lets you do this as well by clicking on the top left button called "Create a PDF".
If you click on "Create a PDF", that's going to bring up this interface here, and you can see down here it's inherited the setting from the settings icon that we clicked before, it's inheriting that setting because it's assuming that the password protection that we wanted for the single exports we also want for the merged ones. Of course, we can toggle that on and off as we could before; it's remembered the password that I want to use, and now that I've got it checked, it's going to make sure that this export is also password protected. Now I've got two out of my three frames selected, I actually want all three selected in this case and I can rearrange these if I need to change the order of them; I don't have to go over into the Figma side panel over here; and this is a new feature, you can rearrange the frames independently of the main Figma design; you don't have to reorder those you can just do it interface.
Let's say I want the red one to go first, and then the yellow one, then the gray one, that's all good; then I'm just going to make sure the color profile is "RGB", which is the default, and now that I've got those three selected and ordered, and I've got my password protection setting for the PDF Figma export enabled, all I need to do is click on "Export to Merged PDF"; and after you click on that, it's basically going to merge those three frames into a single PDF. It's just finished, and I'm going to save that to my desktop. So, if I open that up, once again, if I preview that; as expected, it's got a password prompt. I'm going to put in my password again and hit enter, and there we go, we've got our merged PDF. We've got the three frames in the one PDF now, we don't have three separate PDF files, they've all been merged into a single password protected compressed PDF directly from Figma. That's roughly what it looks like.
The compression ratio is very similar, we've got a 97% saving; however, because we've tripled the amount of frames, it's gone down from 12.5 megabytes to 436 kilobytes; as an absolute saving, that's that's quite high, and as you can tell the quality of the file is still very good; it's very sharp and the images look great. That saving is super nice, and the cool thing is I can now send this PDF file securely via email or via Slack as a password protected PDF, and anybody on the other end of that message is going to have to know what the password is before they can look at the contents of that PDF. This is now a secure password protected PDF from your Figma design, and you can feel safe sending that to anyone, as long as you also kind of securely send them the password somehow, ideally not in the same message as the the PDF, but either way it's up to you.
That's roughly it; password protection as you probably know, isn't something that's native to Figma for PDFs. As far as I know, TinyImage is the only way to add password protection to your PDF exports directly from Figma. I'm sure that there's some sort of tooling in the open, maybe that's Adobe Acrobat professional or something like that, where you could theoretically export a PDF from Figma and somehow add a password to it, I'm not too sure how to do that; but if you do want to do it directly from Figma, this is the way that I would add a password to my PDF exports.
I hope if you've been looking for a way to add password protection to your Figma PDF exports, or if you were just curious of what it looks like in the TinyImage Figma plugin, I hope that you've learned something from this video; and I would encourage you to try it out, and use it for yourself to see how it goes. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this.
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