Back in late January I was in Barcelona, and I was feeling exhausted. I had been traveling back and forth for the past 6 months or so, and there was no end in sight. While I had gotten accustomed to the whole ordeal, taking mere minutes to pack everything up and leave for the airport, there was one thing that was driving me insane. My MacBook.

So, on my day to day I use a lot of different apps for my workflow, some of which are relatively lightweight (email, calendar), but others a lot more power-hungry (Figma, After Effects, Chrome…). I leave them open so I can be more productive, switching between them effortlessly, but the problem is that they use up a lot of battery. When I travel, since I often don’t have access to a power source, I run out of battery really quickly. And while I could shut down the laptop, I often still need to get things done on the way, so it’s not ideal. So I need to close all the apps, and reopen them one by one when I get to my destination. Ugh.

Alyssa X

The product idea

Being a serial maker (I’ve built and shipped 12+ products over the past few years), I thought that maybe I could solve this problem with an app. I wasn’t sure at first if it would be possible, since I had only worked on web projects before, but I thought I could still give it a shot. Besides, I also thought the app could be used for other purposes beyond traveling, for example to clean up the workspace before a screen sharing/screen recording, or to take a break from work, so other people might also find it useful.

The concept I came up with was a tool where you pressed a button to save all of your active apps (closing them), and then you would press it again to restore them. Super simple, but still incredibly useful for me. I called it Later.

A quick prototype

With the idea defined, I thought the next logical step would be trying to build some sort of proof of concept. I felt it would be easiest if the app was in the menu bar (also since I had seen some success with those on Product Hunt), but I didn’t know how to build it.

I looked around, and it seemed that using Swift in Xcode was the best option, especially since I’d have to use a lot of native APIs. I had no idea how to use it, so I started looking things up, and thankfully I found this tutorial by HackingWithSwift which helped me set up the base for the app:

From there I basically kept searching for the things I needed all over StackOverflow, the Apple Forums, and the Swift docs.

The main gist of it was getting all the NSRunningApplication instances, filtering based on the activationPolicy to only get the visible apps (those with a presence in the dock, I didn’t want to close any background process or menu bar app), and then saving the data through UserDefaults. Then to open them I simply had to run a Process with the executableURL property of the applications and any specific settings. There were some roadblocks on the way, for example I realized in order to use the terminate() method I needed to remove sandboxing from the app, which prevented it from being able to go into the App Store, but I just thought I could figure it out later, and I just kept on building.

After a couple of days I got it working, with a super simple setup that programmatically closed and opened the windows. I had essentially solved the problem by this point, but I wanted to go further and package it up with a nice UI, and possibly other functions.

Creating the product

I wanted to build this as soon as possible, so I just jumped on Figma, and I quickly designed the UI (inspired by the TopNotch app) for all the different possible states. In order to make it as user-friendly as possible, I included a screenshot of the moment when the user saves their apps, as well as some metadata and information about them, and a way to override sessions or get rid of them entirely.

I also added several additional settings (although I changed some of them on launch, and added more on request), such as starting on logging, ignoring system apps, a timer function, and more.

Then I just had to implement it. I used Storyboard on Xcode which was a bit of a nightmare. In retrospect it might have been a better idea to use SwiftUI and code the whole interface, but I assumed it might be easier for me to use a visual tool since I’m a designer.

It was a horrible experience, taking forever to get everything to align correctly, using constraints to keep the elements positioned with respect to each other, and trying to find where everything was with a ton of tabs and “hidden” actions (for example, holding the Control key while dragging an element creates a reference to it in code) but eventually I got it working, and the app was ready to launch.

I wanted to get some feedback before launching though, so I made a tweet and I asked if anyone wanted to test out the app:

Alyssa X on Twitter: "I decided to learn Swift the past week & built a MacOS app ✨The app closes all your windows and reopens them later (can also be set to a timer ⏲️). It helps save 🔋 while traveling, switch off from work, prepare for meetings/screen sharing...DM me if you want to try it! 📩 pic.twitter.com/rKB7HuA9if / Twitter"

