Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let’s jump into the capabilities of Magician, a versatile AI plugin currently in its beta phase. This video will demonstrate how to use Magician for generating compelling UX copy, crafting custom icons, and creating unique images.
Resources
Diagram has been acquired by Figma, and as a result, Magician is no longer available, with its features to be integrated into the upcoming Figma AI.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hello and welcome back.
0:00
In this video, I'll be reviewing Magician,
an AI-powered plugin for Figma.
0:01
Magician is a multi-purpose tool that
can help you generate images, icons, and
0:06
even copy, making this tool
a Swiss army knife of plugins and
0:11
a great asset to any toolkit.
0:14
With that said though, let's get to it.
0:16
I'll start by clicking on the Resources
icon in the main menu to access my
0:18
plugins.
0:22
From there, I'll click on Magician and
the plugin will start in a new pop-up.
0:23
As you can see, Magician starts off
by asking me to enter an access key,
0:27
I can get my access key
by creating an account,
0:31
which you can do by clicking on
the start free trial button.
0:33
Right now, Magician is in a public
beta phase, and while in this beta,
0:36
the app will be free to
access with your API key.
0:39
I'm going to click on the start
free trial button to get started.
0:42
I'm then taken to the magician website,
I'll click on Try for free.
0:45
Next, you'll be able to sign up for
an account.
0:49
I've already completed this step so
it will log me in.
0:51
Once you log in, you will start on
this main account dashboard page.
0:53
At the top of the page,
you will see a section labeled Figma,
0:57
in this section we'll find our key.
1:00
I'll click the copy icon to copy the key
to the clipboard, and head back to Figma.
1:01
Back in Figma, I'll paste the key in
the plugin window and click on continue.
1:05
Now I have full access to Magician.
1:12
As I mentioned earlier,
Magician helps with a few tasks.
1:14
So in the menu we have Magic Icon for
generating icons, Magic Copy for
1:17
generating text, Magic Image for
generating images, and Magic Rename for
1:21
renaming your layers in Figma.
1:25
Magic Rename is a new feature and
is currently in alpha, so
1:27
you may notice some bugs,
but let's jump in.
1:30
I'll start with using Magic Icon to
create custom icons for our wireframe.
1:33
So I'll scroll to the benefits section and
start working on each of my three icons.
1:36
I'll start with the third column in
this section, and for this icon,
1:41
I'll use the prompt.
1:44
Create an icon to symbolize progress.
1:45
After a few moments,
Magician produces four options.
1:53
I'll use number 3 for this demo,
so I'll click on the icon,
1:56
and Magician will give an update
that it is vectorizing my icon.
1:59
A few more seconds and Magician inserts
the icon into our design in a vector
2:02
format that can be resized as large or
as small as we like.
2:06
I'll drag it over to the third
column here and line it up, and
2:10
resize it to approximately match
the size of the placeholder Icons.
2:13
Next, I'll change the color of this
icon to match the other icons and
2:23
text in this section.
2:28
Perfect.
2:29
I'll choose the placeholder icon and make
it invisible by reducing its opacity to 0.
2:30
I'm doing this instead of deleting it
because my design utilizes auto layout,
2:35
which automatically adjusts and
resizes elements.
2:39
If I delete the icon, the design will
rearrange and the allocated space for
2:42
the icon will be lost,
by making the icon invisible,
2:47
it will still occupy the same space
in the design without being visible.
2:50
All right, now to finish lining and
sizing up my icon.
2:54
That looks good.
2:57
Now let's move on to the icon for
the second column.
2:58
I'll use the prompt.
3:07
Create an icon of a person sitting,
meditating, and then I'll hit generate.
3:09
Within a few moments,
I get my icon symbolizing meditation.
3:16
I personally like the third one the best,
so I'll click on that,
3:19
to have it vectorized and
imported into my design.
3:22
Next, I'll zoom in to delete this
vectorized text underneath since it's
3:27
misspelled, and doesn't fit for
my needs anyway.
3:30
Then I'll get my light blue color and
3:39
paste that in the fill color property for
my icon.
3:41
Next I'll drop the opacity of
the placeholder icon to 0 and
3:48
move the custom icon over.
3:51
Perfect.
3:55
Onto the first column, for
3:59
this one let's create an icon
to symbolize guided meditation.
4:00
This is a pretty broad prompt that
could be interpreted many ways but
4:04
I'm interested in seeing how
Magician handles it Hey,
4:07
these are pretty good, but
let me try another prompt.
4:12
How about create an icon
to symbolize stress?
4:15
All right, let's try this third option.
4:22
I just noticed the border of the circle is
clipped, I'll delete that one and opt for
4:28
the first one instead.
4:31
Then I'll resize it and line it up.
4:34
Followed by applying our light blue color,
that looks good.
4:52
Now let's move on to the feature section.
4:55
We have two icons we need to create for
this section.
4:58
I'll start with the icon for
personalized meditation recommendations.
5:00
I'll use the prompt, create an icon
to symbolize recommendations, and
5:03
I'll click Generate.
5:07
Okay, I think this first
one will work fine.
5:11
Now I'll size it up and align it.
5:17
Then I'll set my placeholder
icon's opacity to 0, and
5:22
then I can slide over my new icon.
5:26
For my second icon, I'll use the prompt.
5:31
Create an icon to symbolize a timer and
reminder.
5:35
Okay, I think the first
one looks good enough and
5:41
matches the style of our other icon.
5:43
Then, I'll resize the icon so
5:47
it better matches the dimensions
of our placeholder icon.
5:48
Next, I'll drop the opacity
on the placeholder icon and
5:52
push over our custom icon.
5:55
Lastly, I'll change
the colour of the icons so
6:05
they match the same blue
that's used in these headings.
6:07
Awesome, that looks good to me.
6:10
Now I'll go back to my list of plugins and
select Magician.
6:14
When it asks which feature I wanna use,
I'll select Magic Image, so
6:16
I can generate a couple of images for
our design.
6:20
I'll start with the hero section here.
6:22
Inside Magic Image, I'll type the prompt,
a visually engaging photograph of
6:24
a diverse group of people meditating
in various peaceful environments,
6:28
like a sunlit room, a quiet park,
or even an office setting.
6:32
The focus should be on showing that
meditation can be integrated into
6:35
everyday life,
regardless of one's surroundings.
6:39
Each person could be shown
with the app on their device,
6:42
illustrating its role in
their meditation practice.
6:44
And Magician provides
me with my four images.
6:49
I'll try number 2 for this project,
6:52
then I'll resize it to fit
over the placeholder image.
6:55
Oops, I accidentally selected
a third image in a rush,
6:58
let me delete that one then
I'll select the correct image.
7:02
There we go.
7:06
Next, I'll line it up with the placeholder
image then resize it to the correct
7:08
dimensions.
7:12
Now let's scroll to the bottom and
replace that placeholder image as well.
7:18
Unfortunately, Magician's magic
image feature can only output
7:22
images with a 1 by 1 ratio or
a square shape.
7:26
We can't use a custom option to get
a wide image like a 16 by 9 ratio,
7:28
that you can find in other AI image
generators like Midjourney and Dally3,
7:33
hopefully this will be achievable
down the line with a future update.
7:37
For now, I'll just generate a square image
and find a way to work it into my design.
7:41
I'll use the prompt, a high-quality
image of a tranquil natural setting,
7:46
such as a serene lake with crystal-clear
water reflecting a clear sky surrounded by
7:50
gentle mountains or a peaceful forest.
7:55
The image could subtly fade into
the background, allowing the text to stand
7:57
out, creating an immediate sense
of peace and space for the viewer.
8:01
With my four images done,
I think I'll select number 3 to use.
8:08
Now that I have my image in my design,
it's time to experiment with the layout
8:15
and size until I can find
something that works.
8:18
Trust me when I say design is
all about experimentation.
8:26
So it's best to try many different
versions and iterations of your idea.
8:29
This is usually how we stumble
on the winning execution.
8:33
I kinda like this right alignment I
have going on, I could even work in
8:36
a second image possibly, but I'm not
100% sold, so I'll keep experimenting.
8:40
I'm wondering how large can I make
the image before it no longer works?
8:52
Using design principles like
scale can create emphasis,
8:55
but that's not really my intention, maybe
super large isn't the way to go either.
8:58
There we go.
9:13
I think making the image a bit larger and
9:14
center aligning it within
the section is the best move.
9:16
Yeah, that looks great to me.
9:19
Next, I'll head back to
the magician plugin panel.
9:20
While we've already used
Cube GPT to generate copy,
9:23
I'll quickly demonstrate how performing
the same task works in Magician.
9:25
I'll select Magic Copy.
9:29
I can now enter a prompt to get
back some generated text to use or
9:31
I can select an existing text layer in
my design and change that instantly.
9:34
I'll select my headline
here in my hero section and
9:39
it shows the selected text inside
the magician plug in panel.
9:41
I'll leave magic copy set to the default
preset of get alternatives, and
9:44
this simply means alternatives for
the current text,
9:48
then I'll hit the Edit button to
edit our text with a new generation.
9:51
We get a couple of options for
Magic Copy and I'll use the first one.
9:57
And as you can see,
the text changes instantly.
10:02
But I'm happy with my original headline,
so I'll hit Control Z to undo.
10:05
Next, I'll go back to
the Magician plugin and
10:08
hit back to go to the main
menu of this plugin.
10:11
This time I'm going to
click on Magic Rename so
10:14
I can show off a quick
example in real time.
10:16
I'm gonna select my hero
section's headline again, and
10:19
you'll notice that in the layers panel
on our left, our text layer is currently
10:21
named Medium length headline, although
that doesn't entirely fit on screen.
10:25
I'll click on the Rename button now and
let's see what it names this text layer.
10:29
Magician instantly renames my
text layer to hero heading,
10:32
not bad as I would say that's
an accurate description.
10:35
I'll do the same for this paragraph
text that's labeled as lorem ipsum.
10:38
But Magician simply uses the text used
in the design as the name for the layer,
10:44
better than lorem ipsum, but not quite
as descriptive as our first example.
10:47
But again, this feature is
brand new at this time, and
10:51
is currently in alpha, so you can expect
it to evolve and improve over time.
10:54
But I think that'll do it for
this showcase of the Magician plugin.
10:58
I hope you found this introduction useful.
11:01
Join me in the next video
where I'll review our last
11:03
AI-powered Figma plugin in this course,
Adentik.
11:06
I'll see you there.
11:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up