Figma Web Design Tutorial: Step-by-Step Video Channel Web Design

Hey, I’m Hunter from Skillthrive, andwelcome to the first reading in this four-part route, where you’ll design andcode a video path shoring page. In this lesson you will design the videochannel exerting Figma, a free web-based prototyping application. Once you’re done, you’ll move on to writing the HTML in exercise 2. You’ll too find all thelessons associated for this course in the specific characteristics. Feel free to follow alongand write the code as we go, but you are eligible to download the final system and designon skillthrive.com for a small price. This assistance me, as a developer, to continue makingdesign and development routes for you to watch at no rate. With that out of theway, let’s get started.So, the first thing we want to do, before we jump in andactually start designing this, is talk about the tool that we’re going to be usingin this video, and that is Figma. Now, you might have heard of Figma. It’sdefinitely something that’s been blowing up in the past year or so, and moredesigners and specially teams ought to have switching from, you are familiar with, Sketch intoFigma, because of the collaboration that Figma brings to the table. And you cansee here, in this video, that you can see multiple people are working on a projectin real time together.And they’re able to do this because this is web-based.What that makes is that, instead of, you are familiar with, having a programthat is specifically written for, you are familiar with, Windows or Mac, it’s somethingthat’s written for the web. So, whether you’re using Mozilla or you’re usingSafari or Chrome, it’s all going to be able to work within that, you are familiar with, thatbrowser, as long as you have internet. What’s really cool about that is thateverything, kind of, just stays in sync. Your modes, the changes, everything just, various kinds of, feels like it’s moving along and remaining together a little bitbetter than with other implements. Like with Sketch, where it, kind of, feels likeyou’re a little separated from your crew, even though there’s still thosecollaboration and sync tools. Another reason it’s really useful is because itis web-based.You can access it from any computer, but they do have, you are familiar with, somedesktop apps for Mac on Windows. Now, don’t expect these to be as fast and, kind of, accept as Sketch would,’ motive Sketch is specifically uttered for Mac, but it’s still really fast for what it is. You “re going to tell” sometimes, when youopen up the project, it takes a little bit to load, but that’s normal and this is, kindof, maybe one of the cons of Figma, but it’s still a great tool. And lastly, the real big pro that I fantasize a good deal of you guys will care about is that it’sfree, so you can get started without paying anything and actually start to, kindof, being played with some designing and prototyping and things like that.Allright, so, once you, you are familiar with, sign up for Figma, and if you demand anddownload the Mac or Windows app, let’s go ahead and open up Figma here.You can see that I have this pattern, and this is a design that I induced when I wasjust going through and meaning such courses. And I’m going to refer back tothis design when I’m actually coding and using, you know, specific pigments andwidths and altitudes and stuff like that and exerting it to the design and thecode. So, I to be expected that, various kinds of, ties everything together for you guys whomight not know, like, “Hey, I made, you are familiar with, Figma or Sketch actually spews outthe system for me”. And that’s not really what “its for”. It’s really for, youknow, originating the blueprint of your website, so then you can go back andrefer to things and, kind of, you know, prototype really quickly and constitute thosechanges and, various kinds of, be seen to what extent they look, before expend the time and thedeveloper’s time to write or change things and so on and so forth.All right, so, the first thing we want to do is just go ahead and create a new artboard here.So, I’m going to affected A on my keyboard, just like you would in Sketch. You’ll see thatyou have some different out-of-the-box styles here. And under Desktop there’siMac, and I’m just going to select that. And this is the size that we’re going to beusing today in our track. And then I’m just going to drag it over here by thisone, and then I’m going to zoom in. And I’m going to start establishing the heroimage now. To start, I’m going to hit R on my keyboard to bring up the Rectangletool and then precisely drag out to make a rectangle that’s full-width, and I’mgoing to make it 370 pixels tall.And then what I can do is goahead and use this rectangle as a cover-up on an likenes. Now, most likely, if you’reactually appointing this for your own, you are familiar with, videos, you probably have thumbnailsand likeness that you want to use. But what I did for coming some dummy videos anddummy idols is, I went to a website announced pexels.com and then/ videos, and these are free stock videos, and then I really tookscreenshots from them.So, let’s say, for instance, this video grab your seeing andyou wanted to use it. All I did was click on Free Download and then, formerly itdownloaded, I went to where it is, I opened it up, originated it fullscreen and thenI did Shift-Control, Command-4, which is a Mac command that allows you to take ascreenshot like this. It paste it to your clipboard, and then I can go back inFigma and time paste that in. So, I’ll take a little bit to paste it.There we go.And once it’s pasted in, I can just goahead and resize this. So, view Shift-2, so you resize it proportionally. So, Iwant to make it the full-width. Then I’m going to come in and select the epitome inthe rectangle, and then click here to make a mask. And you can see that that isnow masked out based on the size of that rectangle, and you can always come in andchange the, you are familiar with, ranking of the epitome, so something like that. All liberty, so, once you have that done, what you want to do is create an overlay to, kindof, precisely darkened the image a little bit.And this is going to allow the verse toreally pop out on your representation. So, to do that, you can just come back and selectthe image. And I’m going to come into Fill and click here on this plus. Right nowit’s set to Linear, but I’m going to switch that to Solid. And I’m going to go ahead andpick a coloring here, and I’m going to come back to my original one as a reference, merely to see, like, what the hex code was. And you can see here, on thebackground, I have this hex code now. I’m just going to facsimile that, then come back to this image, into the Fill and then paste that here, on thishex code.And then what we can do is just go ahead and simply descend this down. So, justdrop it down to 50%. And there we go, that’s everything it is necessary to do as faras, you know, obliging that overlay here in Figma. Now, the next thing I’m going to do iscreate these columns right here, which we’re going to be using for alignmentand sizing, and it’s also going to be referenced back when we’re actuallywriting the system, because we’re going to be using CSS grid. And what’s cool aboutCSS grid is, I can go through and actually say, “Hey, go ahead and compose 12 equal lines like this, room them out by 20 pixels.” And when I’m creating thesevideos for, like, desktop, as far as the sizing, I say, “Hey, on this image makesure you cover three articles, just like you did here in this design.” And then onsmaller screens you could, you are familiar with, modify that to cover, like, six columns.And then on portable, you can make it 12 pillars which would be full-width.So, that will make a little more sense here, formerly we actually start writingthe CSS for it, but just know that this is something that’s very typical whenyou’re aim something, because you’re, various kinds of, previously going through andplanning how this are really be, various kinds of, coded and laid down by, formerly you startwriting the code.All privilege, so, with that said, let’s go ahead and procreate thelayout. So, you really cause the, hand-picked the Artboard, and over here you’ll see thisoption called Layout Grid. Now, if you click on it, it’s just going to create, you are familiar with, this grid out of the box, but you can go ahead and modify that here, bycoming up here and I have a saved style. So, I’m going to select my saved form, andthen I’m going to come in and talk about some of the defines here.You cansee here that I have the Columns set to 12. I picked a dye that I like and I threw the opacity a little, and I adjusted theType to Stretch and I provided the Margin to 60. So, on the edges right here, there’s 60 pixels, and in the gutter between all the pieces is 20. Now, these actualvalues, I’m going to be coming back and using specific the ditch and thecount I’m going to be using here in CSS, when I’m writing the grids with CSSgrid.Now, so, that’s mostly everything you want to do. So, formerly you do that, youcan go ahead and save it to your actual bed forms, excuse me, your grid forms. Then, formerly you come back and do that, you are familiar with, multiple timesfor different projects, you just come back and precisely adopt that wording, insteadof actually having to, you are familiar with, recreate it every single time. And to do that, youliterally can only click on now and create a brand-new grid form, once you havethose settings situated for your activity. All right, so , now that we have the grid, I’mgoing to go ahead and merely bring down this artboard, so it’s the same summit, so1222 pixels. And the next thing I’m going to do is justfocus on the entitlement, on the text here for the protagonist idol. So, let’s go ahead andzoom in here, and I’m going to hit T on my keyboard to bring up the Text tool.Then I’m going to click and then type in’ Hero Title’.Now, patently, the styling is off, so let’s go ahead and only adopt the text.I’m going to come in and keep it on Open Sans, but change it to Regular. And thenI’m going to change it now to, I think it was, let me go back, 48. So, let’s changeit to 48 pixels. So, let’s drop down to 48, the authorities concerned will then convert … So, right now, see howit’s all ceilings? Well, that’s actually an advanced alternative here in Type.You cansee under Transform that I have Uppercase selected, so only deselect that, and I’ll go back to Regular Case. And then we can come into the Colors here.I’m going to do a hex system of #F4F4F4. And there “theres going”, that’s the design forour title. Now, I’m going to make sure that this is left-aligned to this column, so it’s going to snap to the left of this tower. Let’s just go ahead and justdrag this out and make it bigger, time in case you required a longer title, you don’twant it to wrap down to anything lower than this one single row. All freedom, the next I’m going to do is just focus on the subtitle, and this could be thedescription of your direct. So, again, I’m going to smacked T on my keyboard, and I’m justgoing to type in some filler textbook right here, but you might wonder, “Hey, whatis, you know, what is Lorem Ipsum? ” If you don’t know what that is, essentiallyall it is, is filler verse, it’s dummy text to, kind of, get the idea across ofwhat this pattern will look like, without having to really think about what you’regoing to write.And with, you know, implements like XDU or Sketch, there’s some plugins youcan use to get that filler text, but what I do in this case is, I can just go toChrome and there’s a website announced … So, if you type in loremipsum.io, andthis is literally precisely a generator for Lorem Ipsum, you can come through andselect, you are familiar with, how much you require and get paragraphs, you can picksentences, words and click Generate. Then it’ll generate that for you, and you justcopy and glue it. Now, this is what comes out from default.So, I’m just going tocopy this first decision here and then literally just come back to Figma, selectthis and then paste it in. Now, plainly, this is too big, so I’m going to resize thistext carton. So, let’s go and only resize this to, like, 570, right here in thiswidth panel. And you can see that’s going to resize to5 70. Then I’m going to select this and I’m going to keep it on Open Sans Regular.Let’s change this to, I thoughts, 18 and then change this color here to F4. Now I’mactually, instead of setting the hex code now, I’m going to come in and look at theDocument Colors. And these are colorings that Figma is moving, that I’m applying inthis project, and I can use and come back and reference these by literally justcoming and clicking it. And you can see that the F4 color is then applied. All right, so , now let’s go ahead and simply left-align this as well. And let’s move it, let’s see about, what I did for this one, 16. Let’s go and do this one 15, so it’s…I’mgoing to zoom in now, 15, ok, cool. So , now that is spaced 15, we can go ahead and now workon the’ Watch Now’ button. And again, that’s just going to be a rectangle, so let’s goand create a rectangle now. And the dimensions of the this rectangle is going to be 131 by39. So, let’s do 131 and then height of 39. You might be asking, “Hey, why are youdoing it this size? ” Essentially, it’s just because I think it appears good, onceI actually set the verse in, and I just adjusted the width to whatever my gaze thoughtlooked good.That’s mostly, you know, thethought process behind that. The next thing I’m going to do is go ahead andcreate a fill here. On this, we’re going to be using this dye, so this hexcode right here. And then let’s go and make sure that that is left-aligned aswell to that editorial. And then touched T again, so we can create the Call to Action text, and that’s going to be’ Watch Now ‘. And on this one we want, it’s set to OpenSans Bold, we want the length to be 14 and we want that color to be that off-whitehere, the F4. Then I’m just going to zoom in here and move this over until it’saligned. And a highway you can actually ensure that this is aligned is selectingthe Watch Now and then the rectangle. And then you can come up here and click hereto center this horizontally and then click here to center it vertically. Andnow that that is centered, we go ahead and merely radical them, so Command-G, and merely announce this’ Button’.All liberty, and then let’s go ahead and move thisabout 30 pixels. Roars! All claim, 30 pixels. And then let’s go ahead andselect these three pieces, Command-G and precisely call this, I don’t know, like,’ HeaderContent ‘. And this is just good practice, it should go through and groupthings that is advisable to grouped and rename them, so when you come back tothis or someone else comes to this, they know what they’re actually looking at.All liberty, and then we can go ahead and just, kind of, center that now, on ourheader. There we go. And then we can go ahead and exactly group all of these andjust summon this’ Header ‘. All right, so next stair, we’re going to go ahead and createthe playlist section.The first thing I want to do is just go ahead and changethe background coloring of this. And I’m going to select this artboard, I’m goingto come into the Fill now. And on this black, I have this hex system here, which isthe one that we used to support the overlay. There “theres going”. And then we can punched T tobring up the Text tool, and I’m just going to type something now calledSection Title. We’ll come in and adopt that, change the complexion, so we can see it.And the length here is going to be 18, so let’s come back and change this to 18. It’s going to be Open Sans and Bold.We’re going to make sure that theTransform Uppercase is also adopted. Then let’s go ahead and left-align thisto this column, and let’s do 30 pixels. Awesome! All privilege, so, the next thing wewant to do is create these videos. So, let’s go ahead, and I’m going to, kind of, talk about the process of when I was creating this. You can clearly see that itexpands three rows, but what I did is, I require this to be a 16 by 9ratio epitome, and the reason that is, is because that’s the ratio the video is, atleast the standard size of video on the web, so 16 by 9. A specific sizefor oh 1920 by 1080, that is the size of a video that is 1080 p.So, what I did is, I time procreated a rectangle here, and then I resized it tothat specific width, so 1920 by 1080. And then I simply, you are familiar with, left-alignedthis and then came up to this edge here, supported Shift and then scaled it down untilit was three rows wide. So, right there you can see that snaps to that piece, and the size here is 275 by 155. And then we can, you are familiar with, with this still leftaligned, I can move it up about, let’s do 30 pixels. It looks like I could do a bit closerhere. I did 20 pixels, so let’s do 20 pixels, ok. What I’m going to do hereis essentially the same thing I did now, I’m going to use this rectangle as amask for one of the videos. Now, you remember I really went through and Idownloaded that video and I made a screenshot of it. And just to save sometime, I proceeded ahead and really once did that now. So, I’m just going to come inand imitation this image, select this and then paste it, move it here, it is therefore aligns andthen just move it over. Now, these are actually previously sized precisely forthat, but let’s say, for instance, your image is a little bigger, you can, youknow, you can use that rectangle as a mask and, various kinds of, cultivate it a little bit.So, let’s just go ahead and adopt the likenes in the rectangle, click here to cultivate it.And instead of it saying’ Mask Group ‘, let’s go ahead and bawl this’ Video 1 ‘, so we know this is the first video. And the last thing we want to do for thislittle thumbnail design is bring in the actual little Play button. And this isactually coming from Font Awesome, which we’re going to be importing into ourproject when we’re writing the HTML and CSS, but there’s actually a really coolwebsite that proselytizes, you are familiar with, Font Awesome icons into PNGs or SVGs, andthe website is fa2png. com, excuse me,. io.What you can do is, you cantype in the names of the Font Awesome icon you want. So, let’s do Play, and we can see here we get the Play buttons, and the one I’m going to use isthis Play circle. Then we can change the dye to F4, the whole way across, and wewant it to be transparent. 255 pixels is a little too big, but that’s fine, we can goahead and simply generate that and then resize it in Figma, and then wecan download that.So, formerly that downloads, we can open it up. And literally, all wehave to do is just drag this in now. And then let’s go ahead and resize this to6 0. So, I want to make sure that this is checked off, so when I resize that is something that 60, it’s going to magnitude proportionally on the meridian. So, you can see that theheight’s changed. Then I can center this here, on this image. And then let’s goahead and time change this from this really long deed to simply’ Play ‘. And thenwe’ll drop this into Video 1. And now, the next thing we want to do is selectVideo 1. I’m going to hold Alt or Option and then just drag to the right toduplicate that. And let’s go ahead and do that for all the videos. And on the nextwhere we want them to be 20 pixels from the one above it. Then let’s go and justzoom in and make sure that everything is nice and aligned. So, let’s make surethat that’s 20 and that they’re on, they encompass through columns.You can see this one’sa little messed up. All title, so, that ogles good.And now what I’m going to do is, I’m going to come through and only changeall these epitomes. Now, actually, before I do that, let’s go ahead and justgroup all of these and rename them, so they’re nice and coordinated. So, this one’sgoing to be’ Video 2 ‘. And I’m just going to accelerated through this, because it’spretty self-explanatory, but I do want you to see the process, so I’m just going todo that right now. All claim, once I rename that, I can goahead and adopt the Header and then all the videos now, Command-G and then justcall this’ Playlist 1 ‘. And then I can hold Alt or Option and drag down andthen move that about 30 pixels from this Playlist. And then what we can do is, we just go ahead and rename this’ Playlist’ to’ Playlist 2 ‘, expand this and go aheadand merely start, you know, putting different multitudes on these as well.And immediately we did that, we can come intoeach individual video and expand this and then replace the portrait. So, again, I’mjust going to, various kinds of, breeze through this, so you guys don’t have to watch itin real hour. And there’s just one more thing we needto do in order to, you know, make sure that we’re ready to move on to the HTMLand CSS, and that is to export the idols from such projects. Now, you might alreadyhave your thumbnails previously ready and resized and good to go, but let’s say, forinstance, that you’ll give this and you, you are familiar with, you cultivated your likeness andeverything is here in this Figma file.So, how do you get it out of this Figmafile? So, let’s come into this Playlist, and we’ll talk about how to doit here, and then you can do the same thing for the second playlist. Now, whatwe want to export are these videos. We actually don’t want the Play buttonin, so I’m going to come in and really, you know, switch off the visibility for all ofthese. Once we did that, I’m going to come in andselect the eight videos. Then I’m going to come over to Export, I’m going toexport them as JPG. And then I’m going to change the export width to 2X, andthat’s just going to give us a little more room when we need to resizethese personas to be, like, six articles or twelve pillars. And then we can say ,’ Export eight beds ‘, and then we can pick where we want to export them.So, I’lljust do them in my Desktop, create a New Folder and merely call this, like,’ Images ‘, and then click on Create and click on Save. So, once you do that for all of yourimages, you’ll see here, you are familiar with, you have all of your JPGs good to go. Now, there’sone more step that you can do and that’s to optimize these images. The toolthat I like to use when optimizing my portraits is a tool announced ImageOptim.So, this is a free tool to optimize your images. So, you click hereto download it free of charge. And once you do that, I like to just go ahead and selectthe idols, right-click, Open With and then ImageOptim. You’ll see here thatit’ll run through and optimize it and then tell you how much, you know, how muchspace you actually saved here for your images.So, that’s just a good pattern tomake sure that you’re giving your useds on the web the most optimizedversion of your epitome. And there “theres going”, that’s everything for the designpart of this tutorial. In the next one, we’re going to kick off the HTML. So, I’llsee you in that video !.

digital marketing

As found on YouTube

Share this article

Leave a comment