Transcripts
1. Intro Video: Hi, welcome to mobile
soft UI design or new morphism in Adobe XD. My name is solely on earth and you and I are going to create this beautiful smart
home application from scratch in Adobe XD with
this kind of sound. In this course, you will
learn how to create the different soft UI for light mode applications
with all kinds of shadows, tips, and tricks for the best soft UI
design for dark mode. Can you believe that
with the help of just these small shapes, we are going to create
the entire application. Start by designing
the sign in page. Then we learn the best way
of animating your design. You go for designing
the homepage. And I start animating the icons. You will learn how to create
components for animation, how to add sound effects, and a lot of cool
tips and tricks. Finally, we start designing
our washing machine page, creating water and bubbles
for believable animation. Adding timer, final prototyping, and adding the sign in and
sign up buttons at the end. Even if you're a total beginner, you can still follow along. Because b, start from
the basic to make sure really understand
the design and process. I have also provided a
project for you guys. So make sure you finish your project and sent back
to me for more feedback. By the way, if you have no
idea where to start or what is the path to become a professional user
experience designer, watch my testing hours using
the first design cases, the D for beginners. I am so excited to show
you guys how to create this beautiful a smartphone
application design and Porter's Diamond animation from scratch or write
us, get us started.
2. What is Soft UI or Neumorphism in Adobe XD Design: So what is soft you
are or new morphism. So basically is
using highlights and shadows or light shadows and dark shadows
on the other side. This is dark inner shadow, bright or white inner shadow. So this is basically two
layers on top of each other. So the cool thing about
it is when we create these to the inner shadow
and the top shadow, we can use just these two to create the whole
application and website. How I'm just going to show you.
3. How to design soft Ui in bright backgroung in adobe xd: Now let's go to Adobe XD. Go to file, create
a new file and save it as soft UI or new morphism. What we do here, Let's go to the Artboard and click
something like 3752812. This is basically it's good for iPhone and Android
at the same time. This click on the arrow key, just going to call
this software I write is going to
be soft UI dark. So, so basically this
is how it works. Select Artboard, go to fill and just drag this
to the right of it. It doesn't matter
what color is that. Just the background should
be light of any colors. The brightest color of blue or purple or whatever you want. So I'm just going to
pick something like this or I have it here, I'm just going
to get it done this. So it doesn't matter
either in F5, it doesn't really matter. It should be a bright color
of something, not just white. It shouldn't be this way.
It should be just bright. That is good, too
soft, you are dark. Click on it and I'm just
going to get a gun. This look, it's not here. It's here, right? So it's a bit brighter because when we add some
dark shadow to it, something like this,
it should be obvious. So I'm just going
to click on this. This is 292837. It doesn't really matter. You can do whatever
you wanted to. Bring it here, here along as you are happy or you can
change it to editing we want. So I'm just going to
keep it this so you have to color bright and dark. Let's start with bright. Let's go to the rectangle. Hold down Shift
and drag a square. There's put it on 60. 60, right? We don't need to
have Bohr there. Now, let's put the radius on 10, for example, we can
change it anytime. Now, click on either upper
four field and click here. It means we do not see anything. Right? Now. This is how it works. Let's go to Drop Shadow, click and drop shadow. Make sure this is on 10. We have a blurriness. We need the blurriness. Put it, um, six
and put it on six. This is how we start
all the time, right? So this is going to
be the dark shadow. Now let's call
this black shadow. Press Command or Control
D to duplicate it, this call this white shadow. How will we can make it white? Just take a look.
Let's come here. Go to drop shadow. Make
this totally white. So you totally white. You don't see it right now, because x and y, it's on here. Put this on minus 6,
totally the opposite. And here minus six. And here we go. See, you don't see it much because when you click on this, we go to drop shadow. We have the drag this thing
up the brightness book. Now, take a look. This is called soft UI. Now, click on the white, the top one, this
could disrupt shadow. You can bring this down. Write something like 50. Again. I'm going back and forth to see what I can do with this one. I don't like to be black. Click on the black shadow. Click on here, pick up the
color next to it, right? Now, drag it down,
just take a look. Or to the right a bit. We picking up the color, a darker color of
the same color, see something like this. So this is soft UI, something that is very pleasing
to die. Now, take a look. I'm going to select this
critical component, so we call this
bright shadow square. Now, I'm holding down Alt and
Shift and drag this down. I'm just going to call
this instead of a square, circle. Now take a look. Hold on Control or
Command and click on the tab on the white
window in a circle. Now, click on this little
corner, drag this down. Click on the black
shadow, the same thing. Drag this to the inside. Now we have this
beautiful circle and q, the cool thing about it. Why we did this a
component, again, if I hold down control
and click on this and change this color
to something else. Everything else,
everything we are working on the project
is going to change. At the same time. We're just going
to use basically all of these in
the whole project. We cannot come back and
change this one by one. It takes lot of time and
it's very time-consuming. So this is basically
the best way of creating your application. Now press Command,
Control Z to go back. So this is called pop or out, or just the shadow. And the highlight, we have
something else called. Inner shadow. How we can create
that is very simple. Now hold on Command or
Control and click on one of these plus
command or control C. Now come out Command or Control V. So it's going to
just put it at the top, drag it to the right, and turn off the drop shadow. We don't need anything,
just the field. So the field is the same color. We have something
called inner shadow. Just click on it,
make it active. So by default, you
see what happened. Just make this x
value number three. So three value and a y value are always the same and
just keep it on six, we can always change it. Click on inner shadow
and kindness up. So right now I put
it on 50 percent. Select this one, press Command or Control
D to duplicate it. It's going to call this
dark inner shadow. And this is going to
be white in a shallow. So the top one is the white one, but it should be opposite. What I mean is this one
should be minus three, minus three, and the
color should be white. And the thing is, if you put the fill on, we don't see the background. So check this off because we
want to see the background. So the top one day
wide inner shadow only have inner shadow. So it doesn't have the field or the border. That's the trick. Now, select this press Command or Control K to
make it a component, or click on this plus sign. Now, if I click on this, go to dark inner shadow, I can play around
with this capacity. Can make it lighter. Something like this. Look. Or I can use the same color
shadow like this one. If I go to the shadow and I can just pick the same
color from here and look. And that's it. Now, select this one. I'm just going to copy it from
this bright shadow, right? Inner Shadow square. Scroll down Alt and
Shift drag this down, Control or Command
click, drag this down. Outside Command
or Control click, bring this down and
this is what we have. I'm just going to
call this circle. We have two other column style that I'm just going to show you. Select this one or not, Alt and Shift and drag it down. Right-click on it. And I'll put the component now, press Command or
Control G to group. It is called this. And it's going to
copy it is this one. Copy, paste. It's kind of bold,
inner shadow square. Let's go inside this folder. Click on the dark
inner shadow press Command or Control
D to duplicate it. I'm just going to drag this down and just going to call
this BG. That's it. Now, with your down arrow
key press once, two. And let's see what happened.
Something is popping out. Click on this field
color and measured. This is a bit darker. And that's it. And now take a look at it. We create a more dimension
and feel to it with this one. Just gonna put this next to this one and
just take a look. This is something, I'm
missing something else. So let's delete this one. Select this one, press
Command or Control K to make it a component. And I'm often shift,
drag this down. The same thing at lives. Control or Command click, select this one, the same thing, select this one the same
thing, and that's it. So can you imagine just
be using this kind of shapes we create the whole
application. Is it possible? Yes, it is. Less concrete. One.
4. How to Design Soft Ui in Dark mode backgroung in Adobe XD: Now let's go for the soft you, I did dark version. So basically, most of the people like the dark
vision of the soft you are, why you're gonna see in a few minutes the acidic
one of these and hold on, Alt and Shift and drag
one of these here. See, it doesn't work
on a dark red, right? But we're just going to fix it. We're just going to make it
perfect. This is bright. I'm just going to call
this dark scope and Arab. Let's go to black shadow. Just going to stay black shadow, just click on the field, the eyedropper, and click on it. You don't see it because the top one is the wide, the same thing. Click on it. So these two defile is the
same color as the background. Let's go back to black shadow. Let's go to drop shadow. And let's try to make it
a very dark like this. Let's go to white shadow. And this one, we bring
down the opacity a bit. And that's it. If this is really dark, go to black shadow, drop shadow. Bring down the opacity
to make it more natural. Something like this. If you feel you can
play around with this. What I mean is critical,
a black shadow. Click on the drop shadow, and this can be maybe 15. In turn. This can be 15 inter, and it can be tested or 20. Let's go back a bit it down
arrow key, make it 10. We can play around with these. So just make your component
and play around with this. You can change anything. When you're done,
right-click and ungroup it and make it a component again because
with the black region, when it first main components. Take a look at this
one. This look at this green square
is totally green. If I click on this one,
there's a dot inside degree. It means we have changed this. So this is our main
and master components. If you want to change something,
we have to change this. If I want to change the color of everything, you
have the changes. If you are here and we click
on Edit main component, we come back on this one. The same thing
applies to this one. I'm just going to
select this or I make this a main component. C is totally green. Click on this. Let's go back. Let's make this six. Let's click on the black
shadow and make it six. This is three, this is three. Look. But for now I'm just
going to click on this, make this 10, just play out. Minus 10. Minus 10. Do the same thing
with the black one, 10, 10 and 10. So it's more pop. It's more pop to it. If I click on this, white
is really popping out. We can change this one, make it minus six, minus six. Right? Now you get the idea. We also can change the wide
to any color that you like. For example, this is going
to be a bit brighter. Maybe I'm just going to
play around with this. Maybe I'll ask
something pinkish. You can add some
pinkish to this color. One, I'm just going
to keep it white. Bring down the
opacity just a bit, just a nudge to show is white. And even with this black shadow, we can bring down the opacity. And this is where you have. Now, let's silicon
this than authorship. Drag this down, click,
make this circle. Gleick. Make this a circle. I'm just going to call
this dark shadow a square. And this one dark shadow silver. Now let's go for the initial
I click on this, Copy. This come out command
or control V is here. Drag it to the
right. It should be. Lack inner shadow. We don't need the drop shadow, so the color is the same, totally the same as
activate the inner shadow. And let's make this 336
and bring up the opacity. So if you have
something like this, I want to make this a bit privileged guys,
something like this. I'm just going to
play around with it. See, each one is a bit nicer for me because it's going to
be the dark version of it. So the dark version of it, but a bit of
purplish feel to it. The same thing. Press Command or Control D to duplicate it. This is going to be the
white inner shadow. So this should be minus
three, minus three. And the inner shadow
should be white. And bring down the opacity. Now, we can also change this color to be the
purplish as well. Take a look. Because the fees active, we cannot see the background. Turn that off. Now we can see that. Let's click on the black arrow. The inner shadow black
should be totally black. Drag it down or
bracket is corner. Look how cool and beautiful is that you can
play around with this color, the white inner shadow. I mean, it shouldn't
be that purpose. I told you it's totally
up to you guys. I'm just going to
drag this down. And let's go back to the white. Something like this is more natural for them to
start silicone it. Command or Control K, make it a component, because it's green. It means this is the
master component. Hold on Alt and Shift,
drag this down, the same thing,
Command or Control, click, make a circle. Command control take, make
a circle, and that's it. So select this one. Let's call this
dark inner square. The same thing. It's good here. We're just going to call
this dark inner circle. Select this one, hold
on Alt and Shift drag this down. Control click. Let's go to the black inner
shadow Command or Control D. Drag this down,
Let's call this BG. And the down arrow key just one to two to feel and make
this a bit darker. That's all we did selected for the Alt and Shift drag this
down again before that, because we're gonna
use this one, we have to make this
as a master component. So right-click Ungroup component and again click on
this plus sign. So this is going to
be his own master. Now, alt Shift, drag this down, Control or Command
click, make this circle. So we have three of them mature, click on Apigee as well. And that's it. So can you imagine we just
use these type of blocks? We can create the whole
application or the website. You don't believe me,
I'm just gonna show you.
5. Sign in Soft ui Design app and Prototyping Animation: All right, let us
start create this sign in page for our application. Click on this one, press Command or Control
D to duplicate it. I'm just going to
remove everything. And this bigger color, something different
than this one. For example, our client is telling us to create
something like this color. So what I mean is if I
click one of these and hold Alt and drag it here,
you see different. So what we do here is something
very interesting guys, because see, here you see the
inside the square is white. So it means if I
right-click and edit, the main component is
going to come back here. What I'm just gonna do
it, this soft UI dark. So first, I'm just going
to make a copy of these. So this one is the this domain. So make sure you click
on the software. I dark the artboard and make sure disease is the
same as this color. Now, click on this double-click. Let's go to the
black inner shadow and pick up the eyedropper tool. And this is what you do. And that's it. So anytime you
wanted to change it, just right-click and
edit main component. Change this one,
whatever you do to this, just going to affect
the whole application. That's all we do
all the time now, because this is the application I'm just going to get a con is press Command Control
V or the have this. And I'm just gonna put it here. I'm just going to drag a box. Something like 25 or
30 would be fine. We're just gonna
use telephone wire. So I'm not going
to go above here, is going to tie up, welcome. I'm using the font
Poppins medium. Let's put it in the middle. They feel it's the same as this color in the
background color. Now, the same thing. I'm just going to
select this one. And I'm going to Alt
and drag it to this. So I have to edit this to
make it totally natural with this double-click go inside
selective feel and that's it. All right, cool. This is changing as well. I'm just going to
put this aside, put it here, or
I'm just going to delete it because we
already have this one here. So we'll start with this one. I'm just going to drag
it and drop it here. Total make a box,
something like this. Hold on, click and
make the round corner. Let's go back to
layer so you guys can see to celebrate corner
and drag it to the inside. And that's it. Now along, shift them, play around with it. When you make it
bigger or larger. And your colon control
and click, you see, you have to do this
again and again. So tried to figure size first, then change this one. So the width, maybe 200 to hide. For a 120. The same thing with two hundred
three hundred and twenty. See, same thing. Drag it and bring it inside. Why 21, the same thing. Drag it to the inside. And this is 1.5. Now again, hold down
Control or Command and click on the top
layer, the y channel. We need to change this
color to something, a bit bluish,
something around here. So I'm just going to
drag this and put it to the right until I get
something that I like. To take a look, select
this one, and play it. It's going to be something
like these guys, beautiful. So this is going to be
our background guys. Let's call this BG shadow loop. This one dark shadow. Right? That's it. I'm just
gonna put it on the top. So it's very organized. Now not Controller
Command and click, make sure the white
shadow is selected. Press Command or Control
D to duplicate it. And call this blue
and G4 gradient. To feel mixture,
click on Solid Color, put it on the linear gradients. The top one and the bottom one. Select the bottom one
and make sure this is something like lowish,
something like this. Right? Now, select the top one, you can select it from here. The same thing. I'm just gonna make this a
bit brighter, even brighter. Select this one and so
we play around with it. The bottom one should be a bit darker and the top one
should be a bit brighter. Again, select the white shadow and when you are in the blue, make sure the drop
shadow is and 0, make sure the inner
shadow is activated. Then you activate this, but it's entry in turn. Go inside and make
this very sharp, something that everyone
can see that look. It should be something
like disguise. Now, selected Command
or Control D again. And I'm just going to call
this a fingerprint. Hold down, shift,
drag this down. See what's going to happen.
Now this time, let's go back. Solid color. Pick the same color as the
background color, right? Select the yen and drag it up. It should be
something like this. Now, we already have one of these old and drag
it, put it here. If you see this blue line
at the core is picking out, just select this,
double-click on it. Click on this point
with a left arrow key. Just click ones left
arrow key inside. Click on this right arrow key, and this one should
be top arrow key. So basically we don't see
those blue lines around it. And that's it. When you click on this, and you see this one and click on the linear gradient again, you see these handles,
drag this up. So for Lamb shift,
drag is a combination of blue and the cyan at the top. So this is works perfectly
for our design. I love it. So we already have this one. I want to make
this a bit darker. So let's go to the field
and drag this a bit down. Maybe less, something like this, something a bit more. Pop this God, you're plugging. Make sure you install this
icon for design plug-in. It's fairly simple. You have to go to plug-in, click on the plus sign. And here just type icon for design and then
click on install, something like this good, or at least on this for free. Then when you have it,
click on Python for design. And I'm just going to
call this fingerprints. Now click on it, just
going to drag it down. And that's it. I'm just going to
make it white or something not
totally wired here. Here. So it's kinda obvious
what you have to do. See how beautiful
is that, right? Let's go back and select Control and Alt and Shift
drag this down. I'm just going to type
here fingerprints. And let's put it on light. Put it in the center. Make sure this is in the center as well. This one and this one
in a center as well. Maybe drag this up a bit. Nice. I want Paul Lam Control
and click on this. Go back to the late
years, the white shadow. Let's change the white shadow to something a bit
more bluish days. Because everything is
looked like a blue. So it makes sense. Miser, it's very subtle, but it works fine
with this design. So welcome. Fingerprints. If
you click on this, it should be a lock here. And I'm going to click on this. It should unlock. All right, let's
go back to icon. I'm just going to
call this lock into. So let's break these unlock, bring it down, make
it a bit smaller. Just leave it here. I know guys, this is unlock. So this should be lock first soon because we
need to unlock first. Y. I'm just going to show you why. Now, cool. So inside, select this, make this totally white
to the bright white. Click here, and
call this a lock. Now let's call this sign-in and Alt and Shift and drag it to the
right for the animation. For our animation,
this is going to be open and by default, it's going to double-click here. I'm just going to
click on this or lunch shift and this one, and this one, and along your arrow key and
drag this down. And that's it. You want
to see your animation. Let me show you. Click on prototype. Key date, for example, if I put it here, the tab on here,
just take a look at this luck, See what happen. If I put it on 1 second, the type should be auto animate, nothing, just for none. And let's see what happened. Command or Control Enter. And if I click on this URL, been sick, very naturally
just going to open. All right, let's
delete this one. Let's go back to Design. So our tried to just figure it out What's
going to happen. So if I click on this, what's going to
happen to this one? I'm just going to select
this, the design, and I'm just going to pick
a color, maybe this color. And I'm just going to add
this color to my swatches. So over a habit, nice. If we click is going to be blue, it means is okay. And What's going to happen? Knapsack outside and down
control and click on this letter inside and
track this down a bit. If you click on the fingerprint, which is something here
at the top, it's a lock. So we should the fingerprint, the opacity is 0. The log version, the opacity is a 100 percent and
try to bring it up. And also it should be unlocked. The same thing here. If I click on this, Let's bring the
opacity up for now. Unlocked. Bring the center. The opacity is 0. Again, click on this, trying to make it
circle as possible. So I'm just going to make
the height to a 100 as well. Let's see. If this is something like
this is happening, guys. Try to keep it as
simple as possible. So I'm just going to try to
make it something like this. It's like a circle. If it doesn't, it means you have to select
this one and this one, and this one and this one. And track them up to make them exactly in the
center at the same time. Because in animation,
near net moving. Awesome. So let's animate this. Going to click. If I click on this, it's going to be this one tab, none, duration 1 second. Select this plate
for collicullus. So there's playback, this one. Let's go back. Quite cool. Now it's time to
use the easy one. Select this one. And if it is selected, instead of none, we should
put an easy ease out. The same thing applies
to this one is ease out. And now see how smart
is going to happen. Beautiful. As a fingerprint. Unlock, unlocked. Look, everything
is very natural. Now let's make it
more interesting. Again, take a look
at this fingerprint. Let's see what happens. It's like it's fading out here and something else is going to. Luck. Alright, let's try
to make this more natural. If I click this fingerprint
is here, right? Let's make it upper bits. I'm just going to drag this
up and just put it here. Now, take the opacity down
and let's see what happened. Just an experiment plate. This is like a fingerprint, is converting to
unlock the same time. Look exactly like
morphing animation. All right, cool. Now we are done with this part.
6. Home Page Soft ui design Dark mode: Alright, let's go
for the main page. Just control. Click on this one. Press Command or Control D. Miss going to call this
home and delete everything. Just gonna pick one
of these Hold on, Hold and drag it here. So this is dark shadow, a square hold down shift
and make it a bit larger. Maybe it, maybe I wanna make it. Let's lock this. So when
we change the width, the height is changing as well. You put it on AD. Now, what about the
light of this shadow? If I click on the white shadow, maybe we can play around
with it and we can make it a bit bluish. Right? Is settled, but I
feel it's fine. Right? That's why I'm just going
back and forth summing far form it to see if it's real, then I'm just going to
play C if it's fine. All right, Cool. What is I'm just
going to put it in, so I'm just going to copy. I'm just going to come in.
So I'm just going to paste this and put it here. Make sure this is medium, should be semi bold. I'm just going to
call this bedroom. This is going to be light
floor bedroom. One. Drag this down a bit. And maybe also at this one. This good to plugging
loop for light. The light bulb here. This one is fine. I'm just going to drag it
and put it here. Make it a bit smaller. I could, let's go back to layer. I'm just going to call
this lamp and make sure had an inner shadow to tell you white this up and do
not have to feel. So no need to have a feel. Just the inner shadow. Play around with this
until you get something. I wanted something
gradually like gradient or from
bottom to the top. It's like a blend in, something to blend in actually. So I'm just going to save this, maybe put it on 60. This thing applies to do s1 or is yours is just
delete this one, select this hold Shift, drag this down, make it one. Put it here. The same thing with this one. But for this one
I'm just going to make this these colors. So beat up. These three are selected and
make them center of this, if I can, yes. Just played, see
if it's readable. Bit drum. Why it's not? Because it's a 9. It should be 14. Yes. For something like this
that you just want to see it very quickly and
you want to change. Delight. You have to see it Very Large. Go up, up. Let's just play. Select three of them and
align them in the center. But the problem is these two should be close
to each other. And I'm just going to group them and shift select this one. And now I'm just
going to drag this up. This is much better. So bedroom one, select this, select disability and
putting the center. And that's it guys. I'm just going to
come back here, select this one and delete it, this one and delete it. So this one Right-click, ungroup it first, double-click, and just a laundry. This one. Delete this one.
Right-click, ungroup it. And I'm just going to
call this kitchen. Putting this center,
select this one as well, and put it in the center. So this is basically
what we have here. Select all of these,
drag them down. See the gap between these two? Let me see. It's 26. So the gap between these
three should be 26. I'm using my down arrow
key to be 26, 27, 26. The same thing applies here. Drag this down. And I believe it's fine. This one should be eating. Control-click, this
one should be audio. And make sure it's
in the center. See how cool is that bigger? This is soft, you are, everything should
blends in easily. Is that our kitchen? I'm just going to put this hall. Make sure the species
capital. Here we go. And this one, because
is smart home, it should be curtain. Cool. Let's see if this one
is in the center. This center. Beautiful swan. Cool. So make sure everything
is in the center first because when we animate this, it's going to read it. Hard to fix them. So one click, one-click. Make sure everything
is in the center. I'm sure the laundries
in their centers. We will wasn't center. Awesome. So everything
is in the center. Let me just check this one. This one. This one. Go. Now I can say everything
is in the center. Now, I'm just going
to click on this one. Copy. Come here, come here
and paste it here. So we need the same thing
here with the inner shadow, press Command or Control D. No need to have a feel. This one should be minus three. Minus three. And this is, should be white. So bring down the opacity. Something like this. So this is not fingerprinting anymore is controller white? Control their lack. So white shadow, black shadow. But this black shadow should be more blurry. How do we do it? Let's put this on Twitter.
Also. The same thing, but white is put it on 20. Perfect. So now you see that based
on whatever we have here, just these tools, these
object that we created. We are creating the
whole application. Just going to copy this one. Copy, come here, paste it. This could it here as well. So let's select this. I believe something
is not Cambridge, just white shadow, just diluted. Select it, copy it, come here, paste it. I just double-click on that. So that's why I just gave
me the inside of it. What about this white? You like it because these
shadow has a Bluetooth. Should we change
this one? Let's try. Let's see. Click on Control and white. Go to inner shadow, click on this white area. Let's play around with it. Many setup. See that, nice. Let's see the whole
homepage. I love it. I think it's perfect. All right, before we
create these arrows, Let's select and bring
down everything a bit, and bring down this one as well. Something around here At a time when you do
something to go back. Home title. And it will also need a
toggle for a switching between dark and
white of this design. So don't worry guys,
have everything here. So before we bring this over, I'm just going to
sit at one of these. Click. Let's go to
black inner shadow. Click on this Eyedropper
and change the color. That's all. So I need just this one for now. We're just going to copy it. I'm just going to bring it here and I'm just going to paste it. It's going to be
something that we have. Let me just check. Tech. Cool. I love it. Yes, need the arrow icon. Let's see if we
can get this one. Perfect. Alt Shift. A go. Nice. So I can go back from here
and see how looks floating. I mean, something
It's very interesting about feel like
floating as well. It's feel like it's
going inside is crazy. I love it. So what
else do we need? Weight also,
something like this. It's going to copy this down
Alt and drag it and drop it. Here. Let's see the size of this. Drag this up. Maybe a bit down, maybe within the center. All right. This is like a toggle,
but at different dipole. Just going to select
something here. Bring down. Make sure the feel the
same color. Just needed. Drop Shadow. Drag it up. The drop shadow from the center. So men, these two is 0. It mean ground area
as a drop shadow. Something like this. Look. Let me just play around with it. What else? I believe
this is much better. Minh declared of this
and add it to this one. This plate. Nice, I love it. All right, cool. When he put these arrows here. So the same arrows. Let me check this one. Control X coming down here, paste it here and make it white. For now. Down Shift, rotate it. I'm just gonna put it here
exactly from the center. Now let's go back to layer. I'm just going to call this off. So when is off? It should be something like
this guy's click here. So it means nothing
is happening. Click and drop shadow. Make sure this is 0 and
this is also 0 as well. I'm just going to click
again on Drop Shadow. Drag this up. All right. So, so you see something, press Command or Control
D to duplicate it. And this is going to be on. When it's undefined,
is totally white. And the drop shadow
is also white. So this is going to be, is to shift select a component and again
click on new state, state to state two. You should be white. We just go inside. The origin, should be
a 100 percent off. Selected your image. Let's
go back to default state. When we are in default,
state, open that up. Let's call this on. The ARM version is
off the offer there. I'm just going to make
it a bit better with just the inner shadow
so we can see it more. Obviously, 112. Let's drag this up. Something like this. Now, we can see that
as you can see, something is here,
something is here, right? We make it larger. Beautiful. So this is the 1. State 2 is going science. Sometimes happen, go
to on and break it up. Yet one more time. Off, on, off. So the same thing. I'm just going to
drag this down. Lumps shift and rotate it. I'm just going to put
it here in the center, drag it to the right, exactly in the center. Rotated. Same thing. Rotate it down. This one. Submit down. Good. Try to be in the center. Awesome. It's going to go on a plate. And I've loved how cool is that. Maybe it's a bit too dark. Let's go inside. Because this is the main one. If we change this one, everything is going
to change. Silicon. This is an off. Go to inner shadow
and drag this down. Should be a bit lighter. Much nicer. Let's see it again. You always have to check. If it's fine. I love it. It's already there. So if someone click on it,
what's going to happen? It's going to be activated, but we haven't activated it. If I activate this. Good to prototype Gilligan, it no need to have
auto animation. Just put it on
transition state 2. It should be in two
seconds very quickly. If I'm state to an activating, this is going to
be going back to default state with 2 second
and should be unknown. The same thing here. You should be a nun.
Think. Okay, fancy. Click. Nice. So the cool thing about it, when we edit the master, everything else is going
to change as well. That's why the best way
of designing things. This way, we have it
master component, we change this one. Everything else is going
to change as well. Right? Now I'm just going to click
here and drag this one here. I'm just going to
call this Column. Click here into, so
everything is perfect. Just the harm is very pop. So select this one. I'm just going to pick a color. This color. Play again, very
natural, very soft. So we call this soft UI. Now it's time to go for
animating these parts.
7. Turn on the Light Prototyping Animation: All right, Let's go
for the animation. So I'm going click
on a design to make it to measure this
line in the center. Control click, double-click,
three, introduced as well. A lion should be here. Now it is. Control. Perfect. One, 23. So when we click on it,
what's going to happen? So I'm just going to select everything guys or
something like this, this bounding box to see that the green one right-click
and ungroup it. We don't need it for now. So we have done our parts. Let's go back and bring
this one as well. When we click on this,
this is going to happen. Something like this is going up. I'm just gonna put it here. I'm going to select
everything here, come out onto G to group it. And let's call this. This is the top one. So when you click on it, the bottom one is
going to be appear. So this is France, maybe. This is back. So let's put that back for now. Here alone, all township to
make it the same size. Glyco. So when you click on it is going to be something like this. Now, select both of them. Make sure you click
on Components it, the back and front bots. Click on back first, right-click and make
sure this is ungroup. Again, Command or
Control G to group it and call this back middle. Want to be a component. We just want to be a group because we're just going to
select both of this group, this one and this one, and now make them a component. Let's call this one. So individual one. We have back and front. So let's put that back in the back to front, in the front. Now, select the front, open it up, click on the Lab, and drag it outside. So the lamp is going to be animated between front and back. So check this out. Good. Can component,
newest state, state T2, next day to double-click and
the bedroom, drag it down. And maybe it goes down a bit. This one is going to come here. It's going to be larger. It's going to change the color to something very gradually, lighter, something like this. And I'm just going to add it to my swatches, something
like disgrace. Alright, so this is the back, this is the state to state 1
or default state, state two. So let's animate it. It's got a prototype. One click By tab
on auto animate. This, put it at six seconds. The easing is L should
be using this out, using is in his outs. It's going to stay to,
the same thing applies. One-click. Destination should
be default state. Now let's play it and
see what happens. Make sure you go back
to default state plate. If I click on this, see, the act is not activated,
something is happening. If I select this, again, I didn't choose the art
or the state to perfect. See the animation. This is going down and fading away and this is going to replace it. Perfect. When this is activated, it means now I can increase the light or decrease the light. Perfect. Awesome, I love it. Everything works like a char. Beautiful. Let's go to the laundry and the heating
and audio as well. Let's go back to Design. Select this one. When you are going to
state to select this, we can have a bit of
inner shadow gaze. The inner shadow off this color. It's like this color
is selected, right? But great download assay. So let's go back home. If I click on this. Now it's standing on. Love it. Perfect. Let's do the same
thing with this one.
8. Main Page Laundry icon Animation: All right, measure the
laundry is selected, right-click on it
and ungroup it. Now press Command
Control G to group it. I'm just going to
call this front. Let me just, something
is bugging me. In this one, the animation. I believe this is
nice, really nice. This light isn't
that really cool? So I'm just going
to Control click on it and 10 inertia off.
That's all I did. I mean, it's very simple. Now let's play it. I always like the simplicity of the animation and
it works perfectly. Us. The same thing here. This is going to be back. I'm just going to copy this, bring it here, paste it. Come here exactly to center. Make sure this is
totally aligned. Right-click and ungroup it. Command or Control G, This
is going to be front, or I'm just going to
change this front laundry. Select both of them, make them a component library. Open that up, it
should be front. You just copy this frontal area. So we have front Laundry. Let me just check of C
should be back Landry. Canada. Back should cause
data back. That up. Open that up. Awesome.
The laundry text is outside and the box are
on top of each other. We have to back let
me turn that off. This is the back. You're ready, bring it here. And this was the front, say this is the actual front. And all of them are inside
a component called London. This is how we created this. Click on this plus
sign again and go to new state in state two, what's going to happen in
estate to the front is off. The back is appear
in a state 2, 1. Open that up. The back is off. The front is active. So if I'm going to switch this, this is what's going to happen. If I go to a state to open
that up, sometimes happen. The back should be
activated right now. Now let's play again. Click outside this
one and this one. Let me just animate it. First, click on this destination should be a state
to very simple. If I'm in this state to click on this destination should be
default state is an ease out. Six seconds. That's all. It's always the same. Let's put it on as default
is there as well. So you can see the
difference and is beautiful. Look like this down
so it can work on it. And this is a
beautiful animation. Awesome. So when somethings like
this is happening, laundry, it doesn't have an
op and down arrow, something else should appear, something that it
says click on me. Let me just show you. Let's go back here to the
design is come here. Click on this. Copy. Select outside
Command Control V. Right? Now, it's good to feel
this good to linear. I'm just going to do
something like this. The top one this time I want
to make this a bit dark. The bottom one, I'm just going
to make it a bit brighter. So until like these guys. Now, let's go to inner shadow. Let's make it very dark. Ebit x value is three. This is maybe 20. And drag this up. So we have a dark edge here, has like a button,
like See you there. Cool. Press Command or Control
D to duplicate it. Alright, now select
the bottom one, is going to be called
a bottom on BG. Hold down Alt and Shift
and drag it up a bit, maybe a bit larger. So you see that
the corner right. So it is beautiful. And make sure this
is totally a circle. And click on this one. This one is circular as well.
This one a circle as well. So we are in BG.
Bg, I want to make this just a solid color
to something very white. Like it button so
you can click on it. Let me just play it. See how beautiful is that. Awesome. I love it. So select this and
select the BG, the Shift Command or Control
G, The Scholars button. So press Command or Control X. So now I'm going to
select the laundry going to default state to double-click on it and
press Command or Control V, just going to copy
the same place. So it means what I mean, the laundry, this is
going to be activated. So if I click on it, I going to do laundry page. So let's see if all the
state normal simple. Let's see play. So this is my sound. Actually. I was thinking to
add a sound to it. It's going to be very nice job. All right, Let's see what I have already have it
called sound for this. So this is C, a trick, just going
to delete this one. If I click on this, so I'm in default the state. And if I go to prototype mode, I have something
here called action. If we're getting on this plus sign up something
called audio playback, which can leave it that way, an audio file selected
and add a new file. In the final is MP3. You have something like smush, Gilligan it and it's
WAV file, an mp3 file. It's just going to work. So both of them, it's
working, import it. And let's see what's
going to happen, guys. If we click on this, animation is just going
to sound like this. Okay, click on this. Let me just unplug my microphone and you
guys can't see this. Let me increase the volume of B. It is going to be
sound like these guys. Then let go. So we also can add this
to this one as well. This one. If you are in default, the state can click on
this plus sign for action. So right now you see
that is activated. Go to choose. An audio file is already there. So we don't need to add anymore. And that suggests what's
going to happen to home plate to let it go. So the sum of
activating something or touching something is
going to be this sound. So, right, Let's good design the laundry or
washing machine page.
9. Designing Washing Machine Page: All right, let's create
the London page. So we get our board,
the home artboard press Command or Control
D to duplicate it will not remove everything. But on this one as well. Just select this one, drag it to the right. So despite on should be home. This go to Plugins called this
home button. This is cool. This drag it here and
get a bit smaller. Peter, smaller. I drew up
here and the same color. Gonna be non-repudiation
is going to give you a copy these and drag this down. Just going to type
smart pushing, right? For me, it is large. And I'm looking for
something semi bold. Drag this down,
type here machine. But this one should be light. And also going to
be a bit closer to 200, 400, 500, 550. The rest can be like this. Select it, getting up
arrow key and here we go. She defined by getting a nice, what I'm making this capital, I also make day's kept. I believe this is much better. Now Cellectis. It's go nice. So something like this. Smart washing machine.
What else do we need? I don't need these ones. Delete, select this one, hold shift and make
it a bit larger. All right, select
this, drag it down. Select these, drag it down. Select this one. Let's go back to layer. I want to see what we have done. Open that up, white and checking if the width and I
is the same, right? Maybe a bit larger. P, something like this, 1, 36, and this one around it. Cool. Now I'm just going
to click on circle communist in the center. Hold on Alt and
Shift and drag up. Going exactly to the middle. Get off the field so
we can see the border. Let's put it on 20. Now. Let's try it out all
to shift to make this exactly
something like here. Maybe a bit closer
to the outside. This one and this one. Hold down Shift and
make them larger. Again. Now, everything is perfect
is one and that one, I'm changing the
width and height. So everything is good. Just select on this. I'm just going to
pick a cool car or something like this. It
doesn't really matter. So you can always
look for colors, make it totally white or red, and just play around
with it until you get something like
here on this area. We should do something
like this as well. This area is giving good contrast between the
background and the color. So I'm just going
to pick this one. Now, there is another cool trick because you want
to animate this. This is the trick that
I'm just going to show. You. Put the gap
on certain 100th. When you put it on 700 is just going to be
something like this. Just a tiny little
line here, alright? Which you can also
bring down the opacity. It is in nothing
there for animating that the gap is the same as 700, but the dash, if I hold my top arrow key,
you see what happened? Look, this is the way
that we animate this. And it's going to be
very natural, very cool. Let me just come to the area that it's totally
level with the top. To do that, I'm just going
to create a line for it. Just going to select
again and let it go. Right, this is cool. Now, check this out. We have to use the
rounded cap and see if they're going to both
go inside, which is cool. So this is the trick. Now. I'm just going to
select everything, press, Command or Control G to
group it and drag this up. We're just going to put it here. And also drag it a
bit to the right. Nice. What else do we need? We need
the water for the inside, so how we can create the water. So let me select this and
click on washing machine, Glenn Command or Control and click this rounded
top on the y channel. Press Command or Control
D to duplicate it. I'm just going to drag it
and put it on the top. So there's going to be mask. Now click on fuel. And I'm just going to use
the same color as this one. Let's go to linear, the top one. Because I do rubber. Come here. Select this one, we get by the rubber
and pick this color. So the same thing. But we have to mask this how? Amount of control clicking. So we are under Mask. Pick up your pen tool. Now, select outside,
one-click here, along shift, one clique here, wonky here, and also here. So we just have
the border of it. No click on selection,
Double-click here. Just drag one of these down. So it's watery care. Now, drag this, tilted
it down like this. So nothing is inside this
shape here inside the circle. Make sure this is selected. Also hold down control
and select this one too. So these two are selected, their path and the
mask are selected. Right-click on it and
Mask with shape or the shortcut Shift
Command or Control M. So this is going
to be masked. So nothing is there. The mask is down. So basically, if I come up and this mask At
click on the mask, you see something like this. You see the past. If
I click on the path, if I click here, this
is what you see. If I go outside,
see what you see. So my go-to Z, to go back. So this is going to be
perfect for our animation. So we have three button here. Let's bring this one, copy and paste, and make it the same
size as that one. Down shift. Drag this down, make it the center of this one. And I'm just going to
drag this down also. So it's totally alone. No, drag this and
put it outside. And for the icon, Let's go to your material
Icon, Google icon. It's infile and you
can have access to it. Just look forward
these three icons. I'm just going to
paste them here. So this is going
to be for starting and turn that off and
on into before sound. And this is going to be the
timer now at this time. All right, cool.
All right, perfect. So we also have
these three icons. So here, this one
should be green, something like this, right? The same as this
one, the same place. Look for something greenish,
shouldn't be dead. Kind of green. This green
is light, very light green. So up to like this. But when this is turning on, the shadow is going to affect
these kinda shadow here. So the inner shadow also is
going to be the same color, but bring down the opacity. He said, Oh, no, it's fine. So this slide is affect
this shadow area, the lighting around it. I also have these icons here. It's called a smart icon. I'm just going to
drag and put it here. Nothing special interests and
right-click and ungroup it. Just put it here. Now,
make it a component. So because we're just
going to copy this for all the other books
or we can copy it easily and we can
change it easy.
10. Prototyping Animation Washing Machine: So this is home. I'm just gonna call
these Landry Command or Control D to duplicate it. Click on this and
make sure the color, it is kind of the scholar. Or maybe this color. I'm selecting this color
and I'm just going to add this to my swatches. Now in this artboard. And I'm opening this mask and
I'm clicking and is pass. Let's go zoom in a bit. So make sure when you
put your mouse here, you see this circle. It's telling me
you're celebrating. This one is selecting this one. Now, you have to
select this one, Double-click, click on
this and drag it up. And play around with it. Something like
something like this. Let's go down. Maybe
it it's come up a bit. Maybe something like here. So we can play around with it. So you just got to come
this far to the top to select select the
color, go to the mask. Good to hear. I'm just
going to put it on solid color and pick the
same color as this one. Let's make it very
simple and very interesting because
it's soft UI, so everything should be
comfortable and easy to the eye. Now, what the animating
up the so-called, it's very easy guys. So just make sure you select this border,
select this board there. Let me just see. What is a goal? Is elites 61, his ellipse? Can we change it to a
circle so it'll be awesome. Circle. Copy. Here we go. Circle as well. So if I click here, so make sure this is the
circle, so we know that. So it should be 360 rotation and comeback to the same place. Again, Command or Control
D to duplicate it. Select this one to make sure you double-click
on the mask. And let's go up. This time. It should be the opposite one. And drag this up. So let's animate it until here so we can see everything
is okay or not. So select this artboard, the laundry, drag this
and drop it to the here. This is should be on. Once I can also animate. It should be a nun. Again. Tab. Once again, none. I'm just going to see
before we do the animation, I can see these icons when it's coming here should
be a stop icon. Actually, I'm just going
to delete this one and I'm just going to
delete this one as well. I already have it
stop icon here, I'm just going to put it here. And this stuff icon should
be and this is blue. This one also, the
initiative should be blue as well to bring
down the opacity 24. Copy this, delete this one, and select this one
and paste it here. So basically if I click on
this one and drag it to here, it's going to be tab
autonomy laundry using are none and duration is
going to be 1 second. Then I'm just going to click
on this one, the total page. Drag it to here. So this
one should be on time. We don't do anything. It's timing, not 1 second. So let's do the animation. Let's see if
everything is smooth, especially this one, the circle. Beautiful. So these are
changing because these are, have the same names. So this one and this one
have the same names. Just going to call this one. So I should change to three. I'm just going to randomly
change the name so you don't want to distract
the audience by this one. So it's changed the stops
or we're going to stop it. Beautiful. At the end we
should add the bubble. It's going to be very fun. All right, let's go
to another page, Command or Control
D to duplicate it. Us already know. Sure, the pass is going inside. Here. We should just click on
the past, drag it up. Opposite side, drag this one up. This one should come here a bit. Also. The song shoot, come here. Drag this up. So delight this. It's almost there. Now the one in this one, we are just going to finish it. Double-click it to
the top. To the top. And that's it. And at the end is
another sewage. A cool. Now let's do the animation. Let's see what happened. So the animation
should be if I go to prototype and drag this one and also a drag
this one as well. So let's fix that
first one, the circle. If I click it, Let's
go to Design first. If I click the circle, is going to be 0 rotation. The next circle is 360. The next one it
should be 0 again. Let me click the circle. Yes. 0. The next
one should be 360, and this one should be 0. Let's do the animation and
let's see if it works. Beautiful. And it's done Command or
Control D to duplicate it. It's going to be
irritation at the end. So we do that. Let's fix everything. So the first one differ, circle, that rotation is 0. The second one is 260. Again should be 0. Circle again should be on 360. Again it should be 0. And at the end, we just
want a 90 degree rotation because it's drying time and just change the color
to something greenish. Not the past. Let's go back. Just the mask. Here. The mask is drying. Let's see the animation first. Then we go to the detail plate. So it's stopping here. Why? This can feel that stopped here? Because we didn't do the
prototyping. How cool is that? So time laundry, none. Again, the same thing. Again, the same thing. If I stop it, the whole package is going to go back
to here. Let's see. Plays are some beautiful. Let's go back. Look how cool is that
all time, I love it. Beautiful.
11. Create Bubbles for Washing Machine: All right, Now it's time to add some bubbles.
What is bubble? Click here. Let's go back to Design. Click on this
little circle here, and just throw some bugs. And who's going to make it
the same color as this one? Nice. Deep color. Right? One here, one here, one here, one here. Just five of them. Select everything, grouped them. Call this bubble, and
bring down the opacity. Copy it. Let's go to here. Paste it. So bring it down and put it
inside this washing machine. So bring the opacity up, select this one, drag it to
a year to get a bit larger. To here, bring down
the opacity very low. This one, down opacity, this one larger. So this one, I'm just
going to put it here. Same thing. Copy the same group. Copied. Double-click
inside, paste it. So the bubble is on
the top as well. Same thing. If I click on this
one, drag it up. Learner maybe is going to accidentally going
and hit this corner. This is going to
heat this corner. We check is not going out. Cool. So I'm looking for this ellipse. And you end up bringing
down the opacity. Maybe going to the top. This one. This one is, this is, everything is. So I'm missing something here. So probably something in the
middle, maybe very small. Wouldn't be bad. Sampling
the bubble, copy. Double-click inside. Can I control the bubble? Now play around with it. So at here, here we had
an accident, right? So here we hit the corner. And this one let me check. Let me just copy this one. If I just copy this
one, copy this one. Double-click, paste it. And this one is 18. Coming here, coming here, coming here, down, down. What else? Do something else. And yet queen to
be done as well. So one more time, copy the
bubble that was Lee here. Paste it down opposite. So this would be fine. And also let's just
put it here as well. Copy. So here is going
to go back to bubble, the opacity 100 percent. And this one, the
bubble is just here. Write this out. So I'm just going to put it
inside their washing machine. Direct him selected, shift, select down arrow key and
make sure the opacity is 0. So this is, let's
see, we have done. So something at the bottom was missing. Let's fix this one. In your hear. Something. The bubble and this
bubble should come up. Let's see one more time. Played. Nice. I love it. It's beautiful.
12. Add Sound Effect in Adobe XD: What about the sound? So at the end of
it, to this sound, for a sound also
have to change this because this meaning that
is turning on right? So let's go back here
and let's go and look for the sound that we want. When it this way. Copy,
paste. Get it this one. And just center. Cool. Pick up this color. Nice. Copy these. So let's delete, delete, delete, delete. So select, Shift,
select all of them, command or Control V.
Just going to be in the same spots here. The same thing. So this one
bring down the opacity. So before that, just make sure that you make the same color. Now, bring this down. So this is going to be sound on. Here we go. Here, control V, sound off. So this one, and I
don't want this one, Control click Command or
Ctrl G to group them. I'm just going to
call this sound. If you click on this,
what's going to happen? This make it a
component first. Sound. When it is in default is
there should be some delight. Is it going to new states? It should be
something like this. So this is on and off. Off should be 10, off the arm should be turned on. And also this one, the inner shadow, is going
to be the same as this one. Down opacity. So highlight is what's
going to happen. Off on. Let's animate it. Click on it. State two, good to stay to do
should be on for a second. We also can have an
action to discipline, like tell me that
off this call to action at the solution
to this one as well. So let's see how it works. Let's bring this
back to default as they seek. It works on us. Nice all the time, right, cool. The other thing that
we can do is this one. Here just type. Drying is put these fun. 0 is make this semi bold. And also two dots at the end. Make this a bit small. Let's bring it down. You could do various small. Put in the center. Copy these. Put it
here, make it large. Select this one, bring
down the opacity. So this is going to be
how it looked like. But ladies, like
drying right now. Let's go back. Cook. So this, see
this animation. So it means the same names. We have to change
this sort of this 11 here, another one here. So it doesn't really matter
because she then be changing out for let's see, if something is wrong. So we have to fix
everything is all right. Everything is totally perfect. Sound. Takes four seconds.
This is appears right. Wished and that awesome. I love it. Now, let's go for the timer.
13. Timer Design and prototyping animation Adobe XD: All right, let's create
the timer screen side. I'm going to use one of these, actually, something
like this one. I'm just going to
drag this one down. And also key here is shadow. Should be white. Let's try this down,
maybe around 80. The height to the right. Align them, go to the left. Align, command or control. Click rounded corners,
rounded corners. So we have this one. If I hold down
control and click on this and select it in
black, in a shadow. If I go inside in
phaco and linear, the top one, this
one should be white. The bottom one should be
the same color as this one. Now this one play around
with it until you're happy with something like this. Also, click on it
like inner shadow. And this one should
be a bit darker. Mice, I love it. Press T on your keyboard. And just type number 0. And make this larger. Shouldn't be Poppins for
the number areal around. It's good and your
round empty is cool. It's going to use this one. Make sure the fill color
is this background color. Click an inner shadow, it zoom in so you guys can see exactly what's going to happen. Click an inner shadow,
and just try to come up with a very bright lights. I'm just going to try something
like this, drag this up. Maybe this color could
be the best color. And I'm just going
to add it here. So it's here. This one. It's three, e b, nine, E1. So a play around with it. I just find out this is
the base color to use. So you always have
to play around with the color, something like that. It looks a suit your
design. So this is the 01. So how do we create these? So let me just show
you an example. And we're going
to put this here. And I'm just going
to drag this up. You can create, repeat,
drag this down. I'm just going to count. All right. 1234567890. So it's enough. So I'm just going to start
with one more time, 01. This is going to be 109 because it's a time where
you have to go backwards. Seven. If it was a normal timer, you could just do
a simple 10123. But we are going backwards, is going down from 10 to 0. For the military. Too. Quiet. So, so far, so good. Drag this down and
just keep going. Something like this, right, cool. So we do have something
like disguise. So we need a copy
of the seminary is going to copy
something next to it. And we can select these
two and just copy something next to it again. But we have to use mask
because if I select all of these and put them
here, Let's see what happens. Imagine a put this two. Here. We get that
we'd have gap here. Plug gap is two. And select these two and
dragged him to hear as well. Select everything. Make sure is in the center, which is so ligand rectangle. And make sure click on here. To here. Turn on a field so we can see it shifted the selected 1234. So four of them are selected. Right-click and masker, cheap. So we just see the sports. If it's out of it,
double-click on it. Select this one. This rectangle. I'm just going to Silicon this rectangle and drag
this a bit down. So that's it. Now,
let's go inside. Double-click. Press T, and let's press M. Let's make this kind of
white and very small. So this is going
to be minute here. And this is going to be
second S. All right? So now we select
everything, even this one. These two are also, are inside this group. So I'm just going to
call this timer or time. This is should be timer. Select this one, right-click
and ungroup it for now. All right, Now let's group
them and call this timer. And also we have time, so time and time and select this one and
also shift select this one. So both of them are selected. Click on component and
also click on new estates. So this is state one,
the default state, and this is a state
to an estate to describe the color of this is going to
change to this one. And also this inner shadow is going to change this one as well and bring down the opacity. And we have a red highlights. And in state 2, this is
going to start like this. Just gonna select this
and drag this down. Something like this. Start on ten minutes. Let's see what's happening. Default state, a state to its animated this
go to prototype. Double-click on this. Activated. The nation should be a state. 2 on forsaken or 6. Second is in his outs
and it's going up. Let's click outside. Select this again. Let's go to state 2 that
we'll get to hear activated. Make sure you come back
to default, state. The same thing. So activate
these default is that, so basically you are in
default, state that's played. Activate it. So ten minutes, Let's go back. 0, activated 10 minutes. So this is how we activate this. So by default is 10 and we can change it
manually as well. All right, Awesome, I love it. Now. We have to copy this. You have to copy the
state to everywhere. Let's delete this one
and paste it here. This is 10. So it's going
to start double-click here. So it's going to be 0. This is going to be nine. As we see this one,
click on this. Drag this up, it drag this up. Fine. I'll click on this. Because it's second
should go quickly. So this is going to be five. It's going to be maybe for copy the whole thing. Delete, paste it here. This is should be doubled. I'm double-clicking six. Let's go back. So it should be two. Should be 29. Awesome. If you see something
is just popping up. Just love to just select the mask one and
drag this other bit. Copy the whole package. That's it. We have two more, six, this is going to be 3. Five again, 50. Copy. And that's it. Let's make this 0, 0, 0, 1, 0, 0. Just click on it and
drag it down a bit. So it's leveled. So I'm just going
to click on it and just put it here as well. Here you just drying. So it means this is not
working anymore. So we are changing the
color to this one. And also, so probably
in this state, this is going back to default. The state. No need to change the column. You already created
the design and the component is just
played it, see if it works. So it's activated. Now you play. Let's go back.
Activated, spent 10. Now. Plate. It's beautiful
and it's going to start. Very Sarah, perfect drawing. Now. Let's go back. Stop it. Perfect.
14. Prototyping Start to Finish: Now let's go and make the
whole package together. As one side is go to Prototype. If I click on this, so the animated this is saying is add 1 second
is going to dad one, I come to this page
was going to happen is going to be It's going back. So it shouldn't go back. So this is not untap
is on time transition, push up by itself, six seconds. Let's see. Asm is a bit fast. One at a time. Maybe 8 second. Please. We want to see
the transition Qu lock and that's it. Beautiful. We are in this page. The works awesome. So when his laundry, let me click on this. It should goes to the other
page. Select this one. You are in state two. If I click on this prototype, Let's go to this one. Transition, push left, which means this one
is pushed right. Let's see how it works. Let me bring this back
to default state. Here we go. Laundry
and beautiful. Let's go back. Awesome. We can just make this also. Go back to this one. It's like push, right? Which means if you are in
this one, click on this. Awesome, beautiful. At the end, we're just going to
animate this and create the same thing for
the bright mode. You don't want Landry. I believe, for a
laundry to make it more interesting that you are
really selecting this one, you can change the Inner Shadow. Landry. Double-click.
You have the front, we have the bank. So if we go to the back, if we go to state 2, tosylate, citrus back Landry, the white arrow, that's why
we just put name on it. It's going to be
very interesting. Maybe something purplish
or something reddish. Drag this up. Even the name of
the laundry, maybe, maybe the title, even the
initial can be a bit. Maybe this color, for me, bad, for the inner
shadow, the white. Let me just select this color
as well and drag this down. So something like this. I believe this is much
interesting because we try to make it as
interesting as possible. Landry, nice. So it's obvious that we
selected the laundry. Now we go for this model
washing machine plate. So let's go back. So make sure for presentation always before you start
first click on the timer, is going to be on 10 minutes. Then click on the start. Drying sound and let's go back. All right, Awesome. We can go back, or if you click on this one,
what's going to happen? We click on this one. This one still is going
to come back to. Here. We push, right? It's the same thing
guys. All right, Nice. Now, what about this one? If we click on this,
what's going to happen?
15. Design the Bright Mode: All right, we already
have the dark mode. Let's go for the bright mode. So it's already selected. Click in the field and
pick up that color. Superiorly, these have these two LAN all time dragging
him through here. So we already have
these two options. Select this. So we can change this
one because the, these are half
twist stage, right? But this one should be simple. Kitchen and this one right? The lamp kitchen and dark mode. I'm just going to press
Command or Control G and Call this kitchen. Click on it. So we are in white, shadow. Click on this. So I said, What about these colors? Let's fill it with
the same color or turn that off because
it has inner shadow. Just going to pick up
the same color and just play around with it until it
gets something very cool. I mean, this color. I'm adding this to the soldiers because we're
just going to click on this. And same thing. What about the black one? The same thing at it. What about the drop shadow? I'm just going to add this
one and drag this down. What about, I'm just going to
Control click white shadow. The shadow, it should
be really white. Something like this. So we already have this one. So BB smarts and
keep all the text. Right-click and ungroup it. I don't want to type
that takes again. So school, it means I
can just select this, go to initiate or
click on this one. It's emptying this one as well. So this one, and
when it quickly, just going to click on this, this one, right carpet. Let's come outside.
Python, ruby, come here, right-click
and send to back. It's going to be like this,
awesome very quickly. This time, I'm just going
to copy the laundry. Misconduct. Delete this one,
select this one. Hold Shift, drag it to
the right command or control V. And let's go to
inner shadow at this one. So this is the way that we can
quickly do the rest of it. So the rest of this is going
to be your assignment guys. All right, given this
one and this one, what color you have to add to this one to be
exactly like this. So I'm just gonna
leave it like that. I'm going to just design
this one for you guys. So this is going to be your assignments and
even the rest of it. I mean, I want to you guys
create the same thing, but the the white
color mode, right? Then just send it to me and I'm just going to see
what you guys have done. And it's going to control
click on this one. This is going to be white. And this is going to
be controlling back. Let's pick a color. In a shadow. It's very dark. And also, who's going to maybe
add this color to it? Would be much nicer. I'm just going to do the whites
in a shadow to the white. Drag this up. Beautiful. Let's go to one of these, state 1 and state 2, right? So let's say 2 is going to
be something like this. But the default state and this, this is on enough, right? It should be on
something like this. Scooby default, the state
on this go to drop shadow. Let's see, what do we
have here? On and off. The roof should be
opacity and 0 on, on. Drop shadow. Just going to put it down
somewhere like this. So this is the default and
normal state to click on it. The ion is off. And just click on
off, turn that on. So it's going to be backwards, but the color should
be this color. That's it. Let's see what we have
done. All right, cool. I'm just going to
remove everything else. Drag this down. Stated. Put it here means
and they're rotated. Put it in here in the center. And the same thing here. It's very simple. I believe I want to make
this something like this. So the rest of it, I'm just going to
animate this as well so you guys can see
what's going to happen. If I go to prototype
and if I click on this, it's just going to
come to this one. Auto animate. Here's an
ease out and 6 second. So make sure this is
coming to the left. So this is the color that
you guys have to do, is go to design. And the color should
be discarded. The rest, it's up to you. Let us have the
designer, the owner, the habits, everything's here. Drag the same thing here and just put it in
the back, That's it. Then the rest is going to be easy for you that
just replace these with this one and add everything to just make sure you
follow the order. What I have done
for the dark mode, just do it for the bright mode. That's it. It's a book. You can click on this. So
let's go to port civilian. If I click on this again, the whole thing is just
going to go back here. Let's see what we have done. So, so everything is changing. So make sure at the end, change the name of this. So not everything
is moving around. So this is the animation
that you guys have to do. So the switching and that's
very simple. The rest. And it's going to
be your assignment to do measured, send it to me. And I'm just going
to see which one of you has done it the best way. And I'm just going to
show the design guys. So it's going to be
something like this as well. Let me just take a look at it. Is the default state, which is the default is state. The design. It should be
something like this one. But these shadows are much better at this
corner radius or better. So make sure this
is black as well. And the rest is up to just
take a look at this one. You guys are going to
do this same thing. I like this color as well. So try to create the same
color and just keep going.
16. Sign In Sign Up Button Design: Right now I'm looking at
this fingerprint here and we can add a sign in
sign up button as well. It's going to be very simple. Click on one of these,
drag them here, and just put in here and
drag it to the right. Make sure its center. I'm just going to
type here, sign in. Make sure the color is blue. And it's good again. The center. Now, select it, make it the abyss, hold on Alt and made it a
bit smaller and better. And have a drag this
up on Alt and Shift, and drag this down. It's going to be a sign-up. For the sign-up. I'm going to change
this to this one. Let's see. It's going to produce here. Drag this one to
here, right here. So let's select this one, delete it, select this, drag it to the left, right-click, send it to back. It's going to be Sign
up. Make it white. Make sure I select this one. Do I shuttle control click. Go to this and make
sure this is linear. Let's go back over it. And this left, let's
put this to the right. It's going to be
something like this. This side is going to be very bright and decide it's
going to be this color. So let's see. Signing, sign up. Awesome. Let's select both of them. Command Control C.
Come out of control. We said, we forgot to do that. And I think it's done.
Soli Art, Content Creator | Digital Artist
