Hey friends welcome back to another Adobe xd tutorial, this is the third lesson of the adobe
xd free course, last time we design and prototype the onboarding, sign in and sign-up screens.
Today we’re designing and prototyping the home page,
let’s have a look at the final design and prototype.
Please give the video a like that will help the channel a
lot and subscribe if you haven’t already. Now let’s get started.
Create an iPhone 12 pro max artboard, now drag two 25 pixels guide from both sides
of the artboard for the safe area. add the menu and the bag icons,
type outfit ideas, change the font to red hat display, font-weight to bold, character spacing
to 125, make it uppercase, set its color to 0 c 0 d 3 4, and place it 44 pixels from the top.
drag a circle, holt shift and alt to create another one from the center, select both and
give them 30 pixels top and 50 pixels left margin. for the text type new in, set the font to SF pro
display, font-weight to medium, character spacing back to 0, and give it 9 pixels top margin.
now go ahead select the ellipses and the text, and press on the repeat grid, and drag the right
handle to repeat content, adjust the space between them, drag the images on the first ellipse,
and the text file on the text, make some adjustment to images, select the outline ellipse,
drop its opacity to 30%, now go ahead and ungroup the grid, group them again,
click on the stack, xd automatically understand the direction and space between the elements.
stack enables us to easily change the order of the element while keeping the space between them.
You will learn more about the stack in upcoming lessons.
now change the outline color of each category.
add the background, change its color to 0 c 0 d 3 4,
duplicate it, click on flip horizontal, bring it down, and change its color to 2 8 2 8 4 2.
type the heading, change the font to red hat display, font-size to 24, font-weight to bold,
give it 53 pixels top and 51 pixels left margin. drag a rectangle on the artboard,
round its corner a bit, give it 30 pixel top and 50 pixels left margin,
click on the shadow, change the x value to 4, the y value to 0, and decrease its opacity to 7%,
now drag the image on the rectangle to be masked. duplicate the rectangle, adjust its size by
making it smaller, place it 75 pixels from the right of the artboard, drag the second image,
adjust its position, and send it to the back. duplicate the rectangle, shrink it down,
give it 50 pixels right margin, replace the image, and send it to the back.
duplicate the last rectangle, drag another image on the rectangle, adjust its position,
send to back and move it 15 pixels to left. the reason why I’m doing this is that when
the first image goes out I want the second and the third images to change sizes and positions,
and the hidden image comes in, so when one image goes out another one comes in. we will
do these steps until only one image remains, you will understand this when we create states.
add the arrow icon, change its color to white, duplicate it, flip it horizontally, move it to
the left, and drop its opacity to 50%. now go ahead and select all elements
that make this section and turn them into a component and name it cards.
add the button, change the text to explore, Shorten the background width,
change the text color to 0 c 0 d 3 4, and place it 62 pixels from the bottom.
before we continue the tutorial, would like to remind you that 15%
of you are watching subscribed 85% aren’t, so please subscribe and support the channel.
now create a new state, duplicate the last and hidden image,
replace the image, and move it behind.
select the fourth image and change its right margin to 50 pixels.
change the width and height of the third image to 214 by 372 pixels.
make the second image the exact size of the first image.
and finally, enlarge the first image and move it out of the artboard, and drop its opacity to 0.
bring the left arrow icon opacity back to 100%. now repeat these until only one image left.
in state 5 add the redo icon and drop its opacity to 0.
in state 6 bring the redo icon opacity back to 100%,
and decreases the right arrow icon opacity to 50%.
now go to the prototype mode, select the right arrow icon, click on the handle, over the
interaction panel, for trigger select tap, for type auto-animate, for destination state 2, for
easing ease-in-out, and for duration 0.6 seconds. go to state 2, select the right arrow icon,
keep all other interaction properties but change the destination to state 3.
to go back to the previous state, select the left arrow icon, keep all other interaction properties,
only change the destination to default state. do these steps for all the states.
in state 6, for the destination of the redo icon select default state.
let’s have a look at the prototype, it’s working the way I wanted, and it’s looking great.
what do think? let me in the comment section.
from state 4 create a new state and name it half expanded, move both arrows out of the
artboard, enlarge the image and adjust it. now add the background, make it smaller,
change its color to white, move the button to the back of the cards component.
because the background is a component, we can’t access the states in the prototyping,
so we have to ungroup the component in order to have access to the states.
add the bag icon, drop its background opacity to 20%, and change the icon color to white.
go ahead add the back icon, decrease its background opacity to 20%,
and the icon color to white as well, because we’re going to use the back icon in the prototyping,
we need to ungroup the component, so we can access the states.
type the title, keep the font properties, make it title case, change its color to 6 e 6 f 8 6.
add the star icon, give it 10 pixels top margin, change its color to f 2 d 3 2 8, click on
the repeat grid, drag 3 and half instances, space between them is going to be 4 pixels.
type the price, change the font size to 31, color to 0 c 0 d 3 4, and give 10 pixels top margin.
now create a text area, change the font to SF pro display,
font size to 18, font-weight to regular, line-height to 28, and color to 9 0 9 0 a 0.
use the lorem ipsum plugin to generate a dummy text.
drag a rectangle over the text, select both and mask them, give it 20 pixels top margin.
increase the background height a little, and move it up.
select all the elements that make this section except the image and copy them,
go to state 4, paste them, and move them out of the artboard,
make sure the mask group and the rectangle mask have the same name as in half expanded state.
move the bag and arrow icons out of the artboard as well.
from half expanded state create a new state and call it full expanded.
increase the height of the background, select the background and other elements and move them up,
make the image small, reveal the full paragraph and make some adjustments.
duplicate the title, change to size, change the font size to 22.
draw an ellipse, give it 19 pixels top margin, change the color to f 6 f 6 f 6.
for text type s, change the font to SF pro display, font size to 16, color to 0 c 0 d 3 4,
center them horizontally and vertically, and turn them into a component,
go ahead and call it size. create a new state,
change the background color to a 3 7 9 d b, and the text color to white, duplicate the background,
make it larger, remove the fill, and change the border color to d 8 d 8 d 8.
duplicate it, change the text in both states to m,
duplicate two times more, and change the texts in both states to L and XL respectively.
now wire them up, keep the properties as they are, change the destination to active state and the
duration to 0.2 seconds, from the active state, select the default state for the destination.
apply these settings to other sizes.
add the button, change the background color to 0 c 0 d 3 4, and the text color to white,
change the text to add to bag, font size to 25, and change the background width to 262 pixels.
make the background a bit bigger again, select all elements and move them up,
and give the button 42 pixels bottom margin. select the sizes and the button and copy them,
then past them on the half expanded and state 4, and move them out of the artboard.
now go to prototype mode, select the image in state 4, and click on the handle, keep
all the properties, but change the destination to half expanded, and duration to 0.6 seconds.
go to the half expanded state, click on the back icon, change the destination to state 4,
select the background and change the destination to full expanded.
go to full expanded state, select the image, change the destination to half expanded,
and the back icon destination to state 4. Let’s have a look at the final animation,
we have seen this part previously, now this part also comes up really well.
Thanks everyone for watching, if you enjoyed the video, please hit that like button,
subscribe if you haven’t already, and click the bell icon to be notified of future videos.
I will talk to you in the next video, Bye.