Turn Your Figma Designs Into Animated Slides

Export your Figma frames to presentations with DeckDeckGo.

David Dal Busco
Apr 8 · 4 min read

I am thrilled to unveil a new way to turn your Figma designs into animated slide decks thanks to the open source plugin I recently published: Figma to DeckDeckGo 🥳.

But… Why?

You may ask yourself why would you export your content from Figma to DeckDeckGo? After-all it is possible to present a design without a 3rd party platform. I get that but, before making up your mind, let me list some advantages I do see in such a solution.

By importing your slides in DeckDeckGo you get a comprehensive way to chain and reorder your slides. Even though we do not offer yet a zillion of different options, transitions between these are going to be animated.

You can also decide if you want or not extract the text components of your frames. If you do so, these are going to remain editable, which is for example handy in case you have a last minute typo to correct or, if you would use a presentation again months after its creation and would have to modify an information which would not be up-to-date anymore.

Instead of sharing a PDF, you are going to transform your presentation to a standalone Progressive Web Apps, which can be share with your attendees easily. Beside the fact that doing so your deck remains dynamic, I do see also value here as you do not have to share a file of X megabytes but, only share a link to your optimized content.

The plugin splits the text of the design. The graphic components are exported in a single layer, in webp images. Again here, you can probably notice my obsession for performances. WebP images are smaller than their JPEG and PNG counterparts — usually on the magnitude of a 25–35% reduction in filesize (source web.dev).

These images, once imported in DeckDeckGo, are added to your collection of assets. This means that they can be (re)used across all your slides. You can then create and style slides with your existing images as background.

Decks you are importing from Figma are not written in stones, you are able to add slides to these using the variety of templates available in DeckDeckGo.

You can even engage your audience or class in real time by adding built-in live polls to your presentations. Your attendees will be able to contribute with their smartphones and, the results will be shown live.

Finally, out of the box, there is a remote application, also open source, to control your presentations. Of course, it works out with the content you import from Figma too, and it does offer the exact same features (draw over your slides, display your notes, countdown, etc.).

Open Source

I would lie if I could say that the plugin is currently rock solid. I tested it successfully with different decks but, I expect that some improvements are going to be needed regarding the extraction of the texts.

The good thing is that you are not going to be blocked in case this process would be sluggish. You can always export your frames as images only and, still enjoy almost all other features.

For the rest, I count on you to help us shape and improve the plugin. Like any other parts of our platforms, it is open source! Ping me with your issues and best ideas in its related GitHub repo.

Code

From a technical point of view, the plugin is developed with JavaScript, nothing fancy new here. Even though, it might be interesting because it is bundled with esbuild (which is not something documented by Figma) and contains some vanilla Web Components I created for its design (button, checkbox etc.). If those particular subjects are interesting to you, let me know, I would be happy to blog about it.

Summary

This plugin is my first ever Figma plugin and needless to say, it was super fun to develop. I am very happy to launch this new feature for our eco-system, give it a try 🤗.

To infinity and beyond!

David

You can reach me on Twitter or my website.

Give a try to DeckDeckGo for your next slides 🤟.

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

David Dal Busco

Written by

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

David Dal Busco

Written by

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store