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 Introducing UXPin Merge!
You have completed Introducing UXPin Merge!
Preview
Get acquainted with the UI of UXPin Merge. In this video, we'll explore the user interface of UXPin by creating an employee portal project and utilizing the powerful UXPin Merge feature. You'll learn about the main UI areas: top bar, properties panel, quick tools, bottom bar, and canvas. We'll show you how to navigate these sections, align elements, and use quick tools for efficient design. Additionally, we'll demonstrate adding and customizing MUI components and previewing your design with real-time interactions.
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
In this video,
we'll dive right into the UI of UXPin.
0:00
So, first things first,
let's create a new project.
0:04
We'll come up here to the button,
and we'll press that.
0:07
Now, I've got an exciting project in mind.
0:10
Let's create an employee portal.
0:13
This is a layout where we can truly
explore the power of UXPin merge.
0:16
So we'll name our project,
employee portal,
0:21
and we'll click Create New Project.
0:25
And just like that, we are in the editor.
0:28
Now this is where
the magic really happens.
0:30
But before we get too carried
away with our employee portal,
0:33
let's take a moment to
understand the UI of UXPin.
0:37
It's like the control center
of our creative journey.
0:40
If you are familiar with UI or
UX design tools,
0:44
then this will look very familiar,
but let's have a look.
0:48
There are five main areas,
the top bar, the bottom bar,
0:52
the quick tools, and
the properties panel, and the canvaS.
0:56
Let's start with the top bar.
1:00
This is our command center,
it houses the tools and
1:02
options and
will adapt based on our selection.
1:06
Starting on the left, you can navigate
back to the dashboard and you can switch
1:09
between prototypes and you can also toggle
between design and documentation modes.
1:14
In the middle,
we have the name of our prototype,
1:20
which we can change later,
as well as some options.
1:24
On the right, we have prototype actions,
which allow you to share or
1:27
preview your prototype, and
there is also some zoom options.
1:32
Now moving down to the properties
panel on our right.
1:36
This is our customization station.
1:40
It allows you to tweak the properties
of any element in your design,
1:43
ensuring that each design aligns
perfectly with your vision.
1:47
The contents of this panel will largely
depend on the element that we've got
1:51
selected.
1:55
So for example,
we have nothing selected right now.
1:55
So we get the customization options for
the design in general.
1:58
We can for example,
change the canvas size to iPad.
2:02
Since we're going to be designing
the employee portal for an iPad.
2:08
Now, let's swing over to
the quick tools on the left.
2:13
This is your toolbox providing quick
access to frequently used tools for
2:17
efficient designing.
2:21
We can see some really familiar
design tools like the rectangle,
2:23
the pen tool, or the text tool.
2:28
But since we're working
with MUI components,
2:30
we won't actually use these tools much.
2:33
Next for bottom bar.
2:35
On the left you'll find access to
the pages and layers panel and
2:37
the design system libraries panel,
we'll use these panels a lot, so
2:41
we'll come back to them a little later.
2:46
And on the far right of the bottom panel,
you'll see the view settings,
2:49
accessibility settings,
the autosave indicator and the help menu.
2:53
And finally,
the center of it all is the canvas.
2:58
This is your design space where we'll use
to build our employee portal app design.
3:01
A quick tip for navigating the space is
to get really familiar with the zoom and
3:07
pan shortcuts to quickly zoom in and
out, hold down the command or
3:13
control key and scroll up and
down with your mouse's scroll wheel.
3:17
And to quickly pan around the canvas,
hold down the space bar, and
3:22
then click and
drag with your mouse, like so.
3:26
And we can see it a little
bit better this way.
3:29
Now, these shortcuts are super helpful for
3:32
you to navigate around
your design quickly.
3:35
We'll be working mostly with
the first tab, the MUI components.
3:38
So let's click through to that one.
3:41
This is we'll find and
use all the react, ready MUI components.
3:44
On the bottom left here, we can see that
we're looking at MUI five components.
3:49
Click on this and we'll be able to see all
the UXPin libraries are available to us.
3:54
Below them you can see classic libraries.
3:59
Let's click into one of them.
4:02
Let's say foundation.
4:04
As you can see these are more traditional
design systems which include color,
4:07
typography, assets, and
components built from these assets.
4:13
Now these components do not have
built-in interaction and code,
4:17
unlike the super cool merge libraries
that we'll be playing around with.
4:21
So we'll be sticking with MUI5
under the merge libraries section.
4:26
So let's select that one again.
4:32
Now, we'll get more into MUI and
MUI components in the next video.
4:34
But for now let's have a look at how
the user interface changes when we've got
4:39
a component on the canvas.
4:43
So while we're here, let's search for
a card component, and we can click
4:45
on it to put it on the canvas, let's
zoom out a little bit, and pin it down.
4:50
Now let's make sure it's
selected by clicking on it.
4:55
You can see,
4:58
when we click on an off it that there
is an orange outline that appears.
4:59
So when there's an orange outline,
it is highlighted and
5:03
it means that it's being selected.
5:06
And instantly you can see that
there are some UI changes.
5:08
The top bar now features the name
of the component on the left, and
5:12
there's some new icons in the middle.
5:16
These icons allow us to group fill with
data, bring to front and bring to back.
5:18
When we group multiple items together,
we can treat them as one grouped element.
5:24
This bring to front and bring to back
buttons allow us to bring the selected
5:29
elements to the visual front or
the visual back of the elements displayed.
5:34
For example, if I put another card here,
and I sort of put it just above it,
5:40
I can make sure it's selected, and
if I press this to back button,
5:45
it will bring it to the visual
back behind the original card.
5:49
And similarly,
if I press this to front button,
5:53
we bring it to the visual front
in front of the original card.
5:57
So let's put this one aside for now.
6:01
Now this fill with data
button is quite special.
6:04
It allows us to populate this particular
element with data from a JSON,
6:08
CSV or Sheets file.
6:13
This is particularly useful if you
have a ton of data like users or
6:14
avatars, and
you want them to be a part of your design.
6:19
The properties panel now looks
a little different as well.
6:24
The first thing that we have on
the top are the alignment tools.
6:27
These tools align our selected
element to the canvas, or
6:31
they align selected
elements to each other.
6:35
Let's zoom out so
we can see the entire canvas.
6:39
And let's select the first card and we'll
play around with some alignment tools.
6:43
Now this first one,
6:48
align left will align our card to
the far left of the canvas, like this.
6:49
Now align right, align top and
align bottom, all do a similar thing.
6:54
But we also have align center and
align middle.
7:01
Now these will align
the element to the vertical and
7:04
horizontal center of the canvas,
like this.
7:08
If we press align center, it goes to
the center, and if we press align middle,
7:11
it goes to the middle.
7:15
But what about these last three
that seem to be deactivated.
7:17
Well, these are reserved for
when multiple elements are selected.
7:21
To best demonstrate this,
7:25
we'll create a third card by
dragging one out to the canvas.
7:27
And then we'll select all of our cards
to check out what these buttons do.
7:32
First, we'll want to select all the cards,
and I'm doing this by clicking and
7:37
dragging over all three cards and
you can see that they're all selected now,
7:41
with that blue highlight.
7:45
You can also do this by clicking on one,
and then holding down shift,
7:47
and then clicking on the other ones.
7:52
Now we'll explore these
alignment ones first.
7:54
They do a similar thing as before.
7:57
However, instead of
aligning to the canvas,
7:59
we're now aligning
the elements to each other.
8:02
So for example, if we click on align left,
all the elements will
8:05
be aligned to the far left of
the left most element like this.
8:09
Now, if we try to align to the right now
or aligned to center, they do nothing.
8:13
Because they're all already aligned
to the right or center of each other.
8:18
So let's undo that action so we can
see the cards all sprawled out again.
8:23
Now I'm gonna move these a little
bit to showcase this next one.
8:27
Now let's try aligning the elements
to the top of each other.
8:31
So let's select them all.
8:35
And then press Align Top.
8:37
Now this time UXPin has aligned all the
elements to the very top of the topmost
8:40
element.
8:45
Let's undo that again so
we have our sprawled out cards.
8:46
Now that we've got three elements,
let's select them and
8:49
we can play with the final three buttons.
8:52
The first is Distribute Horizontally.
8:55
I'll move our cards around a little bit
just so I can showcase this better.
8:58
Now we'll select them all and
then press Distribute Horizontally.
9:03
This spreads our three elements out so
9:07
they are evenly distributed
from left to right.
9:10
There's even this nice gap between them,
9:13
which we can adjust by
changing this value here.
9:15
Now what I'm doing here is I'm clicking
down and then dragging left and right,
9:18
that's very handy.
9:23
Next we have this vertically distribute,
now to showcase this again,
9:24
I will move these guys
around a little bit.
9:29
And zoom out so we can see and
I'll select them all and
9:32
press Distribute, Vertically.
9:37
Now this feature spreads our three
elements out until they are distributed
9:40
evenly from top to bottom and now we can
even press this align center button so
9:45
that all are aligned to the middle.
9:50
And finally,
we have this distribute on grid.
9:52
Now you may have noticed by now that
sometimes we have these pink elements,
9:56
we've got this pink circle and
this pink line.
10:01
This is because they're
part of a smart grid.
10:04
Now if we click and
drag one of these pink lines, yes,
10:07
we can see that the spacing between all
of our cards change at the same time.
10:10
This distribute on grid button
redistributes selected elements, so
10:15
they're spaced evenly apart and
therefore qualify for the smart grid.
10:20
For example, if we move this middle
card off to the side and down a bit,
10:25
we can see that the three elements are no
longer applicable for the smart grid,
10:29
there's no pink elements.
10:33
However, we can now click on
this distribute on grid button.
10:35
This element here has
now been moved up and
10:39
we can see our pink lines again, like so.
10:43
Now, we don't need all three cards for
the next bit, so
10:46
we're just gonna delete two of them.
10:50
Okay, we'll get the selected again and
we'll move down our properties panel.
10:52
Here we've got the the dimensions and
the position of our element.
10:57
Now we can manually adjust it like this,
but
11:00
we can also use these
buttons to the right.
11:04
Now the first one will automatically
resize the element to fit its contents
11:08
like this.
11:12
Now in our case our card becomes
much wider to accommodate for
11:13
the size of the image, will turn that off.
11:17
Now the second one will turn on
Responsive Width, which will automatically
11:20
scale to the width of the container,
in which case it's our iPad.
11:26
Now we can see this in action
if we change the canvas size.
11:31
So deselect the card, and
then come over here to Canvas Size and
11:34
let's change it to iPhone 8.
11:39
And we can see that the card
has now been rescaled to
11:41
fit the width of the iPhone 8 canvas.
11:44
So we'll change this back to iPad for us.
11:46
Whoops, change it back to iPad, and
then we'll also turn this off for now.
11:49
Put it in the middle.
11:55
And moving down, we see this gray
box that contains information
11:56
about this component and
the fact that it's a MUI 5 component.
12:00
There's even a little button that takes
us directly to the MUI docs page for
12:04
the card component.
12:08
Now the rest of these options are specific
to the card component, so we'll save that
12:10
for the next video where we'll have a look
at MUI components and their options.
12:14
Now, what's great about UXPin Merge is
that we can further customize these MUI
12:19
components and nest them within each
other, just like we might do so in React.
12:24
So let's say I wanna add the MUI
rating component to this card.
12:29
I simply have to find it.
12:34
Let's find it up here.
12:36
We'll search for rating, and
12:36
we'll click on it to add it to the canvas.
12:40
Now, we can also see
the rating component up here.
12:45
It's not part of the card component,
but we want it to be.
12:48
So let's click on it and drag it between
these two typography components.
12:51
And we can see that it pops into the card,
just like that.
12:56
Now, clicking a component
directly from the layers panel,
13:00
like this is actually only
one way of selecting it.
13:04
We learned earlier that clicking on the
card from the canvas will select it, but
13:07
we can also select any of its
children by double clicking.
13:12
For example, we can double click on this
card header component here to select it.
13:15
And you can see that this is the case
because over here in the panels,
13:21
you can see that the card
header is selected.
13:25
Now, we can do this as many
times as we need to depending on
13:28
how nested the component is.
13:31
For example, if we want to come to
this trends typography component,
13:33
we'll have to double click
on the card component and
13:37
then one more time to
the typography component.
13:40
Now you may be thinking that's a lot
of clicking and you're totally right.
13:43
There's actually a much faster way
that I only discovered a few days ago.
13:47
So if you're on macOS,
you can hold down the command key and
13:52
hover over these elements and
they'll get highlighted.
13:55
And you can click on
the element you want and
13:58
that nested child component
will be selected right away.
14:00
And there's also one more way if you
right click on your desired element and
14:04
then hover over select layer,
you can select the one that you want.
14:08
And we want typography.
14:11
So it's up to you what method you want to
use to select any of the child components.
14:14
I personally like the command click method
because I can select any element in one
14:19
single click and
all these layers also open up on the left.
14:23
So if we close card content and
then we come and select trends,
14:27
this opens up and
we can see all the children.
14:32
So now we've got an element on the Canvas,
now what?
14:35
So far everything's been quite
standard for a design tool.
14:39
Now the magic happens when
we preview our prototype,
14:42
so with our card front and center.
14:46
And actually let's use our alignment
tools to put it front and center.
14:48
Very nice.
14:52
So with that now for and center,
let's head up to the top and
14:53
preview our prototype.
14:57
Now, this will open another window.
14:58
Once it loads, we can see our canvas and
we can see our MUI card component.
15:02
Now, this is the view in which
we can see our prototype.
15:07
This top bar here now
features 3 different modes.
15:11
There's simulate which allows us to
go through the design without any
15:14
distractions.
15:18
Now comment allows us and
our team to leave feedback like this or
15:19
to go through other people's comments.
15:23
And spec lets us explore
the design in more detail.
15:26
And we'll go into this in
more detail in a later video.
15:29
So let's head back to simulate.
15:33
On the far right of the top bar,
we can adjust zoom settings.
15:35
There's preview on a device,
handle interactions,
15:39
full screen or responsive mode.
15:43
Now, since we're only designing for
an iPad at the moment,
15:46
we won't have to worry
about responsive mode.
15:49
And what's really cool here is the ability
to preview your design on a device.
15:51
So you click here, and if you want to, and
15:56
you have UXPin mirror on your device,
like your tablet,
15:59
you can scan this QR code to check out and
preview your design on a tablet.
16:02
Now, this looks like a regular UI
design until you start interacting
16:07
with a component.
16:11
Now, because we're using React components,
16:12
all of these elements retain the behavior
of the actual React component by MUI.
16:15
For example, these rating stars can be
clicked by the person seeing the design
16:19
and they will retain state as well.
16:24
And if we come down here to the button, we
can see that when we click it, the little
16:27
circle originates from wherever our cursor
was clicking, which is a MUI thing.
16:31
Now we can head back to the design
by closing this prototype window.
16:36
The MUI rating and button components
are just the tip of the iceberg.
16:41
MUI has so many React components
as part of its library that we
16:46
as developers,
can take advantage of within UXPin.
16:51
We've just scratched the surface
of UXPin's powerful UI using
16:55
the merge feature and
the MUI5 React component library.
17:00
As we explore further in the next video,
17:05
we'll delve into MUI components,
their customization options, and
17:08
how UXPin makes the design process
seamless for us React developers.
17:13
I'll catch you next time.
17: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