I decided to learn Swift the past week & built a MacOS app ✨The app closes all your windows and reopens them later (can also be set to a timer ⏲️). It helps save 🔋 while traveling, switch off from work, prepare for meetings/screen sharing...DM me if you want to try it!

To my surprise the tweet really took off, and I ended up with hundreds of DMs. I spoke to a few people who gave me all sorts of ideas, and after making a few changes, I decided I should start preparing for the launch.

Building a memorable landing page

I first had to create a landing page, to try to sell the product. I really liked the one for the Muzzle app, so I tried doing something similar that worked for my product.

I thought it would be fun to replicate the specific problem my app was solving in the landing page. Basically, have the user be overwhelmed with a lot of windows when they open the page, and show that my app can solve the issue.

As you can see, a bit of a risky move since some of the windows overlap the copy, but it ended up paying off. I also added a countdown with a limited time offer for the app, since I wanted to experiment with some techniques to increase sales, and I wanted people to be aware that the app had just launched.

Making an eye-catching teaser

Then I wanted to make a video, so I could share it on social media and on Product Hunt, as a way to showcase what the app does. I did some brainstorming, and I figured the best way would for it to be a little story. Here’s what I came up with:

1. Show somebody on their MacBook with a lot of apps open, just passing the time with Wordle (trying to be relatable…).
2. Suddenly, they receive a notification for a meeting they forgot about, and messages from a coworker and their boss asking them to share their screen.
3. Have a slight moment of panic (they’re not prepared at all, they have all sorts of things open they might want to get back to later, etc.).
4. Show that the solution is using my app, Later, saving all the windows with one click, and restoring them for later.

I made a very quick storyboard (yes, it’s ugly), and I was ready to get started.

First I needed to get all the assets for the video. So I used Figma and I broke apart my app popup mockups, and exported each part that needed to be animated separately. I also created a background with a wallpaper and the menu bar, and I decided to skip on the dock because of added complexity (trust me, it would have taken forever). I also reused the windows I had created for the landing page previously to use in the teaser (which also helped with consistency).

Then I moved on to After Effects to create the video to put in the screen of the mockup. I created a composition for each of the different scenes:

• First scene: The cluster of windows and the notifications
• Second scene: Saving all the windows with the app
• Final scene: Restoring the apps

It took me a while, but eventually I got all the animations the way I wanted, so I rendered all the scenes and exported the videos.

Next, I opened Rotato, and skimmed through some of the articles to learn how to use the tool. I created a new project, used a Macbook M1 model, and set up each scene.

Finally, I came back to After Effects and put it all together, with the text transitions in between. I got inspired by the Don’t Blink commercial that Apple made a few years ago, and I used a similar style of typography for my teaser.

I also looked through the Youtube audio library to find some music to go with the teaser (usually I don’t put any, but when there’s text it doesn’t feel right to make a silent video). I found this really fun song called Two Little Bums by The Great North Sound Society, and I thought it was perfect for it.

And that was it, the video was ready! Here’s how it turned out:

Last things to do before launch

Since the app was unsandboxed, it couldn’t go in the App Store. So I had to self-distribute it somehow.

I wanted to charge for the product, so I looked into the Paddle Mac SDK, which was really easy to set up. I just had to import it into the Xcode project, create a product in the dashboard, and connect it. It automatically generates license codes which can then be activated on download. Finally I just added a script into my landing page to embed the payment flow, and it was ready to go.

Another thing I had to look at were software updates. I wanted to avoid a logistical nightmare having to push patches and all sorts of new features in the future, so I integrated Sparkle with the app. The way it works is through a XML file that contains all the information about the latest version, as well as a link to download it from. Then the version is either automatically installed for all the users (if they have the setting on), or it can be manually installed by pressing on “Check for updates” in the settings.

Finally, I exported the app, and I used this tool to create a fancy DMG to install the app, easy enough!

But then I realized the app wouldn’t run unless I signed it, so I had to get an Apple Developer Account. This was easier said than done though, and it actually ended up being a huge ordeal which pushed the launch by several weeks.

The soft launch

I was planning on doing a big launch simultaneously on Twitter and Product Hunt, but I was a bit stressed about it, so I decided to do a bit of a “soft launch”, and share it early somewhere else to get some feedback beforehand.

I remembered about Pieter Levels then having written about his experiences promoting his products, and how he found Reddit to be a really successful medium as it was able to target customers much better than Product Hunt/Hacker News could. I was a bit hesitant and intimidated by it, but I decided to make an account, I looked for a fitting subreddit, and thankfully I found r/MacApps which worked perfectly for my product. To my surprise I looked in the rules and they were fine with self-promotion, which is quite unusual for Reddit as a whole, so I thought I would give it a shot.

It was a bit of a rollercoaster.

I started getting comments with all sorts of questions, things I hadn’t gotten from any of my testers, and my morale took a big hit. First they told me that my app needed to have a trial period to test it out. Then they said that it was dangerous for the app to close apps by default, that it would be better if it hid them instead. I also was told that $15 was way too expensive for the app, and that I should lower it to $5. I was feeling overwhelmed and I quickly started pushing updates and making all sorts of changes, I tried setting up a trial using the Paddle SDK which I wasn’t successful with, so I just gave out a bunch of free coupons which were quickly used up. I then switched the default behavior to hide instead of terminate apps and added a checkbox to revert to the original functionality. I also got super stressed and lowered the price to $5 due to peer pressure.

Despite all the criticism, after making all the changes I started getting lots of positive comments, and it quickly became the #1 hot post on the subreddit. I got ~40 sales from the post, and people told me I should raise the price since Mac apps are a niche market and I was providing lifetime updates together with the price, so it ended up going for $12. In the end my post became the 7th most upvoted of all time in r/MacApps, which was amazing.

The actual launch

I’ve learnt a lot from my previous launches, so I had everything scheduled in advance. I didn’t want to stress over it and stay up all night but sadly it still happened due to being super anxious, and I was like a zombie for the whole day, just randomly falling asleep every so on.

My post went out automatically on Product Hunt at 12:00 AM PT, and I just kept on refreshing non-stop, hoping people would see it, but nothing was happening. I messaged a few people if they could check it out, but everyone was asleep. The other posts by companies were all racking up upvotes, and mine was way on the bottom, it wasn’t even visible in the front page so I couldn’t make it grow organically. I panicked, I wasn’t sure whether to make a tweet early (I always tweet at 8AM SF time since it’s best for my audience), but I felt it could ruin everything, so I held off. I ended up sending out an email on my newsletter alerting my subscribers about my launch, and thankfully it got me enough upvotes to stay in the top 10.

8AM PT came around, so my tweet went out:

Alyssa X on Twitter: "Save all your apps for later with just one click 🖱️Later is a Mac menu bar app that clears and restores your workspace 💻 Switch off from work, tidy up your desktop before a meeting, save battery, schedule apps for later, and more.👉 https://t.co/mV8ma90EtB pic.twitter.com/LnVkaCNxyS / Twitter"

Save all your apps for later with just one click 🖱️Later is a Mac menu bar app that clears and restores your workspace 💻 Switch off from work, tidy up your desktop before a meeting, save battery, schedule apps for later, and more.👉 https://t.co/mV8ma90EtB pic.twitter.com/LnVkaCNxyS

I got incredibly lucky, and a few big accounts retweeted it early on, which made the tweet go viral pretty easily. My notifications were going wild, and I was getting lots of sales.

An hour later I realized the Apple news site iMore had decided to cover my app, which was really prominent in their home page, so I was getting even more sales from them. Even Fast Company picked it up!

The results

In the end it all went much better than I had expected. Although my product didn’t make it to the top 5 on Product Hunt, within a week I made over $5000 in net revenue from hundreds of copies sold. As of March 21st, it’s over $6600.

