Building a Chrome Extension to Convert From Figma to Google Slides
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:
- 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).
- 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).
- 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.
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.
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.
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.
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.
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).
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.
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).
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 💜
