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
In this video, we'll design an employee portal view for tablets using MUI components. We'll start by setting up the canvas and using MUI's container and stack components to structure our layout. We'll then customize the header and user information section. Using UXPin Merge, we'll wire up the interactions so that clicking each tab displays the relevant content. And finally, we'll ensure the design is functional and visually cohesive.
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
Hello and welcome back to video
four of the UXPin merge series.
0:01
This is video four, and in this video,
0:06
we're going to design our employees portal
view for tablets using MUI components.
0:09
Now, this view here is
what we're aiming for.
0:15
There is a header with a title
at a hamburger menu icon, and
0:18
then some information about user.
0:22
So, an image, a name, a title, and email.
0:24
And next we have three tabs
that the user can click on, and
0:28
when we click on each tab,
the view changes, so
0:32
we can see the relevant
content based on the tab name.
0:35
As you can see, the final design
doesn't have a card component or
0:39
a dialogue component, so it's safe for
us to delete that from our Canvas.
0:44
And we'll hover over both.
0:50
And speaking of canvas, it should already
be at the iPad size because of an earlier
0:51
video, but if you've been experimenting,
our canvas is a different size,
0:57
now would be a good time to come over
here to canvas size and set it to iPad so
1:02
that we have the same Canvas.
1:07
Now MUI provides some really great
components in their layout category,
1:09
which I've already got open here.
1:13
And you can do that as well by opening
up this drop-down and selecting layout.
1:15
So there's box, container, grid,
image list, stack and hidden.
1:21
Now, if you're familiar
with web development,
1:26
you may know that a go to base
layout would be a container.
1:29
Now the container in MUI serves as
an optimal base layout because of its
1:32
structure consistency, inherent,
responsiveness across devices and
1:37
seamless integration
with MUIs grid system.
1:42
And this provides a solid foundation for
building visually cohesive and
1:45
adaptable user interfaces.
1:49
So, let's put a container
component onto our Canvas and
1:51
I'll do that just by clicking on it.
1:55
And it will drop a pretty inconspicuous
and basically empty box onto the Canvas.
1:58
Now, since it's already selected,
2:04
we can have a look at
the properties panel on the right.
2:05
So, it says that the container component
centers your content horizontally,
2:08
which is lovely.
2:14
We love some centered content, especially
for a narrow screen like a tablet.
2:15
And as always, there are a list of
props here that we can work with,
2:20
which are all well documented by MUI.
2:25
Now, we won't see much difference in our
design if we play around with it now,
2:27
cuz there's no content yet.
2:32
So we'll revisit some of
these later in the process.
2:33
This container will house all of
the content that we want to show
2:37
in this iPad view.
2:41
So, to make sure that it matches our
example, we're going to make sure
2:42
the containing content will span the width
to the page going from top to bottom.
2:46
So we'll drag this box up to the top and
then make it match the width of the page.
2:50
The next MUI component is the,
stack component.
2:56
If you're familiar with CSS,
this is basically Flexbox.
3:00
It will help us lay out components
out horizontally or vertically.
3:04
So let's pop on, on the Canvas and
use it to create our header, so
3:09
I'll just click on stack and there it is.
3:13
Now, if you're unfamiliar with
the MUI stack component or
3:16
CSS Flexbox, remember that the MUI
docs are just a click away over here.
3:20
The first thing I'll do here
is to rename this component,
3:25
so I can remember what it's for.
3:28
So now we'll switch over to the pages and
layers panel.
3:30
Now, I'm gonna start using a shortcut from
now on because we will be switching back
3:35
and forth quite a bit.
3:39
So, if you hover over these,
you can see that blue section and
3:40
it tells us what the shortcut is.
3:44
So, for macOS,
it's option one and option two.
3:46
Now, it may be something else for Windows,
so be sure to check out what it is for
3:49
you and we'll come over here to pages and
layers.
3:54
Since we want the stack to be for
the header,
3:57
I will rename this to header stack, and
4:01
we can do that by double clicking and
then we will rename header stack.
4:04
Now, we want all of our components to be
nested inside of the container component,
4:09
just like it would be in react.
4:15
So let's drag our header stack
into the container component.
4:17
And we can do that by clicking and
4:20
dragging until we have that blue
highlight and then we can drop it in.
4:23
We can now see this change both in the
layers panel here, but also on the Canvas.
4:28
The header stack is now nested
under the container, and
4:34
over here it's It's visually contained
within the container on the Canvas.
4:38
Now, let's change up the stack so it looks
a bit more like what we're aiming for.
4:43
We want the word portal on the left and
we want the hamburger icon on the right.
4:47
So, let's open up this carrots and
4:52
we'll delete these three buttons
because we won't need any of them.
4:55
And instead we'll use a typography
component for the left, for the portal,
4:59
and then an icon button component for
the right, for the menu icon.
5:04
So, let's head over to
design system libraries and
5:08
we'll use the search function to look for
typography and
5:11
it won't find anything because
we're just looking in layouts.
5:15
Make sure you come over here and
select all categories.
5:19
We'll drop a typography
component onto the page, and
5:22
then we'll also find an icon button for
the page as well, and we'll drop that in.
5:26
Now, let's head back to the layers panel,
and we can see typography and icon button.
5:33
And we'll drag both of these
into the header stack.
5:39
Now make sure that typography comes first
because we want portal on the left, so
5:43
we'll drag that until there's
got that little line there.
5:47
Let's change this Roboto text to
our actual text, which is portal.
5:51
So let's click on typography or
command click, and
5:56
over here in children,
we can change that to portal.
5:59
Next, let's change the home icon
to the hamburger menu icon.
6:03
So we'll click on this,
remember I'm command hovering and
6:07
I'm clicking on the icon, and we'll see
that the icon component is selected.
6:11
Now, under children,
we've seen this before and
6:17
we can change this to another icon.
6:20
Now these are simply material icons,
which we can look up quite easily.
6:23
In fact, let's do that right now.
6:27
We will go to fonts google.com/icons and
6:31
there is a lot,
you just have to scroll down a little bit.
6:35
But luckily, the one we want is
right here, it's called menu.
6:41
So, we can go back with that knowledge.
6:46
We can go to children, and
6:49
we'll go find the m's for
menu, where's menu?
6:52
There's menu, perfect.
6:57
Okay, now we just need to push them apart,
so they're on the far left and
7:00
on the far right of the screen.
7:04
Now, this is where stack does it's magic,
so we'll select header stack again,
7:06
and I'll do it with the layers panel and
let's have a look at the props.
7:11
Now, some of these will look really
familiar if you know CSS Flexbox.
7:16
And justify-content is what we want here,
so we're gonna change this
7:20
to space-between and we can see that
the two elements are now pushed aside.
7:25
We also don't need this
divider in the middle, so
7:30
we'll come here to divider and
we'll just delete that.
7:33
Now while the positioning does look
really similar, the colors certainly
7:37
don't match what we want, so let's make
this header black and the contents white.
7:42
So we'll select header stack again, and
7:46
we will change the style
by supplying an sx value.
7:49
Remember, this has to be JSON, so
we'll do background color is black.
7:53
Great, okay, and
now we can't see [LAUGH] anything.
8:01
So, we'll select
the typography component and
8:03
we'll change the color to white which
is one of the options for typography.
8:06
And finally, for the icon component,
we'll come here and we'll select icon,
8:11
now while there is prop for this,
it's not actually giving us what we want.
8:16
These are the, the MUI color schemes,
which doesn't have white.
8:21
So, we're going to specify
that with an sx.g.
8:27
So we'll do color white, nice.
8:31
Now, we want to give it
a little bit of padding, so
8:36
let's head back to header stack,
and we'll come here to padding,
8:40
and we'll give this prop
a value of 10 pixels.
8:45
And I know it's kind of hard to see, but
they're not quite vertically aligned.
8:49
So we'll also come over here to
align items, and we'll flex center.
8:53
You can see it changed a little bit,
but trust me, it changed.
8:59
And finally, we want our header
to span the width of the view,
9:03
which is the Canvas here.
9:07
Now this is actually determined
by the container component.
9:09
So, we'll come here to container and
we'll select it and
9:14
we will come over to
the disable gutters prop.
9:18
Now this, if we toggle between them,
9:21
you can see that it gives an extra bit
of padding inside of the container,
9:23
which we didn't want so we'll set it
to true, we'll disable the gutters.
9:28
So now we've got the header
down using all MUI components.
9:33
Next up step,
9:38
let's tackle the user section that appears
directly below the header element.
9:38
There was a left element with the image
and the right element with the text, so
9:43
it makes sense to use
another stack component.
9:48
So, let's come back to the design
system and we'll look for
9:50
a stack and we'll pop one right
in here and then we'll come.
9:55
We'll come back over
here to the Layers panel.
9:59
We'll name this UserStack, and we will
make sure to drag it into the container,
10:02
so will appear directly underneath.
10:07
Just like before we don't
need these three buttons, so
10:10
we will delete them, and
in its place we'll put in two components.
10:13
The first is the image on the left, so for
this we'll use the MUI's avatar component.
10:18
So, let's come over here and
look for avatar.
10:24
The content on the right is
actually three bits of text, so
10:28
three typography components.
10:32
So we will use a stack component there so
we can lay them out nicely.
10:34
So we'll come back and look for a stack,
and we'll pop one of those in as well.
10:38
So, coming back to the layers panel,
we'll make sure both of these
10:44
are in the user stack with
the avatar on the left hand side.
10:49
And within the stack we'll get rid of
the three buttons again because we won't
10:54
be using the three buttons.
10:59
And we'll rename this,
11:01
we'll call this UsererTextStack
cuz that's what it is, right?
11:03
And now that we've got that,
we can head back to our MUI components and
11:09
look for typography, and
there's three of them,
11:13
so I'll just add three to
the page by clicking three times.
11:16
And then back in layers,
11:20
we can drag all three typography
components to the UserTextStack.
11:22
Okay, so now that we've got all
the components and then nested correctly,
11:28
we'll get to work on the content and
the styling.
11:33
So let's set the content first.
11:36
This image, when we get to
developing the page in React,
11:38
we'll have a picture of the user itself.
11:41
But we don't have that at the moment,
so we can use a placeholder.
11:44
Now, what's really cool about UXPin is
that you can actually provide a URL.
11:48
So, if we click on Avatar and
we come over here,
11:52
the SRC attribute or
SRC prop is the Image URL source.
11:57
I personally love using place
kitten which provides a cat related
12:01
placeholder image of your desired size.
12:06
So, let's check out their website.
12:09
I'll go to placekitten.com, and
12:12
it looks like we will just
have to use a URL like this.
12:15
So, this is the width value,
and this is the height value.
12:20
So, let's do something like that,
150 by 150, okay, cute.
12:25
Let's grab that URL and
we can use it in UXPin.
12:31
Okay, so select avatar, and then over here
at the source prop we'll paste that in,
12:35
and we can see that
there's a cat right there.
12:40
Okay, and
then we'll make this a little bit bigger.
12:43
Now, there is a sizes prop here, but
it's actually not what you think it is.
12:47
So, this actually relates to the sizes
property of an image HTML tag, and
12:52
it's not what we want to
make this avatar bigger.
12:57
So, what we're gonna do instead
is we're going to supply CSS
13:01
styling over here in the SX prop.
13:06
So we'll come to the bottom, and we don't
need this background color anymore, so
13:08
we'll just replace it.
13:13
So we'll do width is 150 pixels, and
13:14
then height is 150 pixels as well,
and now it's nice and big.
13:18
So now we can work on the UserTextStack,
and I'm gonna select it here.
13:27
Now, we know we want each line to stack
vertically, so we'll change that here,
13:31
so the direction will be column,
like that.
13:36
Now, let's work on each line of text,
starting with the first ones.
13:40
So this first one, typography,
we'll change the children to the name, so
13:43
we'll just use my name, why not?
13:48
Great, and
then the second one is our user title.
13:52
So, again, we'll change the children,
I'll do lead developer.
13:56
And for the variant prop, we're gonna
change this to a H6, so it's a bit small.
14:01
And for the final one was an email,
so I'll just put rachel@portal.com.
14:07
And for
the variant we'll make this a body.
14:13
Now that we've got all the content
in place, let's get to styling this.
14:16
So first, let's get these lines of text
a little bit closer to each other.
14:21
So we'll select the UserTextStack, and
14:25
over here in spacing we'll use something
a lot smaller, let's do two pixels, okay.
14:27
And while we're here,
14:33
let's vertically align the text
to the center of the given space.
14:34
So we'll change Justify Content to center,
nice.
14:38
And as a side note, if justify content and
14:43
align items don't make much sense to you,
that's okay.
14:45
If you want to familiarize yourself
with these properties, check out MUI's
14:50
interactive demo of stacks where you can
play around with these properties and
14:55
see what comes out with
different settings.
15:00
And finally, to give everything some room,
15:03
we'll add 50 pixels of
padding to the UserStack.
15:08
So we'll select UserStack, and
then padding we'll give 50 pixels.
15:13
Okay, and we'll actually need to center
this so it will be Justify Content,
15:20
center.
15:24
Great, now it's looking much
closer to what we want, and
15:26
we can move on to the tabs.
15:29
So next up is the tabs.
15:32
So the design pattern is called tabs and
15:33
it's also what the MUI
component is called.
15:36
So, let's come to the design
systems library, and look for tabs.
15:39
And we'll click that, and make sure we
are dragging it into the Container,
15:44
and that looks pretty good, already.
15:50
So, let's make sure it is centered,
which I believe is a prop centered,
15:53
yep, and true, and
that's already right there in the middle.
15:59
Okay, so we'll open these up and
change the label, so
16:05
the label is the prop that
controls the text here.
16:09
So we'll change all three labels,
the first was tasks, and
16:13
the second was time sheet, and
the third one was request leave.
16:18
Okay, and that was super easy, and
16:25
that's because MUI already had
these tabs patterns set up, and
16:28
we were able to just grab it and use it
directly in UXPin thanks to UXPin match.
16:32
So now we'll build out the view for
these three different tabs, and
16:38
then we'll hook them
up using interactions.
16:42
Now, before we get into content, let's
create another container to contain them.
16:46
We can see in our original design
that there's a bit of margin or
16:52
gutter on the left and right of the table,
16:56
which is something that we
disabled in the main container.
16:59
So, let's create a new container within
the main container to house our content.
17:03
So, we'll come to the design
system library and
17:09
we will find the container,
and we'll add one of those.
17:13
Come back to layer and
we'll pull it into our main container.
17:18
Of course,
we will rename this ContentContainer.
17:22
And since we'll be hiding some of
these when we switch between tabs,
17:29
we're gonna start with the last one.
17:32
We're gonna start with request leave.
17:34
So, as you can probably
see in the example,
17:37
we won't actually be
building out this feature.
17:40
Were going to just have an alert,
a MUI alert component
17:43
saying that the feature isn't ready,
and to email your manager instead.
17:46
So, we'll swap again to
the design system library,
17:51
and look for alert,
we'll add that to the page, like so.
17:57
And of course,
we'll drag it into Content Container.
18:02
Okay, so the alert is already selected so
18:07
we can come straight over
here to the Properties panel.
18:09
So, the alert component does come
with a few different color schemes,
18:13
or as MUI calls them, severity levels,
and we can see that right here.
18:17
So we can select from info,
success, error and warning.
18:23
Now it's not so much an error, that's
super extreme, so we'll select warning,
18:26
and we get that really nice sort of
orange kind of like it's not ready yet.
18:31
Okay, so now we can open up
the alert component a bit more and
18:35
edit the title and the typography.
18:39
So, I'll change the title
to Feature Coming Soon.
18:42
And then the typography will change
to please email your manager to
18:49
submit a leave request.
18:54
Now, it's looking a little
bit close to the tab, so
18:57
let's give some margin somewhere.
19:00
Now, instead of us doing
that to the alert component,
19:03
let's do it to
the ContentContainer component.
19:06
As there is no margin or spacing here,
19:10
we are going to make our own using the SX.
19:14
So we'll do margins top,
we'll give it 50 pixels at the top,
19:19
and that separates it nicely.
19:23
Now, when we first load the app,
the tasks tab will be selected,
19:26
so we shouldn't be seeing this alert
which is for the request leave.
19:31
So, let's come over here to
the layer panel, right here.
19:35
And over here if we hover over the alert
component, we can see this little hide
19:39
icon, and we'll just click that, and
it will be hidden from the canvas.
19:44
So next up,
because we are working backwards,
19:50
let's work on this timesheet tab.
19:53
So for this we're going to be
using a MUI table component, so.
19:55
Jump over to the library and we'll look
for table and click on that to pop on in.
20:00
And then as always back in layers,
we will grab and
20:06
drag this into content container, okay?
20:11
Now the MUI table component is a fantastic
component cuz it's a ready made table.
20:16
It contains a ton of relevant
components that make up a table.
20:21
So let's explore,
let's open up everything that we can.
20:26
So table has a table head and table body.
20:30
And the table head has table row
which has a bunch of table cells.
20:33
And each table cell has
a typography component and
20:37
let's open up table body as well,
20:41
which also has table rows and
each row has table cells.
20:44
Okay, so what's great about the table
component that MUI gives us is that this
20:49
is already laid out for us and we don't
have to try and piece all of these
20:54
child components together just to
create a table that looks good.
20:58
So let's change these headers into
something that matches what a time
21:03
sheet would have.
21:07
So this first one will edit the children,
do date,
21:08
and then this next one
would be clock in time.
21:13
And we will do clock out time.
21:17
And then this one can be the hours,
21:22
and this would be such as.
21:26
Great, we've got our headers and
we can now tackle the body.
21:30
Now, there are two table rows here that's
been given to us, but we'll delete one of
21:34
them so that we can change one and
then sort of duplicate the other one.
21:38
And for this one, we'll use command
click to select the child directly.
21:42
And we can change the children here.
21:47
So for the first one,
we can have that date,
21:49
and we'll clock in at 09:00AM.
21:54
We can clock out at 05:00PM.
21:58
And the hours would be eight.
22:00
And let's say the status is accepted.
22:02
Okay, and
now let's duplicate this twice and
22:06
we'll just very quickly
change some aspects.
22:11
We'll change this to pending and
then for this last one,
22:17
we'll change it to rejected, why not?
22:21
[LAUGH] Great,
now we've got our time sheet view, and
22:24
since we won't be seeing
this component by default,
22:28
just like the alert,
we can hide it in the layers panel.
22:32
And in fact, we will make everything
a lot smaller and we will hide that.
22:36
Finally, let's tackle the tasks.
22:43
So for this,
we'll be using the MUI list component.
22:45
So we'll come over here to the library and
look for list and
22:49
we will use this one under data display
and there's one on our canvas and
22:54
oops, I accidentally clicked it twice.
22:59
And we'll drag this into content
container as we did before.
23:02
Now let's open this up and we can see
that just like the table component,
23:08
the list component comes
with a lot of child and
23:13
complementary components that
make up a list, a MUI list.
23:17
So if you're lost, be sure to
check out the MUI docs as always.
23:21
Now we don't need this list subheader,
so we can delete it.
23:25
And we'll also just work with one list
item like we did with the table row
23:29
earlier, and then we'll open everything so
that we can see.
23:34
[LAUGH] And
it looks like there's a lot nested.
23:38
Now, that we've got everything open,
23:42
we can see that everything's sort of
nested inside this list item button,
23:45
the first is the list item avatar,
which contains an avatar,
23:50
which contains an icon, and
then we've got the list item text.
23:54
Which if we click on it, has a primary
prop and a secondary prop, and
23:58
we can see these in action
on the canvas as well.
24:03
Now, since this is a task list, I think
a checkbox component will be perfect here.
24:07
So let's go to the library and
look for a checkbox and
24:13
we'll add one in and as you can see,
because I had this selected,
24:17
it actually added to the component.
24:22
And if we come here to the layers,
we can see that it has been added to the,
24:25
in fact it's been added
to the list item itself.
24:30
Now, we can actually rearrange
the layout of the list item.
24:34
So if you want the checkbox on the far
left, all you have to do is drag it above
24:38
the avatar and you can see that it appears
on the left, to the left of the avatar.
24:43
But I actually like
the checkbox on the right so
24:48
I will be undoing that and moving it back.
24:51
Okay, so now we can duplicate
the list item a few times.
24:55
Now i use command D to duplicate and
maybe something else on windows.
24:59
So now that we're here,
we can change these out a little bit so
25:07
that we've got three very
different list items.
25:10
So the first one we can say let's select,
25:13
the list item text, so
primary would be check
25:18
out the new portal, and the second one,
25:23
actually we'll remove secondary text,
nothing there,
25:28
and the second one we
can do replace toner.
25:35
And a secondary text could
be full print or two.
25:39
And then the last one let's say
25:44
remove spider in kitchen now.
25:48
[LAUGH] Okay.
25:53
And now let's play around
with some of these icons.
25:54
So the first one is pretty general,
let's do inbox.
25:58
H,i,j inbox.
26:02
Okay and the second one could be
something that's kind off important so
26:05
we can do flags, so
we will come here over to the f's and
26:12
do flag, if i can spell flag.
26:17
There we go.
26:20
And the last one is super urgent,
so let's do maybe an error.
26:21
So we'll come up here to e.
26:26
In fact, we can actually type this in,
can't we?
26:30
Error, there we go.
26:34
And the error icon.
26:35
Okay, so we've got our list set up.
26:37
And we won't hide it this time
because this is the default view when
26:40
the app is loaded.
26:45
Okay, now that we've got our
three tab sections done,
26:46
let's wire them up to the tabs themselves.
26:50
Now, since we're working with UXPin merge
and we have access to the React component,
26:53
props, we can actually make this happen
for real like it would in React.
26:59
So let's dive in.
27:03
So first, we'll select the task tab.
27:05
So I'll do that by going Command Click,
and
27:09
we'll scroll all the way to
the bottom here to click.
27:12
We'll add something here.
27:16
So we'll add an interaction for
the click trigger and for
27:17
this we want to make sure
that the tasks are showing.
27:22
So the list is showing but
the other two are not, so
27:26
we will make sure we show this clicks
right here and we've got the courses and
27:30
we'll come over here to list so
we're gonna show that.
27:36
And then we'll add that, and we'll add
a second interaction, so we're gonna hide.
27:40
I'm gonna click hide here, and we will
make sure that the table is hidden.
27:46
We'll do that, and
then one more time we will hide, and
27:51
with the crosshairs
we'll select the alert.
27:56
Okay, so that was four hour task tab.
28:00
And we'll now do the same thing for
the other two.
28:04
So I'll do this quickly for
the time sheet,
28:07
we will show the table and
we will hide the list.
28:13
And then one more, we will hide the alert.
28:19
Oops, we want to select the alert.
28:24
Okay, so we've got three click ones.
28:27
We've got show table,
hide list and hide alert.
28:30
And for the last tab, which is our request
leave, we are gonna add three again.
28:33
So when clicked, we're gonna show
the alert and we'll add another one.
28:37
We will hide the table and
28:43
then one more we will hide the list.
28:47
Okay, fantastic.
28:53
So now if we have a look at the prototype,
28:55
we can see that if each one
of these are clicked tasks,
28:59
time sheet request leave,
each one of them hide and
29:04
show the correct content
in our content container.
29:09
And there you have it.
29:14
We have designed and
created this entirely with MUI
29:15
components all within UXPin
thanks to UXPin merge.
29:20
Now all of these components, again,
29:25
all of these components
are actual React components and
29:27
they have state and they behave exactly
as they would in a React project.
29:31
Now in the next video,
we'll explore this spec mode up here and
29:36
see how we can grab the exact
code that we need from UXPin and
29:41
put it straight into a React project.
29:46
So I'll see you in the next video.
29:49
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