What if you could wave a magic wand and effortlessly streamline your design workflow? I know this sounds surreal, like a scene from a fantasy film. But stick with me as I introduce you to Magician, an AI design tool that’s making this fantasy a reality.
As a designer, you’ve most probably leveraged the power of artificial intelligence in one area of your design workflow or another. However, Magician is the first of its kind, having a combination of features that make it useful for various aspects of the design process.
In this post, I’ll introduce you to Magician and show you some use cases for this tool. I’ll also add some hands-on, real-world examples to demonstrate how this tool works and its limitations.
So, if you’re ready to add a touch of magic to your design process, let me introduce Figma Magician.
Magician is an AI-powered Figma plugin that acts as your very own design assistant. This magical design tool, created by Diagram, uses the power of AI to streamline your design process by automating tasks such as writing copy, generating icons, and generating unique imagery for your designs.
Although Magician initially started as two separate plugins — Magic Copy and Magic Icon — it quickly evolved into one comprehensive tool with four magical features:
And guess what? Magician is currently available in Figma for free because the product is still in beta. So, now is a good time to try this plugin.
But to save you the hassle, I’ll try it for you first, detailing all the steps and outcomes. By the end of this post, you’ll have enough information to decide if you’d like to add this plugin to your tool stack.
So, without further ado, here is how my tests went!
With Magician as our trusted design assistant, I’ll design the landing page of a restaurant website. But first, I’ll take you through how to set up your free account.
To start using Magician, go to the Pricing section of their homepage and click Try for free. You’ll be prompted to create an account. Follow the steps to create your free account. Once signed in, you’ll be given a unique authentication key. Copy this key and head over to Figma where all the magic will happen.
From your Figma design file, go to the plugins community and search for Magician. Once the plugin is open, you’ll be required to enter your authentication key. Next, click Run and select Home from the pop-up menu that appears:
With account creation sorted, it’s time to explore our first use case.
Let’s use Magician to generate some icons for the navbar section of our restaurant website and see how well it does. To do this, we’ll select Magic Icon from the menu, then enter a brief description of the icon we’re going for in the search bar. First, we need a shopping bag icon:
Now, let’s generate another icon for the user profile by following the same steps we just used:
Here’s what we have so far:
So, how did our design assistant perform on this task?
While it’s a good attempt, there’s room for improvement in the suggestions. The AI performed well in generating relevant results for the “shopping bag” concept. However, its results for “user profile” as an icon design were notably less relevant for our specific context, even after trying various search terms.
Icons sorted, let’s move on to our second use case.
Let’s use Magician to add a headline and sub-headline to the hero section of the landing page. To do this, I’ll select Magic Copy from the Magician features menu. Next, I’ll enter a brief description of what we want:
Unfortunately, the AI failed to generate any suggestions after several tries with various descriptions:
No worries, I’ll just add a headline and ask the AI to give us a sub-headline to go with it:
Again, I didn’t have any luck with this task. The AI couldn’t generate any results for my input and displayed an error message instead.
Obviously, Magician wasn’t able to perform any magic in terms of generating copy for my website. It’s most likely a technical issue that’ll soon be resolved. Let’s hope the issue gets fixed soon because we’re eager to see how well the AI does with generating web copy.
Now, let’s move on to the third use case for this tool.
Let’s see if Magician can help rename our design layers. To do this, I’ll select Magic Rename from the features menu. Next, I’ll choose the layers we want to rename and click Rename.
Unfortunately, I encountered another error message with this task, too.
While Magician’s performance with text-related tasks has been somewhat disappointing, I see the potential in this feature and look forward to seeing the current issues getting fixed. In the meantime, you might see if the Jambot plugin can help you with text.
So, it’s on to our final use case. Fingers crossed for this one!
Our final task is to generate images for the hero section of our website with Magician. To accomplish this, I’ll select Magic Image from the features menu. Next, I’ll enter a brief description of the image we want. Here are the AI’s suggestions:
As the AI doesn’t generate PNG images, I’ll have to create a container and place our image inside it with the Mask tool:
The images generated by the AI were mostly relevant and matched the description we entered. However, one significant drawback I observed was the absence of PNG options.
We’ve just tested Magician, an AI-powered Figma plugin that promises to revolutionize design. While the tool performed well in terms of generating unique scalable SVG icons and, to some extent, generating high-quality images for our designs, it encountered setbacks in renaming layers and writing web copy.
Since the tool is still in beta, I expect the issues we encountered to be fixed before the official version — which will most likely be paid — is released. However, despite the bugs, we believe this tool can come in handy when you need to quickly generate and iterate on design ideas, ultimately increasing efficiency.
Keep in mind that Magician, like many other AI tools, is an evolving platform. As the tool evolves, it will keep getting better, potentially making this January 2024 product review obsolete in no time. So, the question now is, will you be adding Magician to your tool stack?
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
As designers, we can exploit the principle of closure and use it as a tool for building intuitive and engaging user experiences.
Here’s a look at the elements of a dropdown menu, its different variations, and the steps to design a dropdown menu in Figma.
A design kickoff is the starting point. It’s about bringing people together, clarifying questions, aligning objectives, and more.
What if we all used one global design system? Would this benefit users and developers equally? Let’s explore this concept in depth.
Learn more →
