Automating Figma
Building a general purpose tool to automate Figma
I shared a demo of Figma designing for you just over one year ago. I knew that something special was there based on the reception it got. The seed of the idea is what inspired Tricycle, focused on building automation tools for designers.
The tools I began to explore centered around the untapped intersection of design and AI. What does it look like when you use something like OpenAI’s GPT-3 combined with the structure of the Figma canvas to do pattern recognition and infer what you might want to design next? The possibilities here are really exciting, and I began to dig deeper.
The seed of the idea
Amidst the explorations, I was considering ways to break down the larger vision of “Figma designing for you” into smaller pieces that would help me 1) get much more familiar with the Figma API and 2) ship immediate value-add tools that I can get in people’s hands. To me, there is nothing more important than building momentum through shipping and iterating on feedback.
After I announced Tricycle, I had lots of outreach from designers about ideas for automation tools that could help them be more productive. One of them was Joey Banks (one of my favorite Twitter follows) who mentioned “It'd be really interesting to have a way to "record" a collection of actions I'm taking and then repeat that collection of actions at any time and anywhere on the canvas.”
This immediately sparked a comparison to Shortcuts (formerly Workflow) from Apple, which is a way to visually piece together scripts for automating things you can do on your phone and across third-party apps. When I hear the seed of an idea and start thinking “what if,” my mind starts flowing with ideas and possibilities.
Not even a few hours after hearing from Joey about his ideas and pain points, I replied with a visual for what came to mind. Something I find about the way my brain works is the need to visualize abstract ideas - there is nothing like seeing what you’re dreaming of to be able to react to it and know instinctively whether or not it’s worth pushing on.
The first mockup of “Shortcuts” for Figma
My history with building design tools
My explorations around design tools and automation go back several years, all the way to the Sketch days. Sketch had a lil plugin ecosystem going on, and I played around with a few ideas. I always loved exploring the crazy “what if” ideas. One of them was “what if you could talk to Sketch” thinking about natural language processing inside of a design tool.
While at Square as a product designer for Cash App, I built some Figma plugins for fun to automate some things for our team and share them with the design community. One of them was “Lights” which started as a way for our team to easily switch between light and dark mode, and turned into a general purpose plugin for other designers and teams to use.
One of the plugins I built inside of Figma for personal use was called “Utilities.” It was a single plugin that had a bunch of lil functions inside of it for things I did often, like sorting layers by name or aligning everything to x: 0 y: 0.
I’ve got many more examples on my personal site under “Figma Plugins”.
Enter Automator
Building these tools are great if you know how to code and are familiar with the Figma API. You otherwise need to rely on plugin developers to build something that fits your use case. The Figma Community is full of plugins that do everything from insert Unsplash images and icons to mass renaming your layers. The best ones are those that save you lots of time and automate the tedious, mundane, repetitive tasks that would end up taking lots of time if done manually.
Circling back to the seed of the “Shortcuts” idea - it instantly became apparent to me: there’s an opportunity to build a general purpose design tool that would allow anyone, even if you don’t know how to code or are unfamiliar with the Figma API, to create custom automations that are tailored to the way you work in Figma. Think of it as a way to BYOP (build your own plugin) visually without any code to make custom automations for your design workflows.
Heavily inspired by the Shortcuts app, I started exploring what it would take to build a “Shortcuts for Figma.” The first thing I wanted to get right was the data model. At first, I was a bit stumped on how this could work. The idea of building something that could in theory allow for infinite combinations and possibilities was daunting. I took to sketching in my notebook to draft ideas and write pseudocode on how it could work:
The pseudocode for the “Repeat” action in Automator
Building Automator
Automator at its core is based around the “automation.” For example, you can build an automation to find layers without color styles in your design system and apply the correct ones automatically. Automations are made up of multiple “actions,” or things you can do in Figma by mouse, keyboard, or menu like drawing shapes or changing layer styles. There’s even actions to make an API request and find all layers matching a certain property, things you just can’t do in today’s Figma editor.
An automation that creates a frame with a rectangle inside of it 5 times
When an automation runs, each action maps to a piece of code that does any given thing with the Figma API. For example, the “Create frame” action effectively maps to the figma.createFrame() API. Actions can be nested inside of one another, much like the layer panel in Figma. In the example above, the “Create rectangle” action ends up creating a rectangle that gets nested inside the frame that gets created above it.
The plugin UI is completely custom, but intentionally designed to look and feel just like Figma so that it’s familiar. It’s built using React, and makes a ton of great use of Tom Lowry’s Figma Plugin DS.
If you know anything about building Figma plugins with UI, there’s lots of passing messages back and forth between the plugin window and the plugin code to share state and run automations.
All of the core plugin code is written using TypeScript (huge fan). Here’s a snippet of the data model I ended up using for an automation with nested actions.
Private beta
I’ve spent the past few months building, designing, and modeling Automator to be a general purpose tool that works for everyone to unlock a new wave of productivity for designers and teams inside of Figma. Automator has turned out to be one of the more complex things I’ve ever built given its general purpose nature and infinite possibilities.
There’s sure to be lots of bugs and odd behavior, interactions, and experiences within it, but I knew I had to get something out there once I felt comfortable enough to 1) get people to really start stress testing it and 2) get inspired by what people use it for.
I wanted to start by testing it with a small, focused group of people that I knew would push it to its limits, uncover bugs, and provide great feedback. I released the Automator private beta on November 1st. In less than one week, I’ve already been absolutely blown away by the creativity and use cases that people have been using it for.
Patrick Banta made an automation that creates their entire project scaffold inside of a file with a click. Something that would otherwise require duplicating a file or lots of manual setup.
Nate Butler made some generative art inside of Automator and wrote about the experience and explorations. I knew this was possible in Automator, but Nate really inspired me with the visuals.
Jan Toman made a few design system automations to make their library more consistent. This is something they were doing by hand manually before.
Here’s a thread of everything that the private beta testers have been up to.
It’s still early, but I’m encouraged by the improvements I’ve already been able to make based on the early feedback. My hope is to get it to the point where it’s ready for a public release to the design community soon.
Tricycle and the future
Automator is just the start of the set of design automation tools I’ve got planned. The fun part is that Automator has nothing to do with AI but everything to do with automation and I couldn’t be more excited about it.
I’m constantly exploring, tinkering, and building new ideas. Look out for more tools from Tricycle soon. In the meantime I’ll be getting Automator ready for public release.
Be one of the first to use Tricycle and Automator by joining the waitlist.
Where do I find the settings to add my paid license key?
this is so great, unbelievable. i cant wait to get an invite code; thx for the - hopefully - incredible work :D if you wanna send me a code :) florian@thimbl.de