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

Hey, I’m Hunter from Skillthrive and inthis tutorial you’ll learn the basic concepts of the Auto-Layout plugin in Sketch tocreate a accept card layout like this one. Before we get started, make sure you download and install Anima into Sketch. There’s a connection in the description that’ll take you to the page where youcan download. Likewise, if you want to download the Sketch file that I’m usingin today’s course, make sure you join and become a free member on, that lane you get instant access to not only this course but also all thecourse files that we currently have on our site. There’s a link in the descriptionwhere you can join. Also, before we is starting, I want to mention that theintention of this actual tutorial is to go over exactly the basics of Auto-Layoutand not overwhelm you with everything that it can do. So, we’ll blanket basics ofhow to pin, how to set width, as well as an introduced to stacked groups. Sothis is definitely a plugin that made me a little while to really feelcomfortable with, so take whatever it is you learn from today, apply it to your layouts, playwith some of the situates, and if you have any questions always feel free toask 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 carddesign here in Sketch. Now this one’s actually designed to be the smallest cardthat I would actually require in my blueprint, which is for big portable screens. Now, Ialways like to start with the smallest card design first.Then that course I canbuild in the smart-aleckies so when I scale this up I don’t ever have to worry aboutrunning into issues with smaller card schemes. So, with that said, let’s go aheadand only look at how this poster was actually improved. So if I come over to thisgrouping and expand this, you’ll see that I have this’ info group’ which is justinformation about the happen. And then I have this condition layer that I have namedimage. Now if you come over to crowd you’ll see that I’m actually fillingthis with an image and then setting this option now to fill. And this just makessure that it’s using this image to expose delicately located off of the size ofthe shape.This is going to be really important as we actually expand andresize this because Sketch is going to refer back to this setting in order tomake sure that this image behind it is displayed neatly. Now another thing thatI did was add a fill here, which is just a really simple linear gradient. And if Iturn this on and off, “youre seeing” all this is really doing is making sure thatthe text is going to be able to be seen onwhatever image that we’re exercising here. Now if you come over to this’ info radical’ and expand this, you’ll see that we have just a couple of textbook layers, and then we alsohave a rating grouping, which is just five star-shaped layersgrouped together in order to show the witnes, you know, whatever rating this hasfor the event.Now another thing I wanted to mention here on this textbook mantle isthat I went over to alignment and clicked on’ fixed’ and did sure that’fixed elevation’ was unchecked. Now I realized that when if I had this on’ auto’sometimes the’ vehicle’ or the’ secured stature’ was selected, which would give me some issues when I was trying to actually try to expand this text dynamically. Sojust make sure you go through and have that set on’ set’ and then have’ fixedheight’ and’ fixed diameter’ unchecked. So now let’s go ahead and really talk about how we can actually start using the Auto-Layout plugin to buildsome smarts here into this specific card layout. So the first thing I’m going to focus on isjust this’ info’ grouping. Now if we come down and we contain alternative we can see thatwe have 10 pixels from the left and then 10 pixels from the bottom. Now I wantthat layout to, or those parameters, to carry through no matterhow large-scale this event card gets. So what we can do is just select this stratum, we cancome over to our Anima plugin, make sure that we’re on this left icon now, which is our actual Auto-Layout arranges, and then we can expand this and we cancome over here.And say on this button, and say “Hey, have 10 pixels from the leftand then have 10 pixels from the bottom at all times.” That way , no matter how bigwe make this, it’s always going to refer back to those constants that we sethere. Now another thing I’m going to do is set a extent now, so let’s go aheadand determine it instead of pixels, let’s set it to 85%. That room it’s going to bereferring to the size of whatever it’s in or whatever the happening card is. Andanother thing to do is make sure that I have a minimum diameter here set to 290. Now, like I said previously, this is the smallest that I ever demand my placard to be, so bysetting that is something that 290, I’m not able to actually make this event card smallerthan 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, granting thetotal thicknes of the card 300. Now that’s just the only fixes that we’reactually going to be setting on this’ info’ blanket, but on this next one whatwe’re actually going to do is do somethingapply something called a loads. Now, if you’re not familiar with loads, essentially what a stack is is a specialgroup that allows you to apply parameters to the child coatings withinthat grouping. So if we expand this’ info and rating’ you’ll see that we have fourlayers herethe three verse ones and then this star rating grouping. And what’sgoing to happen when I apply the stack is that this information is going to beapplied to these four layers. Now keep in mind that the blankets now, the starlayers under this rating grouping, are not going to have those those propertiesapplied to them because these are child strata ofthis rating grouping.So that’s just something really important to keep inmind here as you’re starting to build stacks and made to ensure that your designsare responsive as well. So let’s just go ahead and collapse this, come back intothe’ info and rating ,’ and let’s come over to this icon now that looks like afolder with three specks, which is going to allow us to create a stacked group.SoI’m going to click here, I’m going to make sure that this is horizontal because theselayers are on top of each other. I’m going to make sure that they’re left align andthat they have a spacing of five pixels. So now no matter how large-scale we make thisit’s always going to refer back to these settings for the elements in this’ infoand 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 ahorizontal because the elements inside there is relative, or they’re next toeach other, so their horizontally relative. So we can just go ahead and setthese to the top of the seam and have the spacing now set to five as well. Andactually, before I click out of this one, let’s go ahead and give a thicknes and aheight now to 95 and 15 that practice the, you are familiar with, this grouping would never getsmaller than that.And for good measure, let’s go ahead and simply expand this andselect all these wizard seams and mount a width and stature here so that the starsnever lead, or never get bigger or smaller than 15 pixels by 15 pixels. So with thatsaid, we can just go ahead and fold these, and if we come in and time stretchout this cardlet’s just zoom out. Let’s make this bigger, and you can see thatthe text didn’t update, but all you have to do is just click on this until thatupdates like that.So you can see if we zoom in now that this is, you are familiar with, 10 pixels from the left, it’s 10 pixels from the bottom, and that all these groupingsinside here are going to be 5 pixels from one another. So this saves you a good deal of meter if youneed to resize something. That space you don’t have to reposition anything orhave to worry about anything like that. So this is super handy and I hope youguys 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-time poster mantle, and what we can do is select this’ eventcard ,’ I’m going to command-D about three times. So now we have three of themstacked on top of each other, and let’s go ahead and breakdown these strata, select them, come back into this stack, and let’s select horizontal. So we wantthem next to each other, to the left and the right.We can say, “Hey, standing theseto the top and let’s go ahead and adjust a spacing now to 20 pixels.” So now theseare all spaced out by 20 pixels apiece. And then we can come over to thisgrouping and reputation this something like’ row-events ,’ and then we can command-D a couple era here, selected these, and create another stack. This time, a vertical one.We can left align these as well and precisely do 20 pixels, and now we have thisreally nice layout of nine placards here. And let’s just go ahead and justrename that is something that’ column-events .’ And now if we come in and actually resize this, all these are going to resize based off of those designates that we are only determined here.So you can see that that looks nice and it procreates it really easy for us toquickly design and resize things if it is essential to. So now let’s go ahead and builda little bit more smart-aleckies here into some of these layers.So the first thing to dois just go ahead and make this into an artboard, so let’s go ahead and justcreate an artboard here. And let’s go ahead and exactly prepared this to something like 1400, or 1440. Let’s go ahead and exactly lag this into now and talk about some of the thingsthat we want to do here.So let’s say for instance this is for desktop, so desktopHD, and what we can do is say, “Hey, we want this editorial to be a deposited width.” So wecan come in and click on this here to set a secured thicknes and we can go aheadand placed 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 extent here to be 1200 as well so it’s going to fill that part boundsof the column group.” So why that’s cool is that we can come in and actuallystart resizing some of these, and you’ll see that the ones in the rows aregoing to resize dynamically as well.So let’s go and exactly click on this’ eventcard’ for instance and let’s go ahead and just make it a little bigger. You’ll seethat these to the right have resized. And you can also go ahead and justdelete a cardyou’ll see that these are going to resize as well. Now we need togo through and click on these to made to ensure that they inform, but you can seethat this is a really cool way to really create some resilient patterns here inSketch. So let’s just go ahead and continue this one where it is now. One more thingthat I wanted to mention here is just how you can take a row and stir them, instead of horizontally, you can go ahead and stack them vertically. So if you wantto pattern something for mobile you can do that really quickly as well. So let’ssayjust go ahead and clink’ A’ and create a brand-new artboard now. For this drop-down, let’s go ahead and just come into’ Apple machines’ and set something now for the’iPhone 8 plus .’ And then what we can do is come into one of these formations now, solet’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.” Andthen we can resize this to be something like our minimum of 300. So what’shappening here is that I forgot to change the width I mentioned, solet’s go ahead and actually unclick this, and now we can go ahead and resize thisto 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 really expand this artboard size, go aheadand make sure that these elements update, and now you can see with simply a coupleclicks that we get this really nice layout for portable.

digital marketing

As found on YouTube

Share this article

Leave a comment