Most of my sales seemed to come from the US which I was expecting considering my audience and the fact that it was for MacOS only (Apple dominates the market in the US). In terms of website sources, most trackable sales came from Twitter, followed by Product Hunt, iMore, and finally Reddit. That said a large number don’t have a source, so it’s really hard to tell exactly, for Reddit for instance I could tell it probably underestimated them as I have 40+ transactions before I posted on Product Hunt, and it wasn’t shared anywhere else.

In retrospect, I feel like it might have been a better idea to have an annual subscription, considering the app includes all future updates. Something like $5/year could have been reasonable, but I tried looking into ways to set it up, even contacting Paddle, and they didn’t seem to have a good system in place with their licensing system, so I just gave up in the end.

Anyway, that’s the story. I hope you enjoyed reading!

I’m Alyssa X, a serial entrepreneur who has shipped 12+ products (with over 100K users), been nominated twice as Maker of The Year, and created some of the top products on Product Hunt.

Follow me on Twitter and subscribe to my newsletter to learn more about my process.

Alyssa X

I’m also open to opportunities — just send me an email at hi@alyssax.com! 💜

How I built a MacOS app and made $5000+ in a week was originally published in Women Make on Medium, where people are continuing the conversation by highlighting and responding to this story.

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).

Alyssa X

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.

Alyssa X on Twitter

I decided to play around with the @figmadesign & @google slides API ✨ Made a script that converts frames from Figma into slides of a Google Slides presentation, quickly and effortlessly 📽️ A great way to make really pretty presentations 💄 Should I make a guide? 👀 cc @zoink https://t.co/feNjr4GyY7

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.

Alyssa X on Twitter

Reverse engineered @figmadesign's UI & implemented my Figma to @Google Slides converter in the top bar 🛠️ Trying to tweak the onboarding, pop up, & even the icon, so I appreciate your feedback! 😊 Will release a @googlechrome extension eventually so you can use it too! 🎁 https://t.co/PrIg8bfiEU

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 💜

Alyssa X

Building a Chrome Extension to Convert From Figma to Google Slides was originally published in Women Make on Medium, where people are continuing the conversation by highlighting and responding to this story.

What would a modern motion graphics editor look like?

Update: Years after writing this article I ended up launching Motionity, a motion graphics editor that is a mix between After Effects and Canva:

Alyssa X on Twitter: "Create animated videos in your browser like never before 🎥Motionity is a free & open source motion graphics editor for the web 🙌 Browse assets, add keyframes with easing, mask layers, apply filters, text animations, Lotties, audio, and much more.👉 https://t.co/OHd7mEeNCn pic.twitter.com/2tc32xUf0A / Twitter"

Create animated videos in your browser like never before 🎥Motionity is a free & open source motion graphics editor for the web 🙌 Browse assets, add keyframes with easing, mask layers, apply filters, text animations, Lotties, audio, and much more.👉 https://t.co/OHd7mEeNCn pic.twitter.com/2tc32xUf0A

Design tools are all the rage these days, with new and rising products within prototyping (InVision Studio), version control (Abstract), collecting & giving feedback (Pastel), creating mockups (Artboard Studio), design-centric website builders (Webflow), collaborative design tools (Figma), and many more. Despite that, there’s still an area within design which hasn’t had much innovation, and is still rather monopolized — motion graphics.

Motion graphics & animation are used in a large range of scenarios, be it for videos, teasers, web interactions, pitches, and much more. And yet, your only option is to use Adobe After Effects if you want to have complex animations and motion off-rails.

I had this realization earlier this year, which led me to start developing a HTML5 web-based motion graphics tool, easy to use and affordable, as an alternative to Adobe After Effects. This was the process.

Alyssa X

The Minimum Viable Product

Being a rather ambitious project, outside of my comfort zone development-wise, I decided to go for an unusual approach.

Instead of starting by studying the concept, designing its interface, flows, gathering feedback, and more, I got straight into the action by implementing the basic features a motion graphics editor needs to work , and ensuring that I could put together a MVP (minimum viable product) by myself. I am always wary of the time projects take (my time is limited, as well as my resources), and I would rather determine their viability early on, than be surprised midway through its development.

