Responsive Web Design in Sketch App: Auto Layout & Flexbox Plugin


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

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *