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 Introduction to Wireframing!
You have completed Introduction to Wireframing!
Preview
In this video, Dan will guide you through building a wireframe for an ecommerce cart screen in Figma, utilizing the Simple Design System UI Kit. We'll customize elements to create a unique design, demonstrating how to effectively use Figma's tools and UI kits to craft a detailed and functional wireframe from scratch.
This video doesn't have any notes.
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, I'll walk you
through how to build a wireframe in Figma
0:00
specifically for
an e-commerce cart screen.
0:04
I'll show you how to get started
quickly using Figma's UI kits and
0:06
then customize those elements while
adding our own touches to make
0:09
the design feel truly unique.
0:12
Let's begin with a fresh Figma document.
0:14
I'll press F on my keyboard
to select the Frame Tool,
0:17
then head to the details
panel on the right.
0:19
Here, I'll choose the iPhone 16 Pro frame.
0:22
It's a nice middle ground between the
iPhone 16 and and iPhone 16 Pro Max, so
0:25
it'll work perfectly for this design.
0:29
With my frame set, I'll move to the left
side and open the Assets panel.
0:31
Once there, I'll click on the assets tab.
0:35
In this panel, you'll find several
UI kits provided by Figma.
0:37
There's an iOS 18 UI Kit and
a Material Design 3 UI Kit.
0:41
Both are perfect if you're designing
high fidelity mockups for iOS or
0:45
Android as they have ready to
use fully styled components.
0:49
However, the Simple Design System UI Kit
is what we'll use today.
0:52
It contains wireframing components in
black and white, which makes it easier to
0:55
focus on structure and layout before
adding any colors or branding.
0:59
I'll click on the Simple Design
System UI Kit to open it.
1:03
Here, under the examples tab,
you'll find a range of pre-built pages.
1:06
We're not using these today, but feel
free to customize them to your liking.
1:10
For this demonstration,
1:14
we'll create a new screen from scratch
using various components from this kit.
1:15
First, I'll look for the Navigation
section, click to enter it, and
1:20
then select the navigation button list.
1:23
Then I'll click this insert button, and
now I'll drag this navigation pattern down
1:26
to the bottom of the frame
until it snaps into place.
1:30
Now, I'll press K to
activate the scale tool and
1:35
stretch the navigation menu to fit
the full width of the bottom of the frame.
1:37
Next, I'll delete one of the five tabs.
1:43
After that,
1:45
I'll stretch the right side of the
navigation bar to fill the screen's width.
1:46
Then, I'll go to the gap setting and
1:50
set it to auto to ensure equal
spacing between the menu items.
1:52
Next, I'll adjust the second tab color so
it matches the gray of the other tabs.
1:59
I'll change the icon and text color using
the colors provided in the design system
2:03
included with the UI kit.
2:07
I'll try this secondary gray, but
yeah, that's a bit too dark so
2:14
it's not this one.
2:19
I'll select tertiary gray to make
the second tab less prominent, and
2:20
that works better.
2:25
Next, I'll select the navigation frame and
adjust the fill color to a dark gray so
2:30
it's not solid black, but
a deep shade that still offers contrast.
2:34
I'll now name each link
in the navigation bar.
2:42
The first link will be Home, and
the second link will be Merch,
2:45
followed by the link for About Us.
2:48
And finally, the last link will be for
this screen, so I'll name it Cart and
2:50
that'll do it for my navigation links.
2:54
Now I'll duplicate this navigation
list by pressing Control D and
2:57
move the duplicate to
the top of the screen.
3:00
This helps me ensure the header and
footer have the same height.
3:07
Next, I'm gonna delete all
of these navigation links,
3:11
leaving just the background.
3:14
Then I'll press T to
activate the text tool,
3:19
create a text box, And
then I'm gonna add Dan's Merch Store.
3:22
But it looks like the text is black, so
I'll just go to my fill and adjust that.
3:28
The color is already white,
3:34
which means the text layer must be
underneath the navigation frame.
3:35
Let's check the Layers panel.
3:38
And that's exactly what happened.
3:41
I'll grab my text layer for
Dan's Merch store and
3:43
I'll bring that above
the rest of the layers.
3:45
Then I'll head over to the Alignment
section in the Properties panel and
3:52
set my text to left align.
3:56
And then I'll align the text vertically
in the middle as well by clicking
3:57
the Centering icon in
the Properties panel.
4:01
Then I'll select the text one last time.
4:05
Now, I'll bump up the size
of my header text.
4:08
I'll make it 28 pixels, and
instead of solid white,
4:10
I'll make the text gray like
the navigation menu items.
4:14
I'll use the Fill tool and select
the gray from the on this Page section.
4:17
Now, let's go back to the Assets panel and
4:24
bring in some elements
to flesh out this page.
4:26
And as you'll notice, I have plenty of
sections containing design patterns and
4:28
design elements to choose from, everything
from navigation and icons to cards and
4:32
buttons.
4:37
But I'll actually start
with the Card section and
4:38
choose this first card pattern.
4:40
And then I'll click Insert.
4:42
Next, I'll press K to scale
the card down slightly so
4:45
it fits within the screen with
some white space on both sides.
4:47
Once centered, it looks good to me.
4:56
Since I don't need the information icon on
the left side of the card, I'll delete it.
5:03
But as you'll notice,
that adjusts our layout.
5:08
To preserve the space,
I can either delete the icon and
5:10
add something new while
configuring the auto layout.
5:12
Or I can simply hide it by
setting its opacity to zero.
5:16
This keeps the auto layout intact so I can
keep working quickly without having to get
5:20
hung up on Figma's auto layout features.
5:24
Now that the icon is hidden, I'll change
the title to T-Shirt 1 and update the body
5:26
text to say Premium T-shirt with
a new line for the size large.
5:31
Then I'll edit the button text to say
delete for removing items from the cart.
5:34
Next, I'll press R to
use the rectangle tool.
5:39
I'll draw a light gray rectangle and
5:42
then create an X inside it by
drawing two diagonal lines.
5:44
This represents a placeholder for
a product image.
5:47
It seems my square is behind
the other layers again,
5:57
I'll have to bring it to the front.
5:59
Now, I'll change the fill of my square to
make it a lighter gray, that looks good.
6:10
Now, I need to apply
my two diagonal lines.
6:14
There's my first line,
let me just change my fill.
6:19
And once again, it seems my line
is underneath the other layers, so
6:22
I'll delete it.
6:25
And now I noticed why
this keeps happening,
6:26
all of my items are being created outside
of my frame, while positioned on top.
6:28
I need to reselect all my layers and
move them underneath the frame layer so
6:32
it places all of my layers
inside of the frame.
6:36
Here we go, that's better.
6:40
Now, new elements should show
up on top in the Layers panel.
6:43
I'll try testing this out by
creating a new diagonal line again.
6:45
And yep, my line shows up as the topmost
layer inside my iPhone 16 Pro frame.
6:50
Now, I'll create my second line.
6:56
There we go.
7:00
And I'll take a quick moment
to zoom in and adjust these so
7:01
they're a bit more even.
7:03
This really isn't necessary,
7:05
especially when wireframing quickly,
But there, that'll work.
7:07
Now, let's zoom back out.
7:12
I'll take a quick moment to evaluate
what I have and decide what to add next.
7:14
On the left side of the card, I'll create
a small square for the quantity counter.
7:19
And then I'll select my wireframe
placeholder elements and
7:26
group them together.
7:29
Then I'll make sure my square for
7:33
the quantity counter aligns flush with the
product name and wireframe placeholder.
7:35
Then I'll add buttons
to adjust the quantity.
7:42
I'll start by creating a rectangle,
remove the fill, and add a black stroke.
7:44
Then I'll duplicate the shape and
position them side by side, one for
7:48
the up button and
the other for the down button.
7:52
And now, I'm just making
some alignment adjustments.
8:00
I'm trying to get the buttons to take up
an equal amount of space as I don't want
8:02
either button to be larger than
the other or any gaps in between.
8:05
And I realize it's not 100% pixel perfect,
but
8:13
it's good enough now that I'll
move on to the next step.
8:16
Next, I'll add a triangle inside the left
rectangle to represent the up button.
8:19
Now, let's change the fill on my triangle.
8:29
I'm experimenting with
different shades of gray, but
8:32
I think I want to use a lighter
shade on the triangle and
8:34
create contrast by adding a dark
gray fill to the button background.
8:37
Next, I'll add a fill to
the square behind my triangle.
8:40
And again this will be a darker hue
to make the triangle pop out a bit,
8:42
I want the buttons to be easily
noticeable and identifiable.
8:45
Let me go back and adjust my triangle
by making it just a bit lighter.
8:48
There we go, perfect.
8:53
Then I'll duplicate this triangle,
then head over to the Properties panel.
8:57
And under transform, I'll select the flip
vertical icon to flip it upside down and
9:01
place it inside the right rectangle
to represent the down button.
9:05
I'll adjust both rectangles to match
in color using the dropper tool.
9:09
There we go.
9:18
Now, we have two buttons for
changing the quantity value up and down.
9:19
And I'll just nudge my triangles slightly
to gently center them in the middle of
9:22
the buttons.
9:26
Then I'll hit T on my keyboard to select
the text tool and create a text box for
9:28
the quantity, and I'll put one in here.
9:31
Then I'll line it up within the box and
actually,
9:37
I think I'll decrease the size a bit.
9:40
And I think 22 pixels looks good,
so I'll leave it there and
9:44
then I'll center the quantity
number inside the box.
9:47
All right, now I'm going to zoom back out
and take a look at what I have so far.
9:51
Not bad, but I think we need more
contrast between the navigation tabs and
9:56
the black background.
10:00
So I'm going to select
each of my elements and
10:01
I'm going to make them the lighter
tertiary gray from the design system.
10:03
Then we have the colors for the merch tab
and icon here, let's change those as well.
10:11
And it's not the tertiary gray under text
neutral, that's actually a bit darker.
10:16
Here it is up here though, and
then I'll change the icon as well.
10:23
Now, I'll select the cart tab, and
we'll change the color to white so
10:34
this tab stands out since, this is
the screen we're currently viewing.
10:37
First, I'll detach this component
instance from the master component.
10:44
This just means it's no longer updated
when the master component is updated and
10:48
instead is its own component now.
10:52
There we go, that looks better.
10:54
But I noticed our quantity
counter might be more easily
10:58
recognizable if I added a label.
11:00
So I'll zoom in and
11:02
add a text label underneath the counter
that simply reads quantity.
11:03
And we want this label to be pretty small.
11:08
So I'm going to resize the text around 8
pixels to fit nicely beneath the counter.
11:10
Next, I'm going to duplicate
my quantity label and
11:16
move it under my product
photo placeholder.
11:19
This is where I'm going to display
the price for this particular item.
11:21
So I'll put price followed by
the colon symbol for the label,
11:27
then adjust the alignment to left and
then add the price, which is $25.
11:31
Then I'll increase the text
size using the scale tool, and
11:36
then I'll make the text box wider to fit
the text label and price on the same line.
11:40
And now, I'll zoom out to get
a full view of the screen again.
11:47
There's still plenty of tweaks and
adjustments we can make for sure, but
11:51
overall, I think this is a fine
product card for our cart screen.
11:54
Since the card is looking good enough to
move on, I'm going to highlight all of
11:57
the layers in the card and
I'll hit command G to group them together.
12:01
Then I'll hit command D
to make a duplicate, and
12:04
I'll place the second product card
right underneath the original.
12:06
I'll adjust the quantity to 3.
12:14
Change the product name to T-Shirt 2 and
update the size to medium.
12:20
And I'm gonna zoom out just a pinch.
12:26
Next, I'll return to the Assets panel and
search for
12:30
a breadcrumb style navigation element.
12:33
I'll just start typing header and see what
comes up, and before I can even finish,
12:35
I get a few different results.
12:39
I'll select this menu header component
at the bottom and modify the text.
12:41
The main text will display Your Cart and
12:46
the smaller grayed out text above it
will read Home, Cart to represent
12:49
the breadcrumb trail showing the hierarchy
from the home page to the cart page.
12:53
To customize this component freely,
12:58
I'll detach it from the design
system under typography.
13:00
Then I'll set the font size to
something smaller, like 10 pixels.
13:04
Now, I want to align the text in
the breadcrumb navigation pattern
13:09
fleshly against the left side of my cards,
but
13:12
it appears there's some gap
preventing me from doing this.
13:14
I just need to adjust
the left side padding for
13:17
the component in the Properties panel,
so I'll set that to zero, that's better.
13:19
Now, I'll quickly align my header text
to be left aligned with the breadcrumb
13:25
navigation and my cards.
13:28
At this point,
the design is coming together nicely, so
13:33
now I wanna add a subtotal pattern
underneath my product cards to give
13:36
the user an idea of
what the total will be.
13:40
Now, I won't include fields for
tax or shipping in this demo, but
13:42
you certainly could.
13:45
I'll add a text block here underneath
the cards, and I'll write subtotal, which
13:47
will be $100, $25 for T-Shirt 1, and $75
for three orders of T-Shirt 2, perfect.
13:52
Now, I'll go back to the Assets panel and
select a button component.
13:58
This time, instead of clicking on it and
selecting Add,
14:02
I'll drag the button
directly into the design.
14:04
This is an alternative way to
select components from the UI kit.
14:07
I'll stretch the button to fit
the full width of the screen, and
14:10
then I'll change the button
text to continue to checkout.
14:13
Now, let's update the icons
in the navigation bar.
14:23
I'll start off by clicking each of the
icons and setting their opacity to zero,
14:26
again, to hide the icon
while preserving the space.
14:30
And there we go,
all four icons have been hidden.
14:37
I'll head back to the Simple Design
System UI kit and go to the Icons tab.
14:40
I'll search for a home button, and this
little house icon will work perfectly.
14:47
I'll drag it into my layout,
and once it's in my design,
14:51
I'll align it to be horizontally
centered with the home text below it.
14:55
And I'll also change the fill to
the tertiary gray under icons.
15:00
Next, I'm going to change
the size of the icon.
15:05
The Simple Design System has included
a few preset values for the icon size, so
15:07
I'll head up top to change it.
15:11
And 20 pixels looks a bit small,
so let's go with 32 pixels.
15:13
That's good.
15:20
Now, I'll head back to Assets and I'll
try searching for a package or box icon.
15:21
Well, the box icon is a little plain and
might be confusing to our users,
15:26
let's try searching for a package icon.
15:30
There we go, that looks more like
a shipping box or a box full of merch, so
15:32
I'll use that by dragging it in.
15:36
I'll make it the lighter gray, tertiary,
and set the size to 32 pixels as well.
15:37
Let's return to the Simple Design UI Kit
and search for a letter icon.
15:48
Since nothing shows up, I'll try
searching for mail, and there it is.
15:56
I'll drag in the mail icon and
style it just like the others.
16:00
Next, I'll go back to the Simple Design
System UI Kit and search for a cart icon,
16:13
perfect.
16:18
I'll drag in the shopping cart icon,
16:18
change its color to light gray,
16:25
and and set the size to 32 pixels.
16:30
Great, now, let's zoom out to
get a full view of the design.
16:38
Everything looks good, but I noticed
we're missing a Hamburger menu icon.
16:45
So I'll go back to the Simple Design
System UI Kit, search for menu and
16:48
find it at the bottom.
16:53
I'll drag it into my design and
place it in the header section,
16:55
then I'll change the color to
the tertiary gray we've been using.
16:58
Then I'll also change my header text Dan's
Merch Store to also be this lighter gray.
17:03
Except this time I'll
use the Dropper tool and
17:08
pull the color from one of
my icons in the Nav menu.
17:10
And lastly, I'll make some
minor alignment adjustments,
17:13
aligning the Hamburger menu to be
horizontally centered with my header text.
17:15
And I'll adjust my header
text by just a few pixels.
17:19
As a designer, you can spend forever
making these small adjustments, so
17:22
use your time wisely, but that's it.
17:26
This is how you can quickly wireframe
a new screen from scratch using
17:28
Figma's UI Kits, particularly
the Simple Design System UI Kit.
17:32
I hope this tutorial gave you a good
understanding of wireframing in Figma and
17:36
inspires you to create your
own designs with confidence.
17:39
Get out there and design more.
17:42
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