Within 3 days I had managed to put together a renderer through HTML5 Canvas, allowing me to hard-code animations in JavaScript and export as a GIF or image sequence by getting the data from each frame. A few days later I put together the timeline from scratch (there’s almost no JavaScript timeline libraries out there!), together with some basic layering (I began by being able to create & animate textboxes, later I implemented basic image & footage import & animation).

Alyssa X on Twitter

Decent progress on my web-based video editor ✨ Keeping its interface as simple as possible, while being a powerful tool for all sorts of content 💁‍♀️- pitches, teasers, ads, @dribbble shots, @youtube videos, or any kind of motion graphics project. The @figmadesign of video? 🤔 https://t.co/nKnvXM1YbG

It was all going incredibly well, having been able to develop many complex features in a rather short timeframe (except for some bugs that took a while to fix), and even having created several animations with it (I actually use my tool versus After Effects for animating GIFs because of the direct export to GIF feature). Because of that, I decided it was time to get back to square one, having proven that my idea worked.

Designing a Better Motion Graphics Tool

At this point, I had to start from the beginning. I knew I could develop the editor, which was my main concern to get it off the ground, but there was still a lot of work to do. I began by determining its principles and the areas of focus of the tool. Here are some of the main takeaways:

• Accessible. This means many things — being affordable, not platform-dependant, and simple enough to use (at least compared to a tool like Adobe After Effects).
• Specialized. In order to stand out and more easily get a place in the market (the do-it-all tool already exists), the editor would have to be specialized in 2D motion graphics.
• Modern. Considering the field hasn’t had much innovation over the past years, introducing new features and an up-to-date design would be key to the success of the tool.
• Connected. A great way to maintain a user-base when it comes to design tools is to create a network. An asset store with user-created resources & templates, as well as plug-in support would go a long way to ensure people stay in the platform.

After doing that, I had a much clearer picture of what I wanted to make, and it led me to collecting direct feedback from potential users to ensure I was building something people really wanted, which really helped me polish the concept.

Since what I was building would be a direct competitor to Adobe After Effects, I also studied it in-depth. I had the advantage of being very familiarized with the tool, having used it frequently for interactions, animations, and more, so I was aware of several small and big inconveniences present in the workflow for the projects I was working on, such as being unable to export as GIF, having to switch between a lot of tabs to go through compositions, not seeing which keyframes had change between them and which were “static” (also brought up here), and overall being overwhelmed with lots of panels and buttons in the interface (many of which aren’t even used for 2D motion graphics).

Now all I had to do was to solve those issues and put together a concept combining all the ideas and features I had come up with.

Sketching and Wireframing

When it comes to designing the interface of a product, I tend to always follow the same process. I start by going off my laptop and writing everything down in my notebook. This helps me focus — sometimes I’ll spot a flaw or inconsistency in my ideas that I wouldn’t have noticed otherwise. It’s also a great way for me to be inspired and be more creative, which can lead to coming up with new ideas and new directions that could greatly improve a product.

Once I’ve filled my notebook with notes, I can start sketching out the layout of the product. For this project, I started by outlining the different areas of the editor (timeline, canvas, toolbar, layer settings…), through simple blocks. This led to different iterations which I used as a base to implement specific elements, such as the list of layers for the timeline, buttons for the toolbar, and sections for the layer settings panel. It works a bit like a puzzle — trying to find a way to make everything fit and work together, while following basic design principles. After I felt like I had enough iterations, I moved on to digitalizing everything.

My tool of choice for designing interfaces is Figma, being in the web, with collaborative features (helpful to share my work with others and showcase it live) and a simple way to collect feedback. Before designing anything, I always start by gathering inspiration from all over the web (sometimes I do this in the sketching process as well). This allows me to explore different distributions, styles, color palettes, and more.

I went through a lot of iterations to end up with a cohesive and intuitive editor, having to re-organize entire sections and finding workarounds to make the interface less cluttered while still being easy to understand.

The Final Product

After testing and showing different versions of the editor to potential users while collecting feedback, I managed to create a UI true to my vision and the principles I had initially established for the product.

I went for a light interface as opposed to Adobe After Effects’ dark UI in order to make it feel approachable and less cluttered, which in turn made it feel way more friendly to beginners. Aside from that, since I decided to build the product in the niche of 2D motion graphics, I added a panel on the right with different settings to style the layers, similar to other vector editing tools.

Timeline area

The timeline of the editor is similar to the one in Adobe After Effects, but it has its own differences. I wanted to ensure the users didn’t feel overwhelmed by it, so I simplified it. For example, in the layer section, I only show the icon determining the layer type (with a customizable color) and the label. To see more settings, the user can hover to reveal buttons to hide, lock, or add a parent to the layer. Another difference is the heading of this section, which includes a search feature (particularly useful when working on big projects with lots of layers).

One small detail that greatly improves the workflow is in the keyframe area — displaying change between keyframes through a thin line. This is helpful to move more easily throughout the timeline, since the user can see the periods of time where a layer is static or transitioning, instead of having to check by previewing parts of the animation.

The Canvas

The canvas of the tool is rather unusual for an animation tool. Taking inspiration from editors such as Figma or Sketch, instead of seeing only one scene at once (in After Effects, it’s called a composition), you have them all in sight. Because of that, you don’t need to switch back and forth between tabs to compare the changes, but can work in context and more efficiently animate the different sections of the project. The timeline automatically changes depending on the scene the user is working on, showing the respective layers.

Toolbar & settings

I added a toolbar on the left for multiple reasons. I wanted to ensure there was enough vertical space for the canvas, since the timeline area already takes a big chunk, and I needed to have a top bar with some menus and settings. I also needed to distinguish between tools and other types of actions, which I could do very easily vertically by putting the tools at the top, and the rest at the bottom. As to make importing files easier, I included a quick shortcut in the toolbar, together with the project settings and a button to access the resource store (for community-made assets, templates, and more).

As per the right panel of the editor, I prioritized simplicity and a modular style. Because of that, users can collapse sections and reorder them however they like, depending on what they use the most. The panel has 2 tabs, one for the layer being edited at the time, and another one for the scene in general.

Okay, but where’s the tool?

Having managed to both develop the core functionality of the motion graphics editor and design a cohesive interface for it, I was on my way to actually build the entire tool, and make it happen.

At least, that’s how I expected it to go. A project of this scope takes time, as well as resources, which I did not have. My plan was to build the product in 6–12 months (for an initial MVP), dedicating to it exclusively, but life got in the way, and I couldn’t put the time towards the project anymore, since I had to prioritize freelance work to make ends meet. In the end I decided to keep the project on hold, and instead go after a full-time job, focusing on smaller projects to expand my portfolio.

I still don’t have a new plan for the motion graphics editor — I’ve got a working version (as I explained in the MVP section of this article), and I could either open source my work to date, build a smaller version (e.g. narrowing it down to a very specific area such as simple animated GIFs), or keep it for the future, when I am in a position to build the whole thing. Ideas welcome!

I am also open to opportunities — just send me a mail at hi@alyssax.com! 💜

Alyssa X

Building a Web-Based Motion Graphics Editor was originally published in Women Make on Medium, where people are continuing the conversation by highlighting and responding to this story.

Before I get into the guide, I want to explain why this may be useful or what possible uses this could have. Being an alternative to a CMS or database, it obviously has the same capabilities as an equivalent, but being Google Sheets, there are several added advantages. Let me list a few:

• Easily edit the data from Google Sheets ✍️ (super straight-forward)
• Accessing the sheet from any device (multiplatform)
• Sharing the sheet with other people (who can also contribute)
• Backups & version history (some databases don’t have this!)
• Flexibility to grow & reduce the database by adding new columns on the go

In terms of possible uses, it can obviously do absolutely anything you can think of, but here’s some that could be particularly interesting for Google Sheets:

• Running a blog (Using Google Sheets as the CMS)
• Creating a product review website ✨
• Making a list of people, websites, or any sort of content that could be contributed by users / moderators directly through the sheet
• Storing information from a form (fully customizable, w/o Google Forms)
• Tracking finances or stats in sheets & outputting them in a website 📊

With everything cleared up, here’s how you can read and write from Google Sheets through your website (& use it as a database or content management system!). I will explain how to implement the script in PHP, but in Google’s documentation you can find some information to build it in any other language.

1. Create a sheet

The first step is simple — just make a new sheet in Google sheets & make sure you keep it open or save the URL. You don’t have to make the sheet public whatsoever, so your data will be safe there! 🔒

2. Set up the Google API

In order to connect with your sheet, you need to use the Google API. Go to the Google API Console and click on “Library” in the left menu. You will be able to choose from a range of APIs within Google — in this case, you need to look for “Google Sheets API” and click on “Enable”.

Now you need to create the credentials to authenticate & access the data from your sheet 🔑. Go back to the dashboard, and click on “Credentials” in the sidebar. If it’s your first time here, you will be asked to create a new project. Click on “Create”, give it a name, and proceed. Once done, you will finally be able to create the credentials. Click on “Create credentials”, and select “Service account key” from the dropdown.

You will be redirected to a menu where you can create the service key. You can give it any name, select a role (ensure that the role you select has read & write permissions: Project>Owner is a good option), and create a unique email address. Make sure that the key type is JSON, and click on “Create”. The key will be automatically downloaded to your computer — save it inside your server in an accessible place, so you can import it later to your code.

The email address is very important, and you have to share the previously created sheet with it, giving it read & write permissions. In order to do that, just go back to the sheet, click on “Share”, and under “People” just paste the email address, select “Edit”, and click on done.

3. Authentication to the sheet

In order to connect to the sheet, we’ll be using a simple PHP script, your service key and the sheets URL. To make things easier, I am using the Google API PHP Client library that you can find in GitHub 💁‍♀️. You can install it using composer (follow the guide in the GitHub repository), but if you don’t have it set up, or don’t know how it works, you can download the latest release from this page, save it inside your server (in my case it’s in the “google” folder), and insert the following line on top of your script:

require_once 'google/vendor/autoload.php';

Once you have imported the library, you simply have to add the following snippet to your code to do the authentication:

$client = new \Google_Client();
$client->setApplicationName('YOURAPPNAME');
$client->setScopes([\Google_Service_Sheets::SPREADSHEETS]);
$client->setAccessType('offline');
$client->setAuthConfig(__DIR__ . '/servicekey.json');
$service = new Google_Service_Sheets($client);
$spreadsheetId = "YOUR_SHEET_ID";

You have to tweak the following parts from the snippet:

• ‘YOURAPPNAME’: The name of your application, it can be anything (no relation with the name of your project in the Google API Console!)
• ‘/servicekey.json’: The directory where you stored the service key that was downloaded previously
• ‘YOUR_SHEET_ID’: The ID of your sheet. For example, in this example sheet, https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit, the ID is the part that goes from /d/ to /edit, so it would be “1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms”.

4. Reading from the sheet

With the authentication set up, you can now access the data from your sheet freely 🧐. In order to read from the sheet, there are several ways to go about it (& explained more in depth in the API documentation), but I will explain the basics to read a specific range or the entire sheet.

If you want to read a specific range from the sheet, you need to add the following snippet to the script (after the authentication):

$range = 'SHEET_NAME!A1:A5';
$response = $service->spreadsheets_values->get($spreadsheetId, $range);
$values = $response->getValues();
if (empty($values)) {
   print 'No data found.\n';
} else {
   foreach ($values as $row) {
      for ($i = 0; $i < sizeof($row); $i++) {
          echo $row[$i].'\n';
      }
   }
}

Here is a breakdown of the script:

