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.
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
В какой программе делать презентацию? Сравниваем Figma, PowerPoint, KeyNote, Prezi и Google Slides
KeyNote работает весьма шустро. В нём можно делать всякие микро-видео и гифки. Анимации в нём — выше всяких похвал. Скоро накидаю тут примеры — всё это сделано в KeyNote.
Недостатки?
Его фукционал, конечно же, не так богат, как PowerPoint-овский. Раздражает то, что из KeyNote нельзя сохранить рисунок! Один клиент недавно пожаловался на то, что для него какой-то дизайнер-фрилансер сделал презентацию портфолио в «модном» KeyNote. И только после расплаты и благополучного исчезновения фрилансера выяснилось: всё, что попало в KeyNote, должно, по замыслу его создателей, оставаться в нём навечно!
Кстати, Google Docs и Google Slides обладают такой же выбешивающей фигнёй!
А что такое Figma?
Кто-то сказал, что Figma — это как Google Docs только для дизайна. И еще такое есть: Фигма — это коллаборативный, ограниченный Фотошоп.
История: один клиент прислал нам на переделку 100500 слайдов, которые были формально в pptx, но представляли собой по одному единому png на каждой странице. И всё. То есть, их откуда-то явно экспортировали. Откуда? Ответ был весьма раздраженным: «один мальчик так сделал».
Почему-то, на старости лет, я думал, что в бизнесе буду конкурировать с зубрами и мастодонтами. А получилось, что в 80% случаев конкурирую с «мальчиками» и «девочками». Ну не суть. Заказчику понадобилось заменить в презентации ни много ни мало, а фирменный стиль. «Сможете как-то это всё хакнуть и чтобы в итоге презентация была редактируемая?» — спросил заказчик.
Конечно сможем! Просто сядем и перерисуем всё с нуля. Но надежда на чудо еще тлела. «Спросите, — говорим, — у вашего фрилансера: в чем он это делал». Оказалось, что мальчик во-первых никуда не исчез, что само по себе почётно. А во-вторых, он прислал нам ссылку на проект в Фигме, где все эти слайды и были отрисованы.
Эта история окончательно привела меня в Figma. Помучившись с ней пару карантинных месяцев, я готов представить вашему вниманию перечень «За» то, чтобы презентации делать в Фигме:
Вложенные группы и фреймы
Теперь я понимаю почему уходили мои дизайнеры. Я заставлял их из BMW пересаживаться на SsungYong.
Стили
Если вы когда-либо пытались запомнить / поменять / настроить цветовые палитры в pptx, вы знаете какая это боль. Я, например, очень быстро нахожу в любом раскрученном софте ветку, которую оставили на откуп каким-нибудь племянникам основателей. Настройку палитры в PowerPoint-е явно поручена безмозглому мажору, не вылезающему из подпольных клубов.
Скорость
То, как «зум-инится» Фигма простым щепком по тачпаду, подвластно сегодня разве что KeyNote. Знаете что я называю «эффектом Фигмы»? Привыкнув к её удобствам, ты возвращаешься в любой «традиционный» тул, привычно раздвигаешь пальцы на тачпаде, чтобы быстренько приблизить какую-нибудь крохотную иконку. И компьютер зависает на мучительные 2-3 секунды.
Шорткаты
У меня в кабинете на стене висят распечатки горячих клавиш всех основных пакетов, с которыми я работаю: Evernote, Google Docs, Scrivener, Bear, Screenflow, Tilda. Но поскольку я там, на рабочем месте, почти не бываю, нифига эти шорткаты не запоминаются. По ним же нужен поиск. Можно (и я это сделал!) закачать пожухшие от солнца страницы в Evernote и там уже по ним будет поиск. Но в Фигме всё иначе! Подсказки по горячим клавишам отделены от общего хелпа и очень хорошо рубрицированы между собой.
Знаете, когда я дизайню на MacBook Pro, дочка стоит рядом и зависает. Это непередаваемое ощущение. Почти не двигая пальцами, создавать дизайн. Мммммм!
И это… вы думаете у Figma нету минусов? Конечно есть! Пока что больше всего напрягает то, что изобилие халявных psd-шаблонов пролетает мимо нас. Ибо конкуренция с конкурентами допускает в глазах Фигмы совместимость по файлам только с пакетом Sketch.
А конкурентов-то у Фигмы много:
Sketch
Adobe XD
ProtoPie
Mockplus
InVision Studio
Framer
Lunacy
Gravit.
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.