Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Supercharge Your Figma Workflow with AI Plugins!
You have completed Supercharge Your Figma Workflow with AI Plugins!
Preview
Join us as we explore Cube GPT, your partner in transforming UX content. This video will demonstrate how Cube GPT turns basic text into engaging user experiences. Observe as it subtly adjusts tone, length, and style, like a seasoned UX copywriter.
Resources
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
Hey there and welcome back.
0:00
In this video I'll showcase our
next AI power plugin Cube GPT.
0:01
Cube GPT is a plugin that provides an
integrated UI and chat bot assistant for
0:04
creating and improving the copy in
your design right inside of Figma.
0:09
In our last video, I used WireGen to
create the wireframe for a meditation app.
0:14
That project didn't have much text for
me to work with.
0:17
So in this video, I've created a new
wireframe to serve as a landing page for
0:20
my meditation app.
0:23
Complete with plenty of placeholder
texts for me to improve.
0:25
Let's dive right in.
0:28
You'll notice that when I first open
the plugin, everything is disabled and
0:29
I need to input an OpenAI API key
to continue using this plugin.
0:33
While Cube GPT starts off enabled and
comes with a free trial, it only works for
0:37
a limited number of users before you
are required to provide your own key.
0:40
With that said, let me show you how to
create an open AI API key to use for
0:45
Cube GPT.
0:49
To generate a new API key,
I'll go to open ai.com and click on login.
0:50
Then I'll get the choice of ChatGPT or
API.
0:55
I wanna click on API.
0:57
Now, I'll head over to the main menu on
the left hand side and click API keys.
0:58
Under API keys,
I'll click on create a new secret key.
1:03
Then I'll type in the name of this key,
which for this example, I'll use CubeGPT.
1:05
Then I'll click on the green
create secret key button, and
1:10
then I'll click this copy icon next to the
key to ensure it's copied to my clipboard.
1:12
Now let's head back to Figma and
we'll paste our API key right in the open
1:17
AI API key slot and now we're good to
continue using CubeGPT as much as we want.
1:21
Please note however this will occur
GPT usage through the API and open
1:25
AI will bill you for that usage once you
hit the limit set in your open AI account.
1:29
In our first tab we have
a list of automatic prompts.
1:34
So no need to provide any text
just select some copy and click.
1:37
For example, we can make our text shorter,
translate our text, make it longer,
1:40
generally improve our current text and
more.
1:44
At the top here we have our
main menu icons which access
1:47
different tabs with even more options.
1:50
As I said earlier,
we're on the prompts tab.
1:52
To the right is the one time
content filling tab, which is for
1:55
inserting custom prompts
to adjust the text content.
1:57
The third tab is for
the CubeGPT assistant,
2:00
a ChatGPT style chat bot that you can talk
to and ask questions right inside Figma.
2:02
And our fourth and final tab is for
2:07
translating our text
into different languages.
2:09
But I'll start by working with a chatbot
to create a starting point when it comes
2:11
to the text used in my design.
2:15
I'll start off the conversation by asking
the chatbot, can you create a headline and
2:17
subheading for
the hero section of a landing page for
2:21
my meditation app ZenFlow?
2:24
Awesome, cube GTP quickly
responded with some useful text.
2:26
I'll copy this headline and
place it into my design.
2:30
Then I'll do the same for
this paragraph text.
2:35
Perfect.
2:40
We'll worry about adjusting
the length of our text later.
2:41
Right now, I just wanna replace most of
this placeholder text with something more
2:43
authentic to our needs.
2:46
Moving to the next section,
I'll tell Cube GPT.
2:48
Perfect.
2:51
Now for our next section,
I need a title and
2:52
paragraph that explains
the USP of our meditation app.
2:54
USP stands for Unique Selling Proposition.
2:56
This is another way of asking cube GTP
write about what makes our meditation app
2:59
unique and stand out.
3:03
Cube GTP quickly responds
with more text yet again.
3:05
I'll copy the text over and
we'll move to our next section.
3:08
Which are these three columns that we'll
use to illustrate three key features or
3:13
benefits to users from
using our meditation app.
3:17
I'll use the prompt.
3:20
Create a benefits section with three
specific product features or benefits,
3:21
a title and
one sentence explainer for each.
3:25
It seems it gave us a title for
the overall section.
3:31
We don't need that though.
3:35
So I'll go to our first benefit,
guided meditation for every need.
3:36
I'll copy and paste that over,
and then I'll do the same for
3:39
the supporting paragraph.
3:42
Next we have benefit number two,
mindfulness on the go.
3:43
Let's copy and paste that over.
3:47
Then we'll follow that up with the
supporting text for the second feature.
3:48
Lastly, we'll add the third and
final benefit.
3:52
Progress tracking and
insights followed by its supporting text.
3:54
Now, we'll move on to our last section,
our feature section.
3:58
So we'll tell Cube GPT, write the headline
and subheading for a feature section as
4:01
well as two subheadings for features with
one sentence or supporting text each.
4:06
Cube GPT yet
again provides our copy within seconds.
4:12
So I'll copy and paste our headline,
Explore ZenFlow's Powerful Features.
4:14
Followed by our subheading.
4:22
Next I'll copy and paste Feature 1,
4:28
which is
Personalized Meditation Recommendations,
4:30
followed by its supporting text.
4:32
Then I'll do the same for feature 2,
Meditation Timer and Reminders.
4:38
These features are kinda standard and
could definitely be elaborated on, but for
4:43
a quick way to get started,
this really works.
4:46
All right, now that we have our
actual text placed in our design,
4:48
let's use Cube GPT to
work on improving it.
4:52
We'll head back up to the top and
start from there.
4:54
Okay, the first thing I'm noticing
is our paragraph text is short
4:58
compared to the space
the headline is taking.
5:01
So let's use Cube GPT to make
our paragraph text longer.
5:03
Okay, that's not bad, but
maybe a little shorter would be better.
5:09
Let me try that.
5:13
I'll also zoom in so we can actually
read the text, discover, calm,
5:14
reduce anxiety, tap into strength,
and feel more fulfilled.
5:18
Boost mental wellbeing in all areas,
work and relationships, family and
5:22
personal matters.
5:26
Okay, this will work great for
our wireframe because remember,
5:28
wireframes aren't the final product.
5:31
There is an initial iteration.
5:33
So this is just version one of many.
5:35
But being able to communicate
your vision to a stakeholder or
5:37
teammate with a design that's as close to
a finished project as possible will not
5:39
only help them buy into your solution.
5:43
But will help everyone be on the same
page when it comes to understanding
5:45
your vision.
5:48
Moving on to our next section,
5:50
we'll start by making our
headline a bit shorter if we can.
5:51
Okay, perfect.
5:56
Now we'll do the same for
the supporting paragraph.
5:57
Not bad.
6:01
Right now I'm focused less on
perfect word for word, text, and
6:02
more on text that fits the layout.
6:05
Because again, I can always make another
iteration with another pass at the text.
6:07
Next up, I'll try making this headline for
a second benefit a bit longer.
6:11
Okay, that's too long.
6:20
Let's try making it shorter.
6:22
And I'll keep adjusting
by making it shorter and
6:24
shorter until I find a good length I like.
6:26
Okay, right there works.
6:36
And I think that is a great start.
6:37
We went from a wireframe with 100%
placeholder text to a wireframe with text
6:39
that adds context and
meaning to the design, and
6:43
we did this in a matter of minutes,
not hours or days.
6:46
Next, I'll go back to our Cube GPT plugin
and use the one-time content filling tab
6:49
to create the call to action text for
this button using my own custom prompt.
6:53
I'll use the prompt, create the button
text for a main CTA for a meditation app.
7:04
And it changes our button text to start
meditating now, that's pretty good.
7:11
Now let's use the same method to change
our secondary call to action button.
7:15
This time, I'll adjust the prompt
to say create the button for
7:19
a secondary CTA for a meditation app.
7:22
And Cube GPT provides
explore inner harmony.
7:26
But let's try again and see what I get.
7:28
It provides discovered the benefits
of meditation, which I really like.
7:30
If you're not ready to
meditate using our app,
7:34
then you can learn more about meditation
and how our app helps on another page.
7:36
Next, I'll use the Change tone button to
try another tone or voice for my text.
7:40
This yoga setting looks
like it might be amusing.
7:45
Let's give it a go.
7:47
Cube GPT comes up with peace and
harmony, ZenFlow bring thou might,
7:49
ultimate meditation app, thy name is.
7:53
Not the funniest, but I can
definitely see what it was going for.
7:56
But I'll hit control Z to undo.
7:59
Next, let's take our headline and
translate it into another language.
8:00
I'll click on the AI translator tab and
choose my language.
8:04
Let's try Danish.
8:08
Now I'll click the translate button and
let Cube GPT do its thing.
8:09
And wow it wasted no time
translating my headline.
8:13
Let's try translating the headline
into another language.
8:17
How about German?, Wow, its
8:19
awe-inspiring how fast it can update the
text in our design into a new language.
8:25
No need to copy and paste.
8:29
Let's try another translation.
8:31
Let's try French.
8:34
And there we have it, impressive.
8:38
And let's do one more.
8:44
I think I'll try Japanese.
8:45
Now admittedly,
I can't understand these translations.
8:52
Still, it's incredible to
think especially in conceptual
8:54
work like wireframes that we can
create more realistic designs and
8:57
copy in minutes and create multiple
versions for different languages.
9:01
This allows us to create so
many more concepts and
9:05
iterations while using a fraction
of the time and energy but
9:08
I think that will do it for
the Cube GPT plugin.
9:12
I'll catch you in the next video where
we'll be working with UX pilot.ai.
9:15
See you all.
9:18
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