• ‘SHEET_NAME!A1:A5’: This should include the name of your sheet and the desired range. The name of the sheet tends to be Sheet1 by default, but if you are unsure, you can always see what it is in the bottom left of your sheet. As per the part after the “!” (which you have to keep, so if your sheet is called Sheet1, put “Sheet1!”), you simply have to specify a range from a cell to another, just like you would do in Google Sheets for other purposes.
• Foreach loop: This part simply iterates through the generated array and outputs each cell individually. From that point, you are free to use the data you retrieve for any purpose.

Alternatively, if you want to read the entire sheet, simply replace the range with the name of the sheet, likewise (without the exclamation mark):

$range = 'SHEET_NAME';

5. Writing to the sheet

Updating or writing values in the sheet is also quite straight-forward, similar to what I previously explained for reading 📝. I will show you how to update or add values to a specific range within a sheet, and how to add new rows.

Let’s begin by working within a range. Here is the script:

$range = 'SHEET_NAME!A1';
$body = new Google_Service_Sheets_ValueRange([
    'values' => 'YOUR_VALUE'
]);
$params = [
    'valueInputOption' => 'USER_ENTERED'
];
$result = $service->
spreadsheets_values->update($spreadsheetId, $range,
$body, $params);

As you can see, we are using some parameters that were present in the reading process.

• ‘SHEET_NAME!A1’: Works the same way as previously explained in the reading section.
• ‘YOUR_VALUE’: The value that you want your cell to have. Keep in mind that it is an array, so you may add as many values as cells you have selected within the previous range.

Now, let’s see how we can easily add a row to a sheet:

$range = 'SHEET_NAME';
$valueRange= new Google_Service_Sheets_ValueRange();
$valueRange->setValues(["values" => ['YOUR_VALUE1', 'YOUR_VALUE2']]); 
$conf = ["valueInputOption" => "RAW"];
$ins = ["insertDataOption" => "INSERT_ROWS"];
$service->spreadsheets_values->append($sheet, $range, $valueRange, $conf, $ins);

It is very similar to the previous script. Here’s the parameters you need:

• ‘SHEET_NAME’: The name of your sheet
• ‘YOUR_VALUE1’ (‘YOUR_VALUE2’, ‘YOUR_VALUE3’…): The values you want to append to the sheet. You may add more into the array — they will be added one next to another in the new row.

This was a simple guide to work with Google API for Sheets in PHP, hopefully it was useful! Feel free to ask any question below if you get stuck somewhere or have feedback 😊

Now, some of you might be a bit confused — didn’t I mention making GitHub Pages or any static website platform dynamic? It’s not like you can add PHP files to GitHub Pages! 😫

Well, you certainly can’t add PHP to GitHub Pages, BUT (!) you still have a couple of options:

• Using JavaScript to connect with the Google API (explained in the documentation). The problem with that is that your API keys will be exposed, as well as your sheets URL. If you are working with a public API key or a public sheet, this is not a big deal, but the examples I showcased required the privacy factor, so this is not a good idea.
• Hosting the PHP script in Heroku or another server & making calls to it using AJAX in GitHub Pages. This can be completely secure by not only keeping the API key & sheets URL in that server, but also only accepting calls from a specific domain (in this case, your own website within GitHub Pages)

But, what if you don’t have a server (if you want something proper it can be costly) or don’t know how to set it up? 🤔

No problem! These past weeks, at the same time that I’ve been working on the different demos, I’ve been developing a platform that allows you to submit your sheets ID, API keys, allowed URL (your GitHub Pages or static domain) and generates the code you can embed to your site to read or write from the sheet. It isn’t out yet (I want to ensure it’s polished!) but I also would like to write a little bit about how to make this yourself (open sourcing the code) so you don’t have to use my platform whatsoever, and can set it up in your own server.

I will also hopefully find the time to make some more articles with some examples & guides on how to create some of the demos I made. So far I have a form & blog in mind, but you are free to make suggestions as well — I really appreciate it! Thanks for reading!

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >