Today, along with launching spell check in Figma and FigJam, we’re rolling out updates to our text review API—a new feature of our Plugin API that allows developers to provide more customization over text suggestions. With the API, you can enable a default text review plugin that automatically runs whenever you’re typing on the canvas, highlighting ranges of text, and providing a list of suggestions. Developers can create plugins that read that text and make a recommendation for what to replace it with—whether that’s a suggestion for correct grammar, improved copy, or ways to adhere to your company’s style guide.
We sat down with Jordan Singer, who built Magician and participated in our beta, to learn how he used the text review API, explore what the API enables, and share tips on navigating the “untapped intersection of product design and AI.”
Tell us about Magician. What’s the big picture?
Magician is a design tool for Figma made by Diagram* that introduces AI into designer workflows to expand your creativity and imagination as you design. It’s a magical utility that works alongside you to help ideate and inspire you with new ideas, whether it’s generating never-before-seen icons, imagery to use in your designs, or help with writer's block. We call each of these features “magic spells”: Magic Icon, Magic Image, and Magic Copy. We’re starting with these three, and we’ve got a lot more planned for the future.
*Figma Ventures, Figma’s dedicated investment fund, is an investor
How does Magician use the text review API?
Magician uses the text review API for Magic Copy to intelligently suggest alternatives as you edit your text layers in your design. Magic Copy will suggest options for headlines, body, calls-to-action, and more while you type in Figma.
Based on your experience using the text review API, how does it work, and what does it make possible?
The text review API introduces a new paradigm for interacting with plugins in Figma. Instead of users interfacing with a plugin window, this API runs in the background and seamlessly integrates with the Figma editor UI. The primary use case certainly seems intended for spell checking, but at Diagram we love finding unique ways to take advantage of the latest Figma API advancements, hence using the text review API for AI-powered copywriting.
Magic Copy paired with the text review API is great for when you’ve got writer's block and don’t quite know what to say—whether it’s a headline, body, or call-to-action. You can let Magic do the writing and suggest alternatives to your existing text to come up with something better than you could have imagined. It helps you design faster and makes you more creative.
Talk to us about your process. Where did you start?
Magician actually started out as two separate Figma plugins. Magic Copy was going to be its own standalone plugin that you might install separately from Magic Icon, for example. But, we figured that capturing all of our magic spell ideas into a single plugin made more sense. This allowed us to move quickly by creating a foundation and platform that’s extensible enough to introduce new magic spells easily and consistently give new ideas a try.
You’ve talked about starting small and experimenting. What’s your approach to iterating when you’re working with AI tooling?
Magician is full of iteration and experimentation, and it’s at the core of how we work at Diagram. We paid a lot of attention to fine-tuning the output for each respective spell so that it’s consistent and useful, regardless of context. That requires a lot of iteration and experimentation to try lots of things and see what sticks.
We’ve been lucky to take advantage of much of the recent developments in generative deep learning models and continue to be inspired by things like Stable Diffusion and OpenAI. The modern AI tooling and models that are now accessible at our fingertips help us move quickly and create really powerful experiences. Starting small and experimenting with AI is getting easier and faster than ever before.
With any new, exciting AI-powered tooling, there's equal focus on accuracy and safety. How did you handle that?
Our roadblocks mostly came in the form of ensuring that the output from an AI, which can sometimes be unpredictable, met a certain quality bar and were safe for our users. That means ensuring we had proper content filtering for explicit results and lots of testing for a wide variety of use cases.
Zooming out: How does this all relate to the future of AI and product design?
At Diagram, we explore the untapped intersection of product design and AI. We’re just getting started with Magician as our very first AI design tool. Magician is a bundle of some of our AI experiments that takes advantage of the rapid developments in generative deep learning models.
Over time, we believe that AI is going to have a much deeper impact across product design. Our approach is to build tools that make everyone more creative and not act as replacements. We’re always looking for ways to improve and speed up designer workflows with the help of AI, from the design process to design systems.
We want to share a big thank you to the community of developers who have participated in this beta and helped thousands of Figma users stay typo-free with their spell check plugins: @dremchee, @figm8, @hypermatic, @nowork, @sonny, @stas_sliday, @strings, @tkmadeit
To learn more about the text review API, check out our documentation. We’re excited to see what you build!