I think more and more people are using Figma to make slides. Recently, I have been using Figma as well. I like Figma because it is a tool with a high degree of freedom, and also because I can create common decorations for slides using components, etc., which makes it highly productive.
I would like to introduce a few tips for creating slides with Figma.
Use a slide sharing site such as SpeakerDeck instead of share slides in a prototype for most cases.
The reason for this is that if you share on Figma prototypes, they will not be displayed until all the Frames have been read. This is fine with Speaker Deck, which displays the first slide as soon as it is loaded.
As an example, I made a slide of a cat. As you can see, it takes a while to open.
So my personal recommendation is to export PDF from Figma as much as possible and use slide sharing sites.
However!!! Sharing as a prototype also has its advantages. If you update Figma, the shared URL will be updated as soon as you update it. It is not easy to export the PDF file and upload it every time you make a change. So, if you expect that the frequency of changes will be high & you don’t mind making the viewers wait a little, it would be a good option to share as a prototype.
How to make a PDF file
First, Figma itself provides a feature called Export Frames to PDF. You can run it from the command palette (⌘ + / to open) or from Files > Export Frames to PDF.
The second option is to use the TinyImageComporessor plugin.
If you run the plugin with a Frame selected, you can generate a PDF as shown below.
The difference from Export Frames to PDF is the file size. For example, the last slide I created was about 12MB with Export Frames to PDF, but it was compressed to 4MB using this plugin.
There is a limit to the number of times you can use this plugin in a month, but I think it is better to use this plugin basically because it also compresses the file.
About the order of frames
When creating slides, you often add slides in the middle of slides that have already been created.
At such times, you may feel uneasy. “I wonder if this is exported/shown in prototype in the correct order…”
So I tested!
I tried to test the order of the items by lining them up like this and using various methods.
The order of frames is 2 -> 1 -> 3, which is different from how it looks on canvas.
First of all, Figma prototype and Export Frames to PDF had the same logic: 1 -> 3 -> 2, which is the order of appearance, regardless of the order of the Frames. In other words, you can reorder the frames from left to right and from top to bottom.
Next, let’s look at the case of using TinyImage Compressor. It seems that the default is determined by the order of layers. In other words, in the previous example, the layers are created in the order 2 -> 1 -> 3.
But you can change this order! The same logic as Figma is used for Sort frames Top to Bottom.
So basically, it is OK as long as they look in the same order 👌.
Use Super Tidy for reordering
However, there may be times when you want to arrange Frames in the same order as they appear. In such cases, the Super Tidy plugin is useful.
The “Tidy” command can be used to align frames that are not in the correct height.
The command “Reorder” will make the order of layers match the appearance of the layers.
Starting with a Template
The Community has many useful templates for slides. Simply search for “slide” in the Community and you will find a lot of good ones.
Adding Animation with Pitchdeck
A plugin called Pitchdeck can be used to add animations just like slide software.
When you run the plugin, a screen like this opens, allowing you to add an animation to each slide as it appears. There are many types of animations.
Click Export Presentation -> Update Web Presentation in the upper right corner to upload the slides to the Pitchdeck site. After the upload is complete, you will see a screen with the following URL.
When you open the URL, the page for the slides opens as shown below, complete with animations. Amazing!
It seems that up to 10 free exports are possible per month. Try it when you want to make elaborate slides.
That’s all I have to say about tips for creating slides with Figma.
Have a good Figma life!
