How to export presentations from Figma to PowerPoint using Pitchdeck
Follow along with our complete step-by-step free Figma tutorial video walkthrough.
Used in this video
Pitchdeck
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Video Transcript
Today, I’m going to be showing you how to export your collaborative presentation slide designs from Figma to PowerPoint; or to a PowerPoint file, I should say.
To do that, we need to install a Figma plugin called Pitchdeck. If you haven’t already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you’ll see a result called "Pitchdeck Presentation Studio" pop-up. I’ve already got it installed and that’s why I’ve got this little check mark here and it says "installed", but if you don’t, this button on the right hand side will say "install", and if you click on that it’ll change to look like mine, and once it does you’ll be ready to go.
Now we can switch back into our Figma project today I’m just using Figma file that I designed as a slide deck for Dieter Rams "Ten principles for good design" to a deck with eleven designs, and essentially I want to take these slides out of Figma and I want to create a PowerPoint presentation that I can use in Microsoft PowerPoint.
To do that, we can run the Figma plugin we just installed. If you right-click anywhere and go to "plugins" and then go down to "Pitchdeck Presentation Studio" and click on that, that is just going to fire up the Figma plugin we just installed the, Pitchdeck Figma plugin; and once it loads, you’ll be able to see all of the frames from your Figma file. All of these frames on the left here will get translated into slides inside of the Pitchdeck Figma plugin; it’s currently looking through all the frames, looking through all the layers, the text layers, and image layers, and it’s constructing them into slides that we’ll be able to use in just a moment.
Now that it’s loaded all of our slides, you can see here that the slides have been mirrored to our designs. If we click through here, you can see we’ve got all of our slides as we would expect from our designs above. In the left hand side, you can see that we’ve got a list of all of our layers and those are being mirrored from the Figma layers in the Figma layers panel on the left here; you can see here we’ve got "intro", "principle one", "principle two", and that’s "intro", "principle one", principle two; but you’ll notice that the layer order has been exactly reversed, and the reason for that is (maybe this is just me), but when I’m designing things in Figma and when I was designing this collaborative presentation, I would design this slide for example, and when I was happy with that, I would copy/paste that slide or that frame, and Figma would put it right next to it and then I could just edit the content and keep the the layer pretty much as it is; but in Figma, when you paste, essentially the layers each layer on top of each other in a reverse order; whenever you paste something, the layer will be moved to the top of the layer’s order in the left-hand side here.
What Pitchdeck does is, it automatically reverses those layers by default and assumes that you’ve been copy pasting your frames; that means that the order is actually going from bottom to top in terms of this layer order here, and that’s why we’ve got the correct order that would expect here, however if that doesn’t suit you, what you can do is you can reorder these frames by clicking and dragging on the little "drag" icons next to any of the slides in the Pitchdeck Figma plugin. All I did there was just hover over the icon and then I’ll get a little grabbing icon, if I click that, holding the mouse, and then move it up or down I can rearrange these frames super easily and that does not impact anything that’s going on in the Figma file; this is just related to the plugin. Editing this layer order here won’t mess up your designs or change anything in the original design, it’ll just tell Pitchdeck that this is the order that you want these frames in; for now I’m just going to leave it as is, and keep the intro where it should be.
The other thing you’ll notice is this little preview section here; this is an exact one-for-one with our slides, and what it’s going to look like when it gets exported. The titles are up here; and the other thing to note is underneath the preview we’ve got this "speaker notes" section and this is just a text field, a text area and you can type in any content that you want there; you can put bullet points in there, you can put a little paragraph like this one, you can just put a little sentence, or just a note for yourself; and these are the notes that will not be shown to the audience and won’t be shown inside of the presentation content, these are just for you as a speaker or whoever is presenting this presentation; if you need to add them you can add different notes to every slide and those will be available to you once we export our collaborative presentation very shortly.
Now that I’m pretty happy with the speaker notes, I’m happy with the ordering, you’ll notice here that we’ve got these animations set on all of the layers; by default those set to "no animation"; you can see here we’ve got this "no animation" setting, those are all defaulted to no animation, but I’ve already applied some animations which get saved between opening the plugin; however for this particular Figma tutorial, because we’re going to be exporting to a PowerPoint file, these animations unfortunately don’t get brought across into PowerPoint. These are primarily used for if you’re uploading the presentation to the Pitchdeck URL; we can see here if we open up the export formats just in the top menu bar here by clicking on the select box we’ve got two groups we’ve got "animated" and underneath that is the Pitchdeck URL option, which we’ve got selected by default, and then we’ve got "static" format, we’ve got "PDF file", "PowerPoint file" and "Keynote file"; that means that because it’s static, all of these animation settings do not get carried over to any of these static formats, they’ll only be carried over to the Pitchdeck URL format.
That’s just worth keeping in mind in case you’re wondering why you’ve animated these things but you’re not getting animations in your PDF file, PowerPoint or Keynote; these are just not supported in those formats because we’re using very specific and custom animations that will only work in a web-based environment, like the Pitchdeck one.
If you do want to see how that works, I’ve got another Figma tutorial up on our YouTube channel, and you can get a really deep dive; it goes for about 30 minutes and goes through all of the details you need to know about animations and takes you through the upload process and shows you what a presentation actually looks like when you do that option, but for today we just want to go from Figma to PowerPoint.
In this case, I’m just going to open up that options panel go down to the "PowerPoint file" option and click on that, and when I select that you’ll see that it’s changed up here, and it’s also changed my button to say "Export PowerPoint"; because I’m ready to go and the design from Figma is looking really good, I want to get it out of Figma to PowerPoint; I’m just going to go ahead and click on "Export PowerPoint", and what this is going to do is it’s going to generate slides for a PowerPoint file; that’s a native PowerPoint file that’s going to come out of Figma in just a moment. It’s going to take all of our Figma designs and put them into a PowerPoint presentation.
You can see here it’s just prompted me to save a file; so I’m just going to save that to the desktop. By default it just names it whatever your Figma file Figma document is called, but you can obviously change that if you want to; I can just rename that and you can see here it’s just changed it for me to look like the way I want. I’m just going to click "Save", and as you can see here it’s just confirming that our PowerPoint file is ready and we’re able to open this in either PowerPoint and Google Slides or Apple Keynote, or just share it with somebody.
Now that that’s been saved I can open up finder and go to my desktop and you can see right here I’ve got my PowerPoint file which I can double click; I don’t have Microsoft PowerPoint on my computer but I do have Apple Keynote and this PowerPoint file will open up in that just fine as well. There we go; that’s Apple Keynote running now, and you can see here we’ve got all of our slides directly from Figma, and that’s all of them as would expect; we’ve got background colors set to white, we could obviously change that in here if we want to, and you can see all of the other elements still say the same; I’ll set that back to white now. We can move around our layers if we’d like to, and the other neat thing is if we go to open up our presentation notes, if you just go to "view" and then go to "show presenter notes" (this might be different in PowerPoint), but if I click on that, you can see here that the text that we added in Figma has been carried over into our speaker notes, and I can edit those if I want to, or I can get rid of some of them and remove those, but that’s all been loaded in; that’s really neat.
The other thing we can do is, because these are just images, we can add effects to them if we like, we can change opacities, and do all the normal stuff you’d want, like add animations. We could add a "blur" effect there and that would work; all of the layers from Figma have essentially been imported one-for-one into a PowerPoint file; you could open this up in Microsoft PowerPoint (as I said I’m just using Apple Keynote at the moment to give you an idea of it), but this is a PowerPoint file that will open in PowerPoint, Keynote or Google Slides, if you prefer.
That’s that’s all there is to. It’s very straightforward as you saw; it only took you know maybe five to ten seconds to export our collaborative presentation from Figma to PowerPoint; it’s very very quick.
I’m just going to close it off now, but if you need to make changes to it, you can you can either make those changes in PowerPoint, or if you prefer to leave Figma as your source of truth, you can just make your updates in the Figma project file and rerun the Pitchdeck Figma plugin, which you can do just by going over to the right hand side here, under "plugin", and clicking on the "Pitchdeck" little pancake icon, and that will rerun the Figma plugin. You can just keep exporting your collaborative presentation designs from Figma to PowerPoint from as many times as you want, and it’s just going to keep doing it as many times as you need to; that way you can keep your collaborative presentation design in Figma as your source of truth for your slides, along with your design elements and your components, and just keep exporting it from Figma to PowerPoint as needed.
I hope that’s been helpful, if you’ve been wondering how to get your slides out of Figma into PowerPoint, this is the way that you can you can go about doing that. I hope that it helps you or your team with something that you’re working on or if you’ve been trying to solve this problem for yourself. Thank you as always for watching, and we’ll be back very soon with more Figma tutorials for you to check out.
Export Figma slides into PowerPoint, Google Slides or Keynote
If you can't use Figma's prototype mode to give a presentation or you are simply required to provide a .pdf, .ppt or .pptx files, worry no more. There are simple ways how to export Figma slides to .pdf, .ppt, or .pptx. This means they will work with all other popular tools like PowerPoint, Google Slides or Keynote.
Let's dive into them.
Option 1: Export into .pdf and then use a 3rd party service to convert it to a .ppt or .pptx
This is a two-step process which means there is a bit more work involved. Another drawback is that the information about layers will be lost and you will most likely end up with uneditable slides so I recommend exporting only the finished final work. However, this option is free.
- Select all Figma frames you want to export.
- Export to .pdf in the bottom right corner (this exports a .pdf for every frame).
- Now you need to combine the .pdfs into one, otherwise, you will get a lot of separate .pptx files in 4th step. Use smallpdf or use Preview on a Mac directly.
- Use a 3rd party converter to convert .pdf into .ppt or .pptx like smallpdf or Zamzar.
Option 2: Use the Pitchdeck Figma plugin
Pitchdeck Presentation Studio is a Figma plugin that allows you to directly export the slides into .pdf, .ppt, or .pptx. What's even cooler, the exported slides text will be editable and you can add speaker notes or transition animations. Pitchdeck is free for the first 10 exports, after that, you will need to buy a subscription.
- Install the Pitchdeck plugin & run it
- Select the slides you want to export (if you are using a templatery.co template, don't forget to remove the thumbnail)
- Hit the "Export presentation" button
I would be happy to update this post if there are other cool ways to export Figma slides, let me know hey@templatery.co
Templatery is made by Filip Stollar Website template Prist The dog came with the website template and I love him
EXPORTING AND IMPORTING; FIGMA + POWERPOINT
Figma is an incredibly powerful design tool. It’s well-known for it’s real-time collaboration, and web-based interface. Figma as a company has shown interest in Design in Africa forming The Figma Africa community. So, basically, a platform for the designers in Africa to come to interact, mentor, learn, grow and profit together while engaging in design activities, events, weekly challenges and sprints which are designed to address certain needs of their immediate environments and also present themselves to the global design community irrespective of their skills level.
Figma Africa, Accra, had a recent 3-day Design bootcamp that educated individuals in basic design principles, introduction to design thinking, user experience design and presentation skills. This was organized in partnership with the German Institute of Business and Technology, Developers In Vogue and Fairpointers Limited. This bootcamp saw the coupling of Figma and PowerPoint to create impressive presentations and user experiences having some of the participants pitch their ideas for cool Figma swag.
So, I will jump straight to my story where I demonstrate how to couple the power of figma design tools and quick exporting capabilities with powerpoint to create amazing presentations.
I will talk about;
- Creating vector shapes(icons) in figma
- Exporting of icons
- Importing of exported icons into Powerpoint
Creating Vector Shapes (icons) in Figma
This is how a new figma file looks like;
I’m using the desktop client which, much like other popular desktop apps today (Slack), is an Electron-based app. I will create a frame 800×800 pixels (depends on what you want) then add a grid of size 50px and grid colour : #E5E5E5 to my frame.
So the frame should look something like the above image.
Figma just like other design tools, provides you with the basic shape tools to use; the rectangle, the ellipse, line, polygon, arrow and star tools. In this case, we are going to use the rectangle tool to recreate the Figma logo for use in our powerpoint presentation.
So we select the rectangle shape tool and create a square 100px by 100px with fill colour : #ADADAD.
Let’s duplicate the squares 5 times (by copying and pasting the shape) and using the options on the right, and using the independent corners option, change the corner radius of the individual squares as follows;
Shape 1: 50 0 0 50
Shape 2: 0 50 50 0
Shape 3: 50 0 0 50
Shape 4: 50 50 50 50
Shape 5: 50 0 50 50
So we have something like this;
At this stage, we have our Figma logo, we add colour to our logo using the fill tool on the right option panel;
Let’s add some text to our logo using the text tool in Figma.
Add “Figma Africa”, Font: Roboto, Regular, 48pt with Fill: #000000
Let’s group the logo (Select all shapes and text, press CTRL/CMD + G) and then align Horizontally and Vertically Centred.
Exporting of icons
Exports are possible on any layer in Figma. Most commonly the Group and Slice primitives work best for export and have the most settings. Each represents a rectangular area to be exported with or without padding for the enclosed geometry. Figma allows export of jpg, png and svg file formats. You can export your work in Figma by pressing Shift + Command/CTRL + E or selecting Export from the menu:
In exporting our logo, we will export 1x .png version of our logo;
Importing of exported icons into Powerpoint
Figma image exports can be used in any presentation or design tool that accepts the .png .jpg or .svg file formats. This means that, figma exports can be used for website and mobile UI design.
How to Export Figma to PowerPoint (PPT)
How do you export a Figma presentation to PowerPoint? As a designer, there might be times when you need to share your designs with clients or team members who are more comfortable with PowerPoint than Figma. Especially business and management people love their Microsoft product (I know right). So, how do you go about this? This post will walk you through the process how to export a Figma file to PowerPoint/PPT. We’ll also discuss the some of the benefits of each solution.
Why Export Figma to PowerPoint (PPT)?
PowerPoint is a widely used tool for presentations. Converting your Figma designs to PPT format can be useful for:
- Sharing designs with clients or team members who don’t use Figma
- Presenting your designs in a familiar, easy-to-use format
- Adding your designs to existing PowerPoint presentations
- Crafting nice slides in Figma and then using them in PowerPoint
How to Export Figma to PowerPoint
There’s a few ways to convert your Figma design to PowerPoint. Let’s get started with a few of them.
Option 1: Export as SVG and import into PowerPoint
This is probably the most straight forward approach. Here’s a quick step-by-step guide. You might also want to checkout the help article directly by Figma about this. Here’s a fully fledged guide on whats possible to export from Figma.
- In Figma, select the frame that you want to export.
- Click on the “Export” button located in the right panel.
- In the export settings, select “SVG” from the dropdown menu.
- Click on the “Export” button. This will download the selected frame as an SVG file.
- Open PowerPoint and navigate to the slide where you want to insert the SVG.
- Click on “Insert” in the top menu, then select “Pictures” and choose “This Device” from the dropdown.
- Locate the SVG file you exported from Figma, select it, and click “Insert”. The SVG will be placed on your slide.
- You can now move and resize the SVG as needed within PowerPoint.
Remember to repeat these steps for each frame you want to export from Figma and import into PowerPoint.
Option 2: Using Magicul Figma to PowerPoint Converter
Magicul provides a direct Figma to PowerPoint converter, which allows you to convert designs in a flawless way. No more extra work or importing issues.
- Go to Magicul Figma to PowerPoint converter page: https://magicul.io/converter/figma-to-powerpoint/.
- Insert your Figma link into the upload field
- You will see a preview screen of how your PowerPoint presentation will look like
- Click on “Convert” to start the conversion process.
- After the conversion is complete, you can download your converted PowerPoint file.
Points to Keep in Mind
Figma is a fantastic design tool, but it’s not primarily built for presentations. When converting a Figma file to PowerPoint, you might encounter broken elements and text elements that are bit off or even have the wrong font. It’s often better to create your presentation from scratch in PowerPoint. Figma currently doesn’t allow you to directly export to PPT, but it’s many export options allow you to get an image or PDF out.
Here’s a few things you might be wondering…
Can I export a Figma file directly to PowerPoint?
No, Figma does not natively support exporting directly to PowerPoint (.pptx) format. Instead, you can export frames or layers as SVG or other image formats, and then insert these into PowerPoint slides. Alternatively, you can use third-party tools or services like Magicul’s Figma to PowerPoint converter.
Can I keep the animations from Figma when I export to PowerPoint?
No, animations created in Figma cannot be exported to PowerPoint. PowerPoint and Figma have different animation capabilities, and there’s no direct way to transfer animations between the two. If you have an animation in Figma that you want to include in a PowerPoint presentation, a workaround could be to record the animation and save it as a video or GIF, then insert this into your PowerPoint slide.
Can I export text elements from Figma to PowerPoint?
While you can export text elements from Figma as part of an image or SVG file, these won’t be editable as text within PowerPoint. If you need to edit the text in PowerPoint, you’ll need to manually recreate these text elements in PowerPoint. If you use the Magicul Converter, then your text will be fully editable.
Why would I want to export a Figma design to PowerPoint?
PowerPoint is a widely used tool for presentations, and not everyone has access to or familiarity with Figma. If you need to share your designs with a client, stakeholder, or team member who uses PowerPoint, it can be helpful to convert your Figma designs to a format they can easily view and interact with.
Conclusion
While Figma does not directly support exporting to PowerPoint, the steps outlined above provide a workaround. Always remember, the aim is to present your designs effectively. Whether that’s through Figma, PowerPoint, or a combination of both, choose the method that works best for your specific scenario.