Turn Your Figma Designs Into Animated Slides

April 08, 2021 · 3 min read

#showdev #webdev #figma #javascript

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.


Animate, edit and share

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.


Reuse your design

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.


Add slides and live polls

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.



Remote control

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

Blog

Read the article

Getting Started With The Internet Computer Web-Hosting

July 19th 2021 · 7 min read

#webdev #serverless #hosting #programming

Read the article

We Received A Grant To Port Our Web App To The Internet Computer

July 6th 2021 · 5 min read

#webdev #showdev #motivation #news

Read the article

The State Of Progressive Web Apps Adoption By Developers In 2021

June 22nd 2021 · 6 min read

#showdev #webdev #pwa #discuss

More articles

My company address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub