Transcripts
1. Introduction: Welcome to this figma
UI UX design course. My name is yes then
each row three and Albert instructor
in this course. In Figma course, you
are going to learn how to design a complete web app. You a UX UI design of a complete miss it clear
web app in this course, Let's have a look on that project that you are going
to design in this course. So this is the bank design of our web app that you are going
to decide in this course. You can see that we
have our nice sidebar. So you're going to
learn how to put up with different Kw graffiti. And then here we have
our nice section, and then after that we'll
have our magic items section. And now if I click
on this plus icon and then I will be able to
see this nice model box. And if I click outside, it is going to remove. And if we click on
the closed cycle, it is going to remove here. While you will design this
a web app, you or UX, you are also going to learn
how to work with retyping, how to do prototype. And it can add a different
kind of animation here. I tried my best to
explain each and every part of this app you will, you're going to learn
from this practice, this technique component, different kind of helping you organize your project
to do many more things. Therefore, I would highly advise you to enjoy this course.
2. Sidebar Design: Welcome to this video. In this part, we're going to start designing our
audio player app. So this is the basic app
that we are going to design. So first and foremost, I'm going to open our new
design file and Figma. So click on this
new design file. And I'm gonna make
it and willing to meet with audio
file audio player. You can give it any name. Alright, so now
first and foremost, we need to add a frame here. So I'm going to select this
frame and then this deck stop 1440 and then 24. I'm going to select this one. If you want. You can also change the
name, but it is okay. We're going to have only one. Let me change it. We can say this one. Alright, so in our design, we have the sidebar, we have this album list, and then we have this
list of music player. So fast, let me draw
this 1 first and then I can do it,
okay, one moment. So I'm going to take help
of this rectangle and I'm going to draw this design. It should be exactly this way. And here we go. So we have this design. And now we can add a
color for this one. So we have this
kind of color here. So let me change the color. And actually I can copy
the color from this file. Again, copy this color that
I have already created. So what can I do? I can open the previous
design that I already did. Anything. This one is here. Or if you want, you can choose any color, whatever you want. But I like that color. There's a reason that
I'm going to copy this color from my
previous design. And the color code
is going to be. So this is the color
code of this item. I'm going to copy this
color code and I'm gonna, I'm gonna make it
colored plate design. So what can I do? I can create, I can create
our color is tells here. So let's call it Sidebar Color. And then create a style. But we need to change this
color code to this color code. Now it looks exactly
the same that we have here on right now. And another color code that
I want to copy from here, which is going to be
this color course. I'm going to copy
this color code from here and I'm going to create another color and
style for this item, and then we will use it later. So I'm going to call
it, I'm going to say, Oh, music, play card and
create a style here. And then here, I'm going to change the color
to this color. But don't worry, we can, we can select this color here. But what happened here? This is our sidebar color. Okay, So we did
some mistake here, or we need to change it. So this site per color, and this is the music color. So for the music color, we are going to chance this one, which is going to be like this. And for the sidebar color, we have to change
it to this color, which is this color. I'm going to copy it.
And then from here, I'm going to change
it to this color. Now we can easily use it
either this one or this one. If I select this
item to this color, It's going to select this one, but it's going to
select this one, but we need in this item here. All right, so now we can
add this frame here. We can add this design here. We have this, we have this EMS and then list
of item for that. Fast, let me draw our circle. So we're going to take half
of this ellipse tool here. And then I'm going to draw
this ellipse tool and make it same hardened and white
so that it looks circle. And before that, let me
run it so that we can know how it looks
in real device. And it looks like this. I'm going to remove
this icon here. It looks like this. And I'm going to increase
the wild little bit more. And then here I'm going
to add it to center. And then what can I do? I can simply add
a stroke here and this talk is going to be three. And then I'm going to change the color of the
stroke to white color. And here we're going to
place our image here. So I'm going to click
on this place EMS. And then I'm going to select, and I'm going to
select this image. Here you go. So it is going to add
the MS. And then if I, now we have this one here. If I click on it. Okay, So for some
reason it didn't work. Okay, so furious our image. And now I should be able
to see this image here. Now we have our text here so we can say the name is
going to be Zhan do. And we're going to
place it in the center. And two chance style font size, I'm going to select it to 20. And if you want, then definitely you can
add different style. It is not going to
look good here. It can choose this or you can choose any other design,
whatever you like. I'm going to select. Maybe we can keep this one. And then after that, what we have, after that, we have these two items, music least our warm favorite
and then the lockout. So what I'm gonna
do, I'm gonna add a text here and I'm going to say music list. And for this 1 first I need
to change the text style. We're going to change
it to this one. You can choose any list and are any text style
that you like. That's not a problem,
so we can keep it, you can start it from here. And then after that, we're going to take
half of this plugin. So filter icon and
I have already installed this plug-in
called feeder icons. If you don't have this one, you can just install it
from the plugin community. And then I'm gonna say, I'm gonna take this icon here. So this one is now outside
of the main, main frame. So that's the reason that
I'm going to put it here. And now it is here. And I'm going to put
it exactly here. And now I can just change
the color to white. So what can I do now? And we just need to have this or don't,
do, don't do this one. We need this musical
list and this, this not this ellipse, we need this music list
and this one here. And then, okay, so
it is already there. So now what can we do? Basically, we can make a
groove for these two items. And another thing is that fast, let me make it group. I'm going to call it command Z. And obviously
growth, I'm going to rename the name of the group. I'm pressing Command
Control R and the keyboard. But you can also right-click
and you can rename it. And I'm going to
say sidebar item. And now we need to change style, font size of this one. We don't need to have
this bigger size of font. So what can I do? We can do here. Why
is it not showing? So we need to choose these two. And then instead of 16, instead of 20, I'm going
to select it to 16. Now, let's see how it looks. It looks nice, but
what can we do now? We can 60 is okay. It looks good. No issue. But I just wanted to know
that if it is the same size, okay, so it is in the same line. Cool. Now we can duplicate
our group. So what can I do? I'm going to press Command
D to make a duplicate. And I'm going to add
it here in this way. Then I'm going to press Command D. I think we have three items. One is L1, then favorite. Then I'm going to add the name
is going to be album here. Album. And then
what else we have? We have our favorite. And then what can I do here? I'm going to write fabric. So it is always a
good idea to make everything groups so that you
can duplicate same design. Now we can see that we
have some kind of design and exactly from the same
position it is coming. And yeah, but this thing
is now I think I need to adjust it because
it is not going to start from the center
because this field, but text is a bit longer. Now it is in the same position. All right, so now
in the bottom we have one more field called. We have one more field called. Okay, so another thing is
that I am going to adjust our frame because the height
of the frame is really big. So I'm going to add
just a little bit so that we have
this same design. Okay, So now in the bottom
we have one option called, we can also add just this one. With this one. Now we have
another option called lockout. So I'm gonna draw
a rectangle here. I'm going to draw
a rectangle here. And then what I'm gonna do, I'm gonna make a
stroke here and here. From here, you can define
from where you want a stroke. You want the stroke
from all the sides, or the top or the
bottom or the left. So currently our stroke
will be from all sides, but I want to have a
stroke only from the top. And there's a reason I'm
going to select this top. And I also want
this stroke style. Instead of solid, I'm
going to add it to dash. And then now what can we do? We can change this one. So how can I change this color? So we need the same
design, but we luckily, we already have our color that we created.
Our color is still. So this is the benefit
of using the color is telling you don't need to copy the color code again and again. You create your color is
tell them you just reuse it. Now, we have this colored stuff. Another thing that we need
to make changes here, we need to change our
stroke color to white. Now it looks good. Now here we can put our
icon and the logout button. So another thing that you remember here, we
have the sidebar, we have this one, and we
have discouraged so fast, let me change the
name of this one. We can say lockout guard. And here we are going
to add our icon. So I'm going to
select icon, logout. They might have one logout icon, which is going to be this icon. I'm going to first just to
put it inside the home. And then I am going
to take it to here. And we can change the height
and weight to 35 by 35, and then change the
color to white. Then we have already here. Let me check it, how it
looks. It looks nice. But we can also have
started from this position because our item is
from this position. So now it has the same position. And here we can add a text
and we can say logout. Logout. Now we have this item
and let me adjust this one. Or we can adjust it. We can address it in this way. So now we need to press, we need to make them a group. So our Rectangle Card, our lockout icon
and logout text. And I'm gonna make it group. I can say log out. Alright, so we have this design. So far we did a very good
design for our sidebar. And in the next part we'll started working for
the rest of the part. I'm going to stop this
video right here. See you in the next lecture. Bye bye.
3. Album List Design: Welcome to this lecture. In this part, we will start
designing our album list. So for that, first and foremost, I am going to create so we
have this list of item here. Okay, so fast, let me
add this grid system. So lay-out grid,
I'm going to add, so instead of this grid, I'm going to change it to six and then change our grid
to column R naught to six. So we need to have 1815. All you need to have three. We need to have
1515 will be good. So these are our grid system. And from here we can easily
identify from this part, we will start designing
our card or everything. So we are going to
start working from, either from here or from here. I think it'll look good. And
we will follow this one. And we're going to get, we're
going to have this space, or we can start from here, from this line and we're
going to keep this space. Okay, so fast we
have a text here. So I'm going to add a text here. I'm going to say
album list, vm list. So Adelman list is
going to be here. And I'm going to change the
text style, not in this one. Maybe we can give this
one or something bold. It has almost the same design. And not this one. I even don't
understand this text. It has this mathematical term. This is not a point. Maybe we can give
this one album list. And this alumnus to we're
going to take here. And after that we have
our rectangle card. So I'm going to draw the
card from here to this card. And we have little bit
of border radius here. So I'm gonna keep it five. And then we have
this discard now. So now I think it's
very big, bigger size. We're going to make it
a small little bit. And on top of this one, we need another card. So I'm gonna, what I'm gonna do, I'm gonna duplicate
this card here. And I'm going to make
it smaller size. Then I can add it with this one so that we
get exactly the same. Okay, so we have now discard. Let me add, let me change the background color for it
so that we can understand. So we have now another card, but it should be in
the same liberal now. Okay, So I, what I mean by that, we should have started
from this side. It is going to look like this. Now we have this one. Now we can increase the size of this one and it's going
to look like this. All right, so now
we have this card, we have this card. So fast. Let me change the background
color of this one. I'm going to change the
background color of this item is going to be white. Then we need to add
an effect here. Now, it's going to look great. So we have this card, we have this rectangle card
and this card is here. So after that, we
will have to right? I can change the color here, maybe this color and
I'm going to add a text here. It's
going to be r, l. Don't list. And we can say pop music. And I'm going to keep the same
font size that I am using. Both music. And here
we're going to have another text that I'm going to start from
here, from this line. And I'm going to say 20 songs. That I'm going to say 20 songs. So now it looks really nice. So what can, what
else we can do here? We can add the 01
more icon here, which is going to be music icon. So what I can, how
can I add this one? I'm going to open the
plug-in this feeder icons. And here I am going
to sars music, so I'm going to drag, I'm going to take this one here. And I'm going to drag it here. I'm going to hold it here. And now it looks really
nice we have this music. So what I'm gonna
do now I'm going to make group every
thing for this card. So make them in group
and rename the group is, and we can say it.
What can we say? We can say, we can
say album list, L bum, bum item
here. So l one item. Then we have discard, so now we can make
multiple cards. So I'm going to press Command D and we're going to
make it in this way. And I'm going to press
Control D to control the. So we will not need
this card here because we're going to
have add more card here, so I'm going to
remove this item. So another thing is that, so let's say I'm going
to add it in this way. Okay, so now how you
will organize this one. To organize this one, you can simply what I mean by organized, I mean that I'll like let's
say you have like you can see there's this Honda
has this and this has the same distance
from these items, but this one has a vigorous
and bigger distance. In that case, we can use this model shown here.
You can see tidy up. So what this tidy us, I'm going to do for us is
going to organize our cart. And it is going to give
us the same weight and height and the same space
from each and every card. You can see now we have this 19 and we have
this 19 from here. And then I'm going
to, for this card, I'm going to have to
do it in horizontally, like make it just a mole. Now, if I want, I can simply I can simply
make changes of this one. So again, I'm going
to select this one. And if I press this tidy up so we don't have any issue here. If it is visible, it means that your
data is already. It has same distance
you can see in 1990. And now, if I want to
change the distance, I can simply do it
and it is going to automatically adjust for me. Now, we have the same
distance, 111111111. So what I'm gonna do, I'm
gonna keep it this way. I'm going to give it 14. Now how it looks.
It looks like this. So I'm going to make a
duplicate of this item. We have this album. We have this album item. Now, I'm going to make it to
one more item and duplicate. So because we need
the same height. And I'm going to
keep it 14 by 14. And now we don't need
to have this text here. I'm going to remove this text. I'm going to remove this
text and this item. I'm sorry, I need to remove
this whole thing from here. And also this, also
this top card. So rather for this, for this rectangle, I'm going to remove this
one also from here. So now we have this
only one card, and I'm going to make
changes of this design. So we need have a
stroke for these items. So I'm going to
add a stroke here. And I need dashes, sorry, I need I need in dashes stroke. So I'm going to change the
stroke style solid to dash. That looks nice now. And now if I want, I can also change the dash to three so that I get more space. And inside this one, I'm going to press,
I'm going to, I'm going to design a plus
or I can simply press the Plus icon is
going to also work. But in that case, I will have to give a lot of font-style, maybe 96 to make it bigger. We can also do it in this way. So we have this plus icon here. It means that we can, okay, so we need to make
it in the center. I mean that we don't need
to have this radius. We can keep it in the center
so that it looks blast icon. So our album list is ready. So now what can I do? I can change the eye contains
the color of album item. We can select in this
color, not this color. You can just add some color
and based on your choice, I'm just selecting
some random color. And then from here, I can select this one. Okay, Alright, so it looks nice. So now what can I do? I can simply say rock music. Rock music. You can just add
some different kinds of music list or music name. It doesn't matter. We're
learning how can we design it, but text can be anything. So now another thing, I can change it to 60. For this one, I can
change it to 50, then I can change it to
70607050 or the right. Perfect. So we got this design and we can make it
more reasonable. I think we're done
for this album, this part here we need
to work one more thing. We need to add our model, their love for this
ad album list. So I'm going to stop this
video right here and we will continue with
the next lecture. See you in the next
lecture. Bye bye.
4. Modal Dialog Design And Overlay Prototyping: Welcome back once again. In this part, we're
going to design our model box for this one. So we'll design this
kind of model box for create album when user
click on this button. For that, first and foremost, we will need to create a frame. So I'm going to select a frame here and I'm going to just draw it here is instead of
just selecting from, we can just select in this form. This way, I'm going to
make it to ten to radius. And let's change the
name of this family can say album model. So we're going to have this one. Now. We can do this thing this way. So we can add this text here. I'm going to add create album. This is, this is just a
normal text that we can add. But if you want, you can change the epigraphy, the font style. But I'm going to keep
your sense of 16. I'm going to add it. 14, I guess. Okay, So let's put
it in the center. And now we need to design our input filter,
design input fill. I'm going to take half
of this rectangle and then we can design
it in this way. And let's change this to ten. Or if you want, we can
also give it to 20. And now I'm going to
add a stroke here, is stroke is going to be one. And for this fill color, I'm going to change it to white. Then what can we do? We can add a placeholder
text inside this one. We can say album name. It's kind of a placeholder
texts that we have here. And from there, what can I do? I can add one more button here, and I can add 20 here. And now let's make it same size. If you see this size
coming from this size, this icon, then it means
that it is in the same size. But still, we can add
layout, layout grid. So we can add column. Column is going to be five. Now we can easily understand if it is in
the same size of node. So if it is in this way, if you see this
sign is appearing, then it means that it is, it started in the same size. We can also change the height
of this one little bit. Alright, now, we
don't need to have this grid show anymore. So I'm going to do the bullet. And now I'm going to add
color of this group. So I'm going to in this
color or maybe this color. And then here we can
add a text here. So we can say Save. And we can put this name here. Okay, so now we won't be able to see it because we didn't
connect this one. And here I want to have one Close button so that
when the user click on it, we can disable our modal dialog. For that, again, we can simply
take help of this plug-in. I'm going to say
close icon here. I'm going to start. And they have this close icon. We can select this one. And we can put it here. But I would love to
increase the size on this one. Maybe this size. And then, okay, so fast we need to put it
inside this model. And then we can add
just a little bit here. I think we're going
to adjust it here. Cool, it looks really nice. But another thing is
that we need to change our placeholders day font
size because in the prison, the font size we
need a smaller size. We can select. Our 2416 is still bigger, so I'm gonna say 12. I think for this pattern
texts we can keep it to 20. Still, it looks really nice. So now it's time to add this
prototyping for this model. So how can you do it to do it? So fast, quick on the prototype. And when user click
on this button, we will show this modal dialog. So we have these interactions
now click on this one. Click here. Now onclick, there's
totally fine. So instead of navy get to, we are going to show open
up or open overly means. We're going to show the
modal dialog is kinda be pop-up modal
in the same pace. So if I click on it, then it's going to ask me
the destination where, what model I want to show our modern name is
create album model. Now it is connected
with this one. Now here we have
couple of options. What is it exactly? So. Do it before that, let's try what can we see here? So now we have this one
and we can see this model, but we can't see
modelled properly. But normally, when
we open a model, our background is kinda decibel. Okay? Another thing is that
if I click on this button, it is not going to disable. If I click on, it isn't
going and visible. But we should add this
functionality is how can we do it? So here we have an option which is called add a
background behind overlays. So this is what we need. Now, we can change it
dispersed sentence. Now, we should able to see little background color
that we normally have. But if you want, if
you need more color, you can change it to 50%. Now, we will be able to see
more gray background here. This is how this will
work, but he'd gone. So this is here we have, alright, so now we can do it. But now if I click outside, it is not going to
decibel, but normally it should disable when
I click outside. For that, there is another option called
close when cleaning out. So if I select this one
and then if I click on it, you just going to disable
is going to do double, is going to do double, but
our icon is not working. So for that, what
we will have to do. Now, click on this icon. Here. We need to click on the
interactions onclick. And here we have
clothes off and option. Now, we're not going anywhere. There's a reason that
we don't need to select navigate to
or open overlay. Rather, we will have
to select gloss over. It means that we want to
close our modal dialog. So now we can see close overlay. We have this one here. So now if I click on it,
it's going to close. If I click on, it
is going to close. If I click on it, it
is going to close. Okay, So now another thing, we have any mention
option also here. So here we have the
animation option, how you want to show it
instant, dissolve or moving. So if I select on the morphine, and then here we
have these options. Are, we can select this one from tough if you want to do it. And we can also
change the height to 600 MS. Now let's
see how it looks. I can see our modal box
is coming from the tough. It's going on the tough. So instead of easy in and out, we can just make it we
can just make it is in. Now. I think we will not be
able to see this thing. Okay, so I'll move
in an ease in. And here we have this
one is in 600 meters. If you want to do it
from the left side, you can select left side, then it's going to
come from left side. You can see a modal
voice is coming from left side and it is
going to left side. These are the options that
we have in our Figma. If you want them from bottom
and then you can do it. It is going to come from bottom and our background is disable. This is the beauty of
figma prototyping, so I really liked it. So I'm going to select
this top instead of 34, and then I'm going
to select it to 300. And let's see how it looks. It looks really nice. And if I click on it,
it's going to go. Alright, so we have implemented our prototyping
open overly system. And I will stop this
video right here. We will continue from
the next lecture.
5. Music Player and List Design: Welcome to this lecture. In this part, we will try to design our rest of the parts. Now we need to design
our music cart, alright, so we know what previous
part so far we have completed this model box
and it looks really nice. We did a very good design. And now we will try
to add this part. Alright, so for that,
what can we do? Basically now let's move
on to the design part. So now we are going to
design our cart fast. So we'll have to design our
card from here we will study. So I'm going to take help
of this rectangle tool. And from here, I'm going to take this design till this card. And it should look like this. And I'm going to
add this to ten. Let's see how it
looks this card. So it has this design and
it has this gray color. That's not an issue. So we have this
card design and in the same size and the same
distance, we have it. So I just wanted to know
that if we have added it, okay, so we have this one in
the same height and weight. Now, we need to design
our so we can make, we can change the name
of this rectangle. We can rename it and we
can say that music card. Now, we have to add our icon. So for that, I'm going to add this plugin and then
this filler icons. From here, I can say music. Then I should be able
to see all the icon. So we have this tool icon and then in the middle
we have this 1. First, I'm going to
take this one here. And then I'm gonna take
it inside the home. And then we need to change the height
and white on this one, maybe 35 by 35. Now I can, I can drag this one. I can drag this onto here. And then I'm going to
select this one icon. And again, we need to
put it inside this home. And we can also, then we can put it in
the center of this one. After that, we need to, we can take this one or we
can also rotate this one. But it's better to take this one because you already have
this icon in the plug-in. So if you were designing
any kind of web, tried to use different
kind of plugging, it makes your work rarely easy. You don't need to
design these kind of icon again and again. So you just need to
use this one so we can design your I'll work very fast. So this way you can also understand that if you have
exactly same height and wide. Cool, So it looks like this. So first thing first, I'm gonna, so what can I do now? We can select these three icon and then we can play this tidy up so that we can make
sure that we have exactly same wire between
these three icons. You can see that it adjusted. Now here we can also see that
it has the same height and wide and exactly the same space between both sides
from these two. So I'm not gonna make
any changes here simply I'm going to
make them a group. And then I'm gonna
say music icon here. Cool. Now we have our duration, album name and this one icon. So for that, I'm going to
take help of this d tool. Then I'm going to put the text. So we have this, we have this. We have this bigger font size. Now. So let me first gens it. First. I need to change the
font size of this one to 20, I guess. And then we can adjust it here. And I can simply
say, Steve, 0.56. And it should start from here. It looks nice, but let me try if we can
fix few things here, it should start from the size so that it
is in the center. No, it is not in
the center because we have this icon is
bigger than this one, so we should keep it
from the bottom line. From this line. I mean, from this line. Now it looks good, but it's still, it is not
going to look good here. Now it is in the center. So we have these duress
shown here and we can make, we can change the
color of the duration. Maybe we can choose this
color and we'll fix it later. But before that, let me try
to add one more text here, so I'm going to
duplicate this text. I'm sorry, it didn't work. So I'm going to press Command D. So I just need to select this
T and then duplicate it. And now I'm gonna put it
exactly in the same distance. Maybe here, I can put it. And here I'm going to say
the name of the music. We can say. We're going to say rock
music, how it looks. So it looks like this, but we will have to
change the font size. We don't need to have $0.21. We need to have 15 font size. Now we have this design. Okay, cool. So we have this
flip in font size. Now. I think we can
change it to 14. And then we can keep it in this way so
that it is in the center. It is in the center. And one more thing
that we can do here, we can add our icon here, which is going to
be this music icon. I'm going to check this 1. First. Let's put it in the home
and then drag it here. And we can, we have this 190 to 192 or we can simply r, we can make it tidy up so
that we get same distance. And what is this one? This music icon, this music
acorn inside the music icon. And then this rock music
than the duration. And now we can do tidy up. Now we have the same distance. Goal, we have the
same distance now. And now I'm going to change
the color of this item. So to change the
color of the text. We can make it in this way. And for this one we
can keep this icon. But another thing that
we can do is here. So now we have this option. So now we have our music. So to change this color
of this music card, or we can try to add a
little bit of this color. And let's see how it looks. It looks like this, but still we can apply our
linear gradient system. So now it looks this,
it doesn't look good. We can keep it in this way. I'm just trying to add different kind of
background color. And how can you
explore this one? So if you need, if you want
to add linear gradient, then you can do it in this way. Okay? So we can use this
one in this way. But if we add this
little bit of dark, then it's going to
look like this. And this is going to
be these as well. Right? So we have
this option here. It looks rather nice. We can keep this color. So now we can make all
this item in a group. So everything is in groups. I'm going to make it a group. I can say music item. Now, I can simply let me check if we really
selected this color. So what we had in this one, in this one we had this color. But now I added these color. I think it looks really nice. We can keep this color, but one thing that
I can change here, I can change the
color of this one. Instead of this color. Maybe this black color would
look really nice here. Okay, so now we have
this music item. And now I'm going to
make a duplicate. And then I'm going to put
it here in this distance. Let's see how it looks. It looks nice. Now I can do
duplicate, duplicate, and multiple times I can
try to add this one. So we have this list
of music now and here, and the last icon for this one, as I already selected
from this color style, I'm going to keep it this. And what happened here, why we lost all this item. And we have this one here. Okay, so I did a mistake here because we only need to select this one
instead of this color. So I'm going to
press Command J it. Okay, so what I did
basically I selected this background color for
the integral part rather, I just need to select this card. And then from here, from this color is still, I'm going to select this one. Now it's still, we are
able to see our design. So I really like this one. It is Okay, One
thing that I can do, I can change this black
color here to white color. And it looks nice. I can also change this color to white color for this
item, this one. And we can also
change this music. You can select this
group and change this color to white
for this one, and also this icon
to white color. And another thing
that now we need to do is that we need
to change this one. So one thing that I
need to do it here, let me I'm petrified by 35. I'm going to remove
this one from here, and I'm going to this one here. Alright? So I'm gonna say, I'm gonna add a different
icon for this music player. I'm gonna say this item here. And I'm going to say that
you've hired on by the D5. And then just drag it here. So now we have this design. So it seems that we have successfully
completed our design. And if I click on it, we can see our
create album here. Another thing is that
from here you can share your project to use
them to the developer. And if you click on the inspect, then developers will be
able to see hide in a wide for the card and everything
here is going to change. You can see the wind
and hide on this guy. 1031031. Hi, D6 is five, height is six is five. And everything you can
share with the team. And now let's
export this design. To export this design,
what can we do? Now we don't need to have
this grid option anymore. I'm going to remove this one. Let's export this design. So what can I do? I can click on export and
then select PNG JPEG. And then I can say export home, it is going to export. And if I click on it, we should be able to see our new nice design
that we just did. Alright, I will
upload this design. I will share this design. Now. If I want to export this one, just select this one. And then also click on the
JPEG and export create album. And we have this design. And to share the project. You always have this
sheriff shown with a team. You can just pull
the name and you can just send or you can
just copy the link. Alright, we have finished
this nice design. I'm going to stop this
video right here. Bye bye.
Yazdani Chowdhury, UI/UX Expert, Mobile & Web App Developer
