Building a Chrome Extension to Convert From Figma to Google Slides

Alyssa X
Alyssa X
Sep 6 · 7 min read

How I hacked together a Figma plugin without a plugin infrastructure

A few months ago, while experimenting with the Google Sheets API to easily build websites with a back-end, I was curious to see whether I could build something with other Google APIs. Being a designer at heart, I wanted to see what I could do with Google Slides, whether I could add some extra functionality, make it easier to use, or create some sort of integration.

Around the same time I had been particularly interested in the Figma API, and worked on a variety of small experiments, including a script to automatically turn a Figma frame into a RPG, a character customization implementation for a MMORPG, and much more. Because of that, I thought about combining both Figma and Google Slides to create something new — a way to easily create presentations straight from Figma, allowing the user to have more freedom over the design, and add a higher degree of complexity (while being more precise).

The Experiment

With a solid concept and being rather familiarized with the APIs, I decided to give it a try. The fastest route was to create a simple script, without any sort of user interface, that would automatically render a set of frames within a Figma file, and export them into a Google Slides presentation, successively.

In order to do that, I had to follow these steps:

  1. Make a call to the GET File Endpoint of the Figma API to get a list of all the node IDs for the different frames within the first page of the Figma file (for the sake of simplicity).
  2. Call the GET Image Endpoint using the previously retrieved node IDs to generate an exported image of each one of the frames (through a temporarily accessible URL).
  3. Using the batchUpdate method of the Google Slides API, create a new slide and set the respective background image for each one of the frames from Figma.

I quickly put it together using PHP, and as soon as it worked, I shared it on Twitter for everyone to see. To my surprise, it was a hit.

The functionality of the script, that I shared on Twitter (with a decent reception).

Being extremely excited about how much people loved my little experiment, I decided I had to go a step further, not only sharing my script, but creating a product out of it that people could use to make beautifully-designed presentations.

Reverse Engineering Figma (somewhat)

As soon as I started brainstorming how to create a simplified version for people to use, I realized there had to be a UI for the users to interact with, somewhere, so that they could convert their frames into a presentation.

The easiest way to go about it would have been to create a website where users could insert their Figma file URL, authenticate both with Google and Figma, and then insert their Google Slides URL. I felt this was both counterproductive (which was against the spirit of the project) and not very contextual, so I had to come up with something better.

“Reverse engineering” Figma (as in, using inspect element to gather components & see their hierarchy).

Since the action was going to happen in Figma, I wanted to have a way for the tool to be there, whatever it took. At the time Figma Plugins were non-existent, and there were few attempts to create external integrations with the platform, but I still wanted to have my utility be part of Figma, a way or another, and I figured it could be done through a Chrome Extension — I would be injecting JavaScript into the Figma directly, while “reverse engineering” Figma to dig into the UI components (in order to have create the interface for my own utility) & inject the different elements in the right places.

The “reverse engineering” method led to some rather long strings to replicate different elements within Figma.

Basically, using inspect element (and some patience), I started looking for components I could reuse and trying to place them around the page. I decided to add an extra button on the toolbar to trigger the utility (by duplicating one of the divs and appending it to the end with insertAdjacentHTML in JavaScript), and for the tool itself, I just reused parts of the “Share” pop up so that the user could insert the Google Slides URL and press a button to convert, identifying the different class names being used to generate the elements. That way not only the tool was integrated within Figma itself, but it was following its own design system.

The result of the JavaScript injection through a Chrome Extension.

At that point, I had a very basic UI which was not only lacking functionality (easily signing in with Figma & Google), but also didn’t have a very solidified design, so I had to do something about it.

The Chrome Extension

To work on the final product, I first had to determine what would be the onboarding. For the extension to work, I needed the user to sign in to Google (and give the tool the required permissions to edit a Google Slides project), as well as sign in to Figma to use the API.

I didn’t want this process to be a nuisance to the user, so I made it a one-time thing (when you first install the extension) through a Google Sign In button, and by having the user insert a personal Figma API key. Unfortunately I could not do it through Figma Oauth2 as it couldn’t be embedded in an extension, and it needed to be in a page.

Once I had figured out all the different steps, I designed the popup (with all of its states) in Figma itself, following their own style as to seamlessly blend with the interface.

The different pop up states for the extension, which I designed in Figma.

With the design for the plugin finished, I just had to implement it into the extension, so that I could create an onboarding flow for a new user, as well as show all the different errors that could be triggered (such as a wrong Figma key, a wrong Slides URL/unauthorized, no frames available to convert, and more).

The onboarding flow for the extension, showcasing the different steps, and an error for an invalid URL.

Having completed the development of the extension, and being quite satisfied with the result, I was ready to release it to the public.

The Launch

In anticipation for the launch, I wanted to make sure everything was going to work, so I wanted to do a private beta test of the utility, which was extremely helpful as not only were many bugs spotted that had gone unnoticed by me beforehand, but I also received a lot of great feedback from people who had ideas on how to improve the tool and make it even more useful.

The pre-launch tweet, inviting users to beta test.

Around the same time, and to guarantee that the script would work under different circumstances, I created a landing page for the extension where users could try out a live demo on the site (before the extension had actually been launched), and companies could reach out to get early access.

Some weeks later, I decided the extension was good enough for a public launch, so I put it in the Chrome Web Store for everyone to get for free. It got a mixed reception in launch due to some issues with the conversion itself and the tool itself now showing in the UI (which surprised me after all the testing I had done beforehand), but I managed to tweak it and overcome the issues, growing to over 1200 users, and being featured in the Figma Community Resources Hub (as well as in their newsletter).

The Chrome Extension in action, showcasing the conversion of a pitch deck from Figma to Google Slides

To my surprise, through emails and tweets I had been receiving, my extension started to be used not only by individuals who wanted to play around with the tool, but by speakers, design teams within companies, and even startups for making pitch decks (as showcased in the GIF above — provided by Hamza Ouazzani, for his startup SpotAngels), announcements, and more.

Some final notes

After the (personal) success of the extension, and seeing all the possibilities to create other Figma integrations (or within Google Slides itself), I decided to open source the entire extension in GitHub (including the initial PHP file). While I was developing this tool, I noticed that there were few resources available to help people easily integrate the Google API within a Chrome Extension, so I hope the source code of this project with my small guide can help (or I could make an article specifically on creating Chrome extensions with the Google API…).

Now that Figma has plugin support, building an integration like this one should be a lot easier, but unfortunately being quite busy I don’t think I’m going to port it into the ecosystem. Would be more than happy if anyone wanted to give it a try though!

Finally, if you want to view another project I’ve built using the Figma API (which is also open source), feel free to check out my Figma Platforming Engine for creating fun platforming games without code. I’m happy to answer any questions related to the Figma to Slides extension or on using the API. If you’d like to talk, do not hesitate to reach out to me at hi@alyssax.com or through Twitter 💜

Women Make

Women Make is a community that supports women entrepreneurs and put them at the forefront

Alyssa X

Written by

Alyssa X

19 y/o designer, developer & entrepreneur — founder of Noon Studios. Best woman maker of 2018 (Maker Mag) & Maker of The Year nominee (Product Hunt) alyssax.com

Women Make

Women Make is a community that supports women entrepreneurs and put them at the forefront

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade