Responsive Website In Figma

so you finally finished up your desktop design it looks great and you're ready to just put it into production then rock and roll but there's an issue a big one we have only designed for one device which means that we still have 66 percent at least of the possible to go what does the design look like on mobile or on a tablet or on a TV that I shall not worry in this video we'll cover how you turn your desktop design into tablet and mobile responsive designs in figma hey all if you haven't seen me before my name is Tim and I'm a product designer based in Stockholm Sweden now today we'll talk about responsive design and we'll start by actually looking at real world examples like apple and figma and see how they do responsive design then we'll take those learnings go into figma and see how we can implement it in the software as well now make sure you stick till the end because both the real world examples and the figment tutorial are going to be equally important let's get started now the first thing we should address when it comes to responsive design on the web is that everything is contextual so depending on what design you have what design needs you have the layout the break points where your layout changes responsibly is gonna be different so if we take a look at figma's website here I have the inspector mode so that we can see exactly at which pixels we change the layout so if I resize this you can see that around 1250 something happens with a nav bar we take away the links we get this hamburger menu then uh 700 800 something we have something else happening this text here the heading is decreasing in size and then you can see that this image here constantly decreases in size and at let's see here at around 540 Maybe this text decreases in size again now let's go to Apple and see what happens here so keep an eye here okay let me decrease the size they don't change the layout until 10 50 1060 pixels 1070 even that's the first so they changed the size of the text this size of this container is changed then at 800 something this nav bar is changed and at 730 maybe we change this layout again so we stack these elements on top of each other instead so you can see that it's very very contextual now let's head back to figma for a quick moment and look at their nav bar because I thought this was interesting and this is a point I wanted to make as well that the lower you go with your breakpoints and the more break points you have the more accurate or the better your design is typically going to look for the different sizes so if we click on the hamburger menu here you can see that figma has really made it easy for themselves they have this really tight mobile ready menu already at 1200 pixels now some designs some websites will probably have different menus for different screen sizes but figma has the same all the way through here and it's nothing wrong with that but yeah depending on how many you have maybe the better your design is going to look but it's also more work of course another thing I want to point to here uh if we look at the figma example is that if we take a look at this section here we have some text and a call to action and we have an animation here to the right now if we decrease the size here decrease it then they're gonna stack on top of each other that's a typical pattern when we go down in sizes but you can see here as well that the order changed so now this that was to the left the text section is beneath the animation and that's because the animation is going to tell the story or get the point through better than just the text so they want to show the animation first because that's what gets the point through something else that is worth mentioning is that some things will depend on a column grid and some things will depend on a Max width so if we take a look at this for example this title and the text here when we decrease the size you can see that this remains intact in terms of width so nothing happens here like it's not Dynamic depending on the width of my frame or my screen size and then when we go down here you can see how here it changes a bit and then it snaps to a new container so this is the new Max width but it stays intact and here a new Max width but now it's 100 of the width so that's something that is typically done with text where you want it to maintain the same kind of width because text we're reading it we want it to not be too long and not too narrow so typically we would use max width for that something else when it comes to responsive design is when you go through these different break points usually you will change the size of things right so if we look at Apple here and they're going to be an outlier in this case we decrease the size but you can see at this breakpoint so the first breakpoint nothing happens to their button sizes the text sizes change the size of the images change but the buttons and the links stay the same let's see at the next breakpoint same thing buttons and links stay the same in terms of size if we look at figma nothing happens at this breakpoint thing happens here but at this breakpoint where we kind of come to the mobile breakpoint we decrease the button size so again very contextual how much space do you need in your design it is all depending on what you're trying to achieve what kinds of elements you're using how much text is it Etc and what you've seen here is that we typically have two to three break points so the full scale thing here desktop then we have something that happens for tablet and then typically something that happens or break point that happens for mobile now let's jump into figma and see how we can use these learnings to create some designs ourselves by the way if you want to follow along here you can just grab the figma file in the description below now what you see on the canvas here is a design that is made into different breakpoints I usually start with desktop because I feel that that's the viewport where you're going to have the most things happening you're going to have the most animations the most complex illustrations some of these things might disappear on mobile so that's why I usually do the biggest design first and then I work my way down now let's look into these specific cases let's start with desktop when it comes to column grids we usually use the 1284 standard so 12 columns for desktop 8 columns for tablet or breakpoint one and then four columns for mobile or breakpoint two as I call it and these different column grids have some different properties depending on the breakpoint so if we click into desktop here we go to the right sidebar we see layout grid I click on this and I chosen columns the thing you get when you just click plus here if you haven't created one you're going to get grid so we go from grid to column in here you can see the count is 12. the type is stretch and we're going to get into this when we look at the widescreen the difference between stretch and the other Alternatives the margin here is set to 167 this is an arbitrary number it all depends on the container size that we want to have for our layout we'll get to that as well the gutter size is going to be the distance between your columns so the white space here if we go to tablet you can see we have a count of eight we have type stretch we have margin 32 pixels and we have a gutter of 24 pixels so the gutter decreases here and that's something you can have as a general rule the smaller the screen size the smaller the margin is going to be and the smaller the gutter is going to be if we go to break point number two and this is where we go into Mobile design you can see if we click in here that we have four columns we have a margin of 24 pixels instead of 32 and we have a gutter of 16 pixels so this decreases for mobile as well and the narrow one here is just for us to test the edge case like what happens to our design in the smallest of cases so we want to make sure that it doesn't look wonky when it's on Tiny mobile screens now with that context let's jump back just to White here for a second because for white we're using instead of stretch here we're using Center and you could use Center for desktop as well because usually at 1440 pixels here which is like just the typical desktop size it's actually if you hit a and you go to desktop in figma desktop is 1440 pixels in width and the same goes for the breakpoint here it's arbitrary but I usually go for a middle ground around a thousand pixels and when it comes to mobile this also depends on how far down can you go before the layout breaks so maybe you have to have your second breakpoint at 800 or you can go all the way down to 400 before you need to actually change the layout let's go back to White here for a second so if we look here we go into it we see that it's Center and this is because when you use Center you actually cap the container size or the column grid size when you have stretch it stretches with your frame so just because we have a screen this big doesn't mean that we want to utilize all the horizontal spacing because if this would stretch all the way to the edges then the text would be very unreadable because you want to cap text to a certain width for it to be as readable as possible and things would just be too spread out so you want to cap it in a container like this now with this knowledge let's jump over and start creating stuff like I mentioned before I usually start with desktop so let's start there I'll click on the frame I'll hit layout grid change it to columns do 12 in terms of count and I'll add a little rectangle here set it to 1140 and Center it and then I'll map this layout grid according to that rectangle so 150 seems to be the number here I'll change the gutter to be 30. and this is just an arbitrary number you choose depending on your design what you need now let's move down here and grab this let's take this container with these two and let's put them onto our canvas so the text element and this image now we can remove this depending on what you want to achieve here you can go different routes so in this case for the sake of the tutorial let's say we want both of these to adhere to our column grid like I mentioned when we talked about real websites in some cases you might want something to be so for example this text you might want that to be set in a fixed width like have a Max width or a Min width or just width and the image here should be the thing responsive when we decrease the size of the frame or the browser in this case let's say that both of them are going to adhere to the column grid so I'll take this and I'll just increase the size a bit I'll make sure that everything within this container is set to fill so fill fill this doesn't matter we want this to be cut off so maybe we want to have this fixed so that's fine but everything else should be set to fill and the outer container should be set to fixed but our constraint settings should say left and right because if we set that to left and right and now we start decreasing or increasing the size you can see how the container is adhering to our column grid so no matter how much we stretch it it's gonna follow so for the image here as well it should be set to left and right now if we decrease the size it adheres to the column grid nice so this is going to be how it behaves before it reaches breakpoint one with that set let's move these over to break point one and let's go in here and first off set up the column layout like I said twelve eight four so this is going to be eight we're going to set the margin to be 32 that's a pretty typical margin for a tablet or a breakpoint one maybe the gutter could be 24. and let's look at the example we had so here we have it centered and here we have a difference you can see that the width here is set to 1550 and it goes outside of the columns so this is going to be set to a Max width which means that this shouldn't be left and right anymore and shouldn't be adhering to the columns let's increase the size a bit let's move this down I'll change the width of this to 1550 I'll Center it I'll Center all of the text in here as well and these items should also be centered this let's see here yeah this should be one row instead of two rows so I'll just say hug contents the image this image seems like it's going to be adhering to the column grid right so I'll change the size of this make it go all the way there maybe we'll set a fixed height of 450. and it can still be left and right here this should not be left and right like I said so this text box here so I'll set it to be aligned to the top and Center this one should be left and right and top is fine we'll set a distance Maybe let's say 72 pixels decrease the size a bit like that now if we shrink it it behaves in the way that we want awesome so that's breakpoint one breakpoint number two let me copy it over again the content here increase the size a bit so what happens here okay so now this seems to be taking up the full width so it's adhering to the columns at this breakpoint this doesn't change really maybe the sizing changes but other than that I think we're pretty much doing the same thing so let's first add a layup grid say columns count four the margin as I said before decreases the lower we go so we had 32 let's say 24. and the gutter was 24 so let's say 16 here I'll increase the width so that it covers all of the columns and we'll change this to be left and right and we'll set it to be top still works this image shrinks a bit closer 56 pixels Maybe something like that decrease it in height change that height of the whole entire thing and now if we just drag it up yep that works now you can see that the distance here becomes huge if we would want them to stay together at a fixed interval or a fixed pixel distance we could add another layout set this Auto layout to be left and right first we need to do that set it to left and right now they're going to maintain this distance so if I drag it out here you can see that the distance between our elements is maintained and like I said with the narrow screen it's just a replica that is gonna be there for us to make sure that it works for smaller devices one thing that I forgot to do is I forgot to decrease the size of the text and maybe we want to decrease the size of the buttons as well and the text within the buttons maybe something like that because that's usually what happens when you go from desktop to tablet you can either go down in sizes there you don't have to but usually when you go from tablet to mobile that's when you really have to consider going down in sizes at least in terms of text and buttons and input fields and elements like that because they might be very big on desktop and they're not really going to fit for a small narrow screen like this in that case so I'll bring this over here the width take this break point here let's copy the column grid and let's decrease it with a bit more so that it's aligned properly and wait a second I forgot to do something here I think yeah so this is the same layout in code what we could see is that once we get to a point where this doesn't fit anymore then we're going to wrap the content which means that this text is going to be put underneath the button now figma doesn't allow you to do this but let's imagine it's code so it does that automatically like that and this text is going to have to be fill container instead of hug and we're going to Center the text as well all right so now with this in mind let's go back to the full Pages here and see if we can make sense of how everything is done and see if we can find these common patterns that we're using and if it's consistent across the board so let's start with this one we have a feature section with three features each of them take up four columns so I guess they're gonna be adhering to the column layout in this case if we go here they take up the full width so they take up the eight columns in this case but they don't adhere to the column layouts per se or the actual columns because 8 is not divisible by three so in this case then we have to make the container take up the full space and these will take up the space they can within the container if we go here we change to a vertical stacking layout instead and the same for this narrow screen which makes sense because they're the same narrow is just taking breakpoint 2 and giving us an edge case a visualization of what it looks like in kind of the worst case back to this section we have an image that adheres to the column layout it takes up six columns then we have a column in spacing and five columns for this text container now let's see what happens when we go down a notch so here we have the second breakpoint and here we vertically align stuff so we put the image in the top which I guess means that this image is the most important thing or the most attention grabbing thing that we want to show first we actually horizontally align or stack the text here so the title takes up three columns then we have one column in space and then we have the rest of the text being right aligned here taking up four columns so I guess these would also be adhering to the column system because they take up the exact space of the columns now for the next one we go back to vertically stacking the text but the rest of the layout looks the same and of course the same for narrow in this case if we go to this one with the cards the testimonial cards they each take up four columns so I'm guessing they'll be adhering to the column grid if we go here they don't take up four columns each because it's now eight columns it's not divisible by three once again so we have the container take up the full width and then these are spaced to take up whatever width they can and when we come to the second breakpoint that's where something happens now we have some kind of Carousel instead so we might even have set a width for the card so this is maybe going to be a Max width of 325 pixels and it's going to be the same for each of these cards and the same thing here now in this case we might want to add some things like some Carousel dot indicators or something because it's kind of hard to see uh this card let's jump back to this section Okay so we have a fixed width so this is not adhering to the column layout let's see what happens here same thing same Max width and here it actually changes to take up the full space instead we could still have a Max width at this point but I think if we're going to have that we have to communicate that to developers looking at our files this is the easy way to handle it because now from this breakpoint it's just gonna be adhering to the column layer all the way down to super small sizes and the last one would be the footer which also looks to be adhering to this column layout so the brand here is taking up two columns each of these is taking up two columns each and then we have this subscribe container that takes up four columns now in this layout we once again it's eight so we could divide it by four I guess because we have four elements here but instead we have this container taking up four sorry five columns and this one taking up three columns so when we would decrease in size here this would shrink and this would shrink so it would shrink accordingly and the brand being on top instead now here something happens this gets its own row so this link container gets its own row and the subscription or subscribe container gets its own row we can see that this is not adhering to the column layout which means that we then have some form of a Max or Min width that we're playing around with here and in this case yeah so this has to be a Max width because in this case it's taking up 100 of the width now this isn't really possible to recreate in figma but when we decrease the size of our browser or we just have a smaller device and this is set to Max width then once we creep up on this subscribe input field then it's gonna adhere to the full section with instead so then it would look like this now if you're interested in more figma tutorials like this leave a comment below and let us know see you soon [Music] thank you foreign [Music]

Channel: Flux Academy

Views: 59,265

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: FjuHXhwr5Q8

Length: 26min 29sec (1589 seconds)

Published: Fri Oct 07 2022