"The WordPress Template Hierarchy " was retired on July 6, 2019.
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
Get ready to be astonished as WireGen transforms your words into stunning wireframes in an instant. Follow along as we show how WireGen effortlessly brings your design concepts to life in Figma.
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
Welcome back, in this video, we're going
to check out an AI-powered plugin for
0:00
Figma called WireGen.
0:03
WireGen is a plugin that can turn
your text prompt into a wireframe for
0:05
a website or app.
0:09
It can even generate wireframes for
both mobile and desktop layouts.
0:10
Let's get started, I'll go to our
Resources icon in the main menu and
0:14
then to the Plugins tab.
0:17
Here, you can see I have WireGen in my
list of recent plugins from our last
0:19
video, but I will type it in
the search bar to show the process for
0:23
plugins that aren't on the recent list,
okay?
0:27
And there we have our plugin, I'll click
on it and it should load right up.
0:30
WireGen has a pretty simple user
interface, you use the text box to input
0:33
your prompt, and click the Generate button
to start generating your wireframe.
0:36
We then have an option for the amount
of screens our design project has.
0:41
We can use the standard default of one
screen, and design one screen at a time or
0:44
we can use auto detect, and the assistant
will decide how many screens our app or
0:48
website needs based on
the prompt we give it.
0:52
Under preview you can pick phone or
desktop,
0:54
this will adjust the layout of
your design for the chosen device.
0:56
But that's it, I think we're ready to
generate our first wireframe, let's set
1:00
our design to desktop mode to start out,
then I'll provide WireGen with my prompt.
1:04
Travel booking website's homepage,
featuring a central booking section,
1:09
layout includes a large rectangular
input area at the top for location and
1:13
dates, flanked by two vertical banners
showcasing popular destinations.
1:16
Below a grid layout displays various
travel package options, navigation bar at
1:21
the top, and footer with contact
information and social media links.
1:24
Now, let's click Generate,
and after a few seconds,
1:29
WireGen should begin by
processing our prompt,
1:31
and translating that into different
sections and elements for our design.
1:33
In this example, it's mentioned
sections such as the navigation bar,
1:45
a central booking section to input
your travel details, and more.
1:48
Once WireGen has come up with
a detailed layout from start to finish,
1:52
it will begin generating the design
under the preview section on the right.
1:55
And there we have our design.
2:10
Let's scroll back up to the top.
2:13
In this layout we have three popular
destinations to book at the top,
2:15
followed by our travel booking form.
2:18
That allows our users to input trip
details, such as the location, trip dates,
2:20
and number of guests.
2:24
It looks like the form labels and
form input placeholder text overlap, but
2:26
we can fix that later.
2:29
To the right of our booking form, we have
a card pattern for customer reviews.
2:31
We also have a few pre-made travel
packages underneath our booking form.
2:35
I would say, overall WireGen has
done a pretty good job of providing
2:39
us with a possible layout for
our travel website.
2:42
We can even preview the mobile layout,
which incorporates the same elements, but
2:45
in a new design that fits
the dimensions of a phone.
2:48
All right, let me go back to desktop mode.
2:53
Then I will scroll to the bottom
of the plugin window, and
2:55
click on this button that says,
Copy to Figma.
2:58
Then I'll scroll back up to
Select Mobile and I'll do the same, and
3:01
click Copy to Figma.
3:03
Now I have both versions of the provided
design copied to my canvas, but it looks
3:06
like they're overlapping, so let me take
a quick moment to organize my assets.
3:09
While I do this, I'll mention that when
copying the WireGen design to Figma,
3:14
it not only provides editable
versions of the design, but
3:17
a copy of the text prompt as well.
3:20
This is a good way to keep all of
your design inspiration and assets,
3:22
including prompts, in one place.
3:25
Okay, now let's start tweaking
this design, so to start off,
3:28
let's fix the form text.
3:30
We can try moving the form
labels up a bit, but honestly,
3:32
they should be above the box on
the outside, so let's move them out there.
3:34
Then to fit each of the labels,
3:38
I'll have to move the book your travel
section header up a bit as well.
3:39
See, this fixes the overlapping
text issue, looks better, and
3:43
is a more accessible design overall.
3:46
Next, let's go back up to our three
popular destination cards and
3:49
add some random destinations.
3:52
Let's go with Malibu, then California, and
how about Austin, Texas for our last card?
3:54
We can even customize any element,
such as buttons.
3:59
So let's make the book now CTA for
the Malibu card, another color,
4:02
let's try a shade of red.
4:05
Of course, we would probably want
to change our text color next, but
4:10
you get the point.
4:13
Every aspect of the wireframes
generated by WireGen can be edited and
4:14
adjusted to fit your needs.
4:18
But let's head back to the WireGen
plugin and try another prompt.
4:19
Before we do, I wanna point out this
counter in the lower left hand side of
4:27
the plugin window, this keeps track
of your remaining prompts limit.
4:30
WireGen and provides 25 generations for
free each month, but
4:34
you can purchase one of their paid
plans to raise your generation limit.
4:37
As you can see, it says I've used one
generation out of 25, so both desktop and
4:42
mobile versions of the same design
only count as one generation.
4:46
Now back to designing, this time, we'll
generate a wireframe for a meditation app.
4:50
Let's use the prompt.
4:55
Meditation app dashboard,
showcasing a clear and organized layout,
4:58
include distinct sections for
different meditation categories,
5:01
such as mindfulness, stress relief,
sleep, and beginner's guide,
5:04
each with placeholders for text and
icons at a dedicated area for selecting
5:08
meditations by instructors with space for
instructor names and a brief description.
5:12
Feature a prominent search bar at the top,
a favorites section for
5:17
easy access to preferred meditations,
and a simple user settings menu.
5:20
Looks like our prompt is too long, we'll
just cut off the simple user settings part
5:25
and end with a favorite section for
easy access to preferred meditations.
5:29
Then I'll click Generate and
give WireGen a few moments to plan and
5:32
build out the design for
my meditation app.
5:35
All right, WireGen has finished with the
wire frame, and it's looking pretty good.
5:53
It has the requested meditations,
collections sections, and
5:57
even some user analytics.
6:00
This is really solid, I'll check out
the desktop version really quickly.
6:02
Okay, awesome, it has all of the same
content just in a different layout.
6:08
And I can already see some things
I would like to change, so
6:12
I'll click Copy to Figma And
6:15
like before, I'll move these wireframes
around to give them some space,
6:21
but I'll skip ahead and we'll dive
right into my mobile wire frame.
6:24
All right, so first thing I'll do is
replace user's name with my own name.
6:27
While this represents a variable
to be used in the design,
6:31
I want to create a design
with fully populated data.
6:34
So my app starts with a personalized
Welcome, and a search bar to search for
6:39
specific meditation sessions.
6:43
Then it goes into a series of
various meditation collections,
6:45
such as stress relief, sleep, and more.
6:48
For mindfulness meditation,
6:51
WireGen introduces a card-like pattern
featuring an image placeholder.
6:53
This placeholder feels a little snug
against the text above it, so I'll resize
6:57
it just a bit to make it smaller, and then
left-align it with the rest of the text.
7:01
Perfect, for
the Stress Relief Meditation card,
7:08
I'll simply select the image
placeholder and nudge it down a bit.
7:10
Let's keep going, further down
we have our user analytics, but
7:18
it seems the actual
visualization is just a graphic.
7:21
It's not a vector that I can edit and
change like the other elements.
7:23
I can change the subheading
text above the graphic,
7:27
just not the actual graphic itself.
7:29
And moving down, I have my footer, okay,
7:36
now let's check out the desktop
version WireGen provided.
7:38
I knew from the preview that I wanted to
fill in this open white space on the left
7:42
of my design, and I think I can bring over
some of these card elements to fill it in.
7:45
I wanna go for
7:50
an uneven masonry gallery-style layout
as opposed to a perfectly aligned grid.
7:51
To start I'll bring the sleep
meditation card over and
7:55
I'll line it up under these
smaller quick start blocks.
7:57
Next I'll grab
the Beginner's Guide Meditation card and
8:00
bring that over as well.
8:02
Now I'll grab my two charts and
bring them up.
8:07
I didn't have a set plan for the chart,
so I'm just feeling out what flows and
8:09
makes sense for the layout.
8:12
Okay, I like them lined up with our cards
here, so I'll grab the second chart and
8:18
bring that up as well.
8:22
Then I wanna create a rectangle element,
and
8:27
I'll place that behind the charts
to add some contrast, and
8:29
help the chart stand out from
the rest of the card patterns.
8:32
All right, that looks good,
but I think you get it.
8:42
WireGen is great at producing simple,
balsamic-style wireframes.
8:44
It's the perfect tool for
defeating writer's block and
8:48
crushing the blank page.
8:51
In the next video I'll go over our next
AI-powered Figma plugin in, Cube GPT,
8:52
I'll catch you there.
8:56
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