Hey, I'm Hunter from Skillthrive and in this tutorial you'll learn the basics of
the Auto-Layout plugin in Sketch to create a responsive card layout like
this one. Before we get started, make sure you download and install Anima into
Sketch. There's a link in the description
that'll take you to the page where you can download. Also, if you want to
download the Sketch file that I'm using in today's course, make sure you join and
become a free member on Skillthrive.com, that way you get instant access to
not only this course but also all the course files that we currently have on
our site. There's a link in the description where you can join. Also, before we get
started, I want to mention that the intention of this actual tutorial is to
go over just the basics of Auto-Layout and not overwhelm you with everything
that it can do. So, we'll cover basics of how to pin, how to set width, as well as
an introduction to stacked groups. So this is definitely a plugin that took me
a little while to really feel comfortable with, so take what you learn
from today, apply it to your designs, play with some of the settings, and if you
have any questions always feel free to ask in the comments below. So with that
said, let's go ahead and jump in Sketch and get started on today's tutorial. So you
see that we have this really simple card design here in Sketch. Now this one's
actually designed to be the smallest card that I would actually want in my design,
which is for small mobile screens. Now, I always like to start with the smallest
card design first. Then that way I can build in the smarts so when I scale this
up I don't ever have to worry about running into issues with smaller card
designs. So, with that said, let's go ahead and just look at how this card was
actually built. So if I come over to this grouping and expand this, you'll see that
I have this 'info group' which is just information about the event. And then I
have this shape layer that I have named image. Now if you come over to fill
you'll see that I'm actually filling this with an image and then setting this
option here to fill. And this just makes sure that it's using this image to
display nicely based off of the size of the shape. This is going to be really
important as we actually expand and resize this because Sketch is going to
refer back to this setting in order to make sure that this image behind it is
displayed nicely. Now another thing that I did was add a fill here, which is just
a really simple linear gradient. And if I turn this on and off, you can see all
this is really doing is making sure that the text
is going to be able to be seen on whatever image that we're using here.
Now if you come over to this 'info group' and expand this, you'll see that we have just
a couple of text layers, and then we also have a rating grouping, which is just
five star-shaped layers grouped together in order to show the
viewer, you know, whatever rating this has for the event. Now another thing I wanted
to mention here on this text layer is that I went over to alignment and
clicked on 'fixed' and made sure that 'fixed height' was unchecked. Now I
realized that when if I had this on 'auto' sometimes the 'auto' or the 'fixed height' was
selected, which would give me some issues when I was trying to actually try to
expand this text dynamically. So just make sure you go through and have
that set on 'fixed' and then have 'fixed height' and 'fixed width'
unchecked. So now let's go ahead and just talk about how we can actually start
using the Auto-Layout plugin to build some smarts here into this specific card layout.
So the first thing I'm going to focus on is just this 'info' grouping. Now if we come
down and we hold option we can see that we have 10 pixels from the left and then
10 pixels from the bottom. Now I want that design to, or those
parameters, to carry through no matter how big this event card gets. So what we
can do is just select this layer, we can come over to our Anima plugin, make
sure that we're on this left icon here, which is our actual Auto-Layout settings,
and then we can expand this and we can come over here. And say on this button,
and say "Hey, have 10 pixels from the left and then have 10 pixels from the bottom
at all times." That way, no matter how big we make this, it's always going to refer
back to those parameters that we set here. Now another thing I'm going to do
is set a width here, so let's go ahead and set it instead of pixels, let's
set it to 85%. That way it's going to be referring to the size of whatever it's
in or whatever the event card is. And another thing to do is make sure that I
have a minimum width here set to 290. Now, like I said earlier, this is the smallest
that I ever want my card to be, so by setting this to 290, I'm not able to
actually make this event card smaller than 300 pixels because this is set to
290. Now, why 300 pixels? Well, remember that we have 10 pixels to the left of
this and 10 + 290 is 300, giving the total width of the card 300. Now that's
just the only settings that we're actually going to be setting on this
'info' layer, but on this next one what we're actually going to do is do
something–apply something called a stacks. Now, if you're not familiar with stacks,
essentially what a stack is is a special group that allows you to apply
parameters to the child layers within that grouping. So if we expand this 'info
and rating' you'll see that we have four layers here–the three text ones and then
this star rating grouping. And what's going to happen when I apply the stack
is that this information is going to be applied to these four layers. Now keep in
mind that the layers here, the star layers under this rating grouping, are
not going to have those those properties applied to them because these are child
layers of this rating grouping. So that's just
something really important to keep in mind here as you're starting to build
stacks and make sure that your designs are responsive as well. So let's just go
ahead and collapse this, come back into the 'info and rating,' and let's come over
to this icon here that looks like a folder with three dots, which is going to
allow us to create a stacked group. So I'm going to click here, I'm going to make
sure that this is vertical because these layers are on top of each other. I'm going to
make sure that they're left align and that they have a spacing of five pixels.
So now no matter how big we make this it's always going to refer back to these
settings for the elements in this 'info and rating' layout. So now what we can do
is just come back into this 'rating' grouping. Let's go ahead and make this a stacked
one as well, but this one's going to be a horizontal because the elements inside
here are relative, or they're next to each other, so their horizontally
relative. So we can just go ahead and set these to the top of the layer and have
the spacing here set to five as well. And actually, before I click out of this one,
let's go ahead and set a width and a height here to 95 and 15–that way the,
you know, this grouping would never get smaller than that. And for good measure,
let's go ahead and just expand this and select all these star layers and set a
width and height here so that the stars never go, or never get bigger or smaller
than 15 pixels by 15 pixels. So with that said, we can just go ahead and collapse
these, and if we come in and just stretch out this card–let's just zoom out. Let's
make this bigger, and you can see that the text didn't update, but all you have to
do is just click on this until that updates like that. So you can see if we
zoom in here that this is, you know, 10 pixels from the left, it's 10 pixels from
the bottom, and that all these groupings inside here are going to be 5 pixels from each other.
So this saves you a lot of time if you need to resize something. That way you
don't have to reposition anything or have to worry about anything like that.
So this is super handy and I hope you guys can see how useful this is in the long run.
So now let's just go ahead and command-Z to go back to that small card layer,
and what we can do is select this 'event card,' I'm going to command-D about three
times. So now we have three of them stacked on top of each other, and let's
go ahead and collapse these layers, select them, come back into this stack,
and let's select horizontal. So we want them next to each other, to the left and
the right. We can say, "Hey, position these to the top and let's go ahead and set a
spacing here to 20 pixels." So now these are all spaced out by 20 pixels apiece.
And then we can come over to this grouping and name this something like
'row-events,' and then we can command-D a couple times here, selected these, and create
another stack. This time, a vertical one. We can left align these as well and
just do 20 pixels, and now we have this really nice layout of nine cards here.
And let's just go ahead and just rename this to 'column-events.' And now
if we come in and actually resize this, all these are going to resize based off
of those settings that we just set here. So you can see that that looks nice and
it makes it really easy for us to quickly design and resize things if we
need to. So now let's go ahead and build a little bit more smarts here into some
of these layers. So the first thing to do is just go ahead and make this into an
artboard, so let's go ahead and just create an artboard here. And let's go ahead and
just set this to something like 1400, or 1440. Let's go ahead and just drag this into
here and talk about some of the things that we want to do here.So let's say for
instance this is for desktop, so desktop HD, and what we can do is say, "Hey, we want
this column to be a fixed width." So we can come in and click on this here to
set a fixed width and we can go ahead and set a pixel dimension. Let's do
1,200, so that's going to resize to 1,200.
Then we can come into each row and say, "Hey, we want the width here to be 1200 as well
so it's going to fill that entire bounds of the column group." So why that's cool
is that we can come in and actually start resizing some of these, and you'll
see that the ones in the rows are going to resize dynamically as well.
So let's go and just click on this 'event card' for instance and let's go ahead and
just make it a little bigger. You'll see that these to the right have resized.
And you can also go ahead and just delete a card–you'll see that these are
going to resize as well. Now we need to go through and click on these to make
sure that they update, but you can see that this is a really cool way to really
create some flexible designs here in Sketch. So let's just go ahead and keep
this one where it is now. One more thing that I wanted to mention here is just
how you can take a row and make them, instead of horizontally, you can go ahead
and stack them vertically. So if you want to design something for mobile you can
do that really quickly as well. So let's say–just go ahead and click 'A' and create a new
artboard here. For this drop-down, let's go ahead and just come into 'Apple
devices' and set something here for the 'iPhone 8 plus.' And then what we can do is
come into one of these groupings here, so let's do this one here. Command-C, we can
paste it here into the iPhone grouping, and we can come into this stack and say,
"Hey, don't do horizontal do vertical." And then we can resize this to be something
like our minimum of 300. So what's happening here is that I forgot to
change the width I mentioned, so let's go ahead and actually unclick this,
and now we can go ahead and resize this to 300. And then we can just go ahead and
move this into the actual artboard. There we go. And now we can go ahead and
just expand this artboard size, go ahead and make sure that these elements update,
and now you can see with just a couple clicks that we get this really nice layout for mobile
For more infomation >> Kia Picanto 1.0 CVVT ISG Comfort Pack / RIJKLAARPRIJS / AIRCO / 5DRS / ELEK.PAKKET / BTW AUTO - Duration: 1:04. 
Không có nhận xét nào:
Đăng nhận xét