you're here to learn figma because you want to design websites apps or some kind of digital Graphics well let's not waste any time go to figma doccom sign up for an account and you can start right away in the browser but it's better to download the desktop app click new design file and this light gray area in the middle is your canvas where our beautiful work's going to appear at the bottom we've got a toolbar you can move things around we'll come back to that the next options is our frames or sections we're going to do frame click and drag to make one let's undo that and use one of the presets click F to select frame again click desktop and it gives us a desktop website type frame the next items are the shapes you can draw any of these common shapes let's click ellipse click and drag to make an ellipse or hold shift and you'll get a perfect circle you can also go over to the properties panel on the right and type in the dimensions so let's do 104 pixels for our Circle we'll might use that later next is the pen tool if you want to draw more complex shapes or the pencil tool if you want to scribble next to that is text we just click anywhere and you can start typing let's type Smart Choice the reasons why will become more apparent later and this is just like any word processing software just make sure the things selected you can click on it in the canvas or you can go over to the layers panel on the left and click on the item there and it'll be selected and then let's change the size of the type up to 96 and the weight to both fold you should start with inter that's usually the default font on there and then we can change the letter spacing as well push up to make it bigger down to make it narrower minus 4 looks good and we can click anywhere on the canvas to deselect our text next item on the toolbar is the comments just click anywhere where you want to leave the comment uh type in some witty comment on the left we have the pages and the layers that we're using you can add multiple pages and all the layers appear here for anything that you create and as I said before you can click directly onto the layer to select something so I select the desktop that way let's first of all with the desktop selected change the fill color but we're going to go back to the hex and I'm going to type in a reference here 171 52d that gives me this dark purple or you can go to a gradient that's the next option you can also fill it with an image or with a video in the background let's go back to gradient let's change the second one to a different color 532 BDC now we can click and drag our gradient around by clicking on these white solid circles that are next to the color on each part of our gradient you can add more stops to this but let's start with something like this now click on our text again on the canvas and we're going to change the fill here I'm going to type in a value here you can do it directly F9 d a d a 100% for this light pink so this pink I'm going to make a style of this so I click plus I'm going to type in the name Pink and then I can reuse this anywhere I want on my design so you can drag this around to move it that's one way to do things but you can use these position tools so align it all the way to the left or to the top for now let's do the horizontal Center and the vertical middle if you want to align things accurately you can also use a grid this is a square grid so if we change that to 120 pixels we change the opacity of the color of the grid line so we can actually see them in fact red on this isn't great so maybe we'll use this kind of greeny yellow color but more often and if it's on the web you're going to be using something like columns like a 12 column grid you can set the margins and the outer The Gutter The Space Between each column change again the level of the opacity and this helps you align your objects consistently let's get rid of that cuz we don't need this for this quick demo you can just press shift and G to show or hide it zoom out I'm going to hold down alt as I click and drag to make another one of these canvases delete that another way to do it is just copy and paste paste crl c contrl v or command C command v as I'm using here on the Mac now we have two desktop canvases I'm going to uh frame sorry I'm going to edit this first one and type the word flux I'm going to align it again to the center now to scale this we can also use this tool scale let go and select it at the bottom the shortcuts K and if I hold down alt as option as I'm draging I can scale from the center so I'm going to make this just go off the edge of the uh frame to the move tool and just just slightly tighten up that type a bit and look if you drag it like this it won't work command Z so you need to be make sure you're on the scale tool when you're scaling the objects that's definitely one thing to be aware of in figma let's move this comment out of the way sh shift command K to import an image or you can just copy and paste the image or you can just drag it from finder from a folder on your computer so now I've got that in hand I'm going to click and drag it out you can see it drags it with a sort of messing with the aspect ratio so if we hold down shift that'll just make sure it maintains the aspect ratio of the image now you can zoom in and out you probably see me moving around by pressing command plus or command minus you can also press press Zed and click and drag to zoom so now I'm going to change the size of this image click on the image I can type into the width 1440 which is the same as our desktop and again I can align this to wherever I want I'm going to align it to the center you can see it's covering over everything right now at the moment what I want to do is use that type as a mask so I'm going to select both layers right click on them and click users mask hey Presto the image is masked within the text and because this is a mask I can move things like if I click K again and scale the type it carries on scaling so I'll just do command Zed if you click on the image Again by selecting it in the layers panel on the left you can have some basic image editing right within figma without having to go to an image editing program so we can mess it with exposure contrast saturation tin highlights Shadows all this kind of thing to get that how we want another way to transform the image is to use a blend mode so I'm going to add another fill in here and for the color I'm going to use that second purple that we used in our gradient the lighter one I'm going to select that and I'm going to go to this icon for blending modes and I'm going to change the blending mode to color so now the whole thing has this purple color overlay onto it okay that's that's the basics but you can do almost all of this in any design program even PowerPoint let me show you what figma can do press T and then we're going to type learn figma if your type has been changed we're going back to into bold 96 minus 4 on the letter spacing to get this to look exactly the same as mine I'm just going to click on it and drag it over close to my circle then I'm going to click and drag to select both then I'm going to press shift a and this puts these not only in a frame but using Auto layout and this is one of the really powerful things about figma that we can use Auto layout to arrange things uh according to the the rules and the spacing that we set in the properties panel I'm going to put a stroke around it of one point just so we can see what we're actually working with I'm holding down Zed there just to zoom in let's go back to 100% I'm also going to add a fill to this of white now let's change it to the pink that we've got saved let's change the color of this ellipse actually to this dark purple and this type also to dark purple let's save this dark purple cuz we're reusing it as a style and click on the button so let's adjust the space between these items we can click and drag to do this to see what it looks like visually and I think somewhere around 80 we'll be good then for our left and right padding I'm going to set that as 80 as well and for the top and bottom padding we can drag that out see what feels right I think it's going to be a little bit less 48 looks good click and drag this button to move it to the side a little bit now and we've not changed the color of our stroke let's also make that the dark purple that within our libraries and let's change the size of this stroke to 10 that's the line around the edge the Border you might call it eight looks enough so at the moment the height is set to hug so if we make these Corners uh rounded to larger than the height of this whole frame it will turn the whole thing into a a pill shape I'm just going to finesse the padding a little bit if we bring that down to 60 on the right it makes that Circle fit nicer on the right hand side of the button so your setting should be the same as mine now and you can just copy them if they're not let's make another one of these buttons just hold out and then click and drag on the bottom one I'm going to double click on its name actually on the canvas and change that to button hover that can be a hover State and then click back onto the top button and I'm actually going to change the The Fill type in D FF c7d and we have this lime yellowy greeny kind of color click and drag on on the canvas around both buttons to select them both then click on the down arrow next to the component symbol and we we're actually going to create a component set now components are things that you can reuse in your design and also used to prototype so we have a component set here now with the button and the button hover what I'm going to do is I'm going to click on button and then I'm going to to prototype Tab and then click on interactions then select while hovering and the action is going to be that we're going to change to button hover so while we hover over it's going to change from button to button hover and we can choose the animation for this let's dissolve it with an ease out duration of 300 milliseconds just basically means it'll have a nice little fade on it you'll see that in a moment when we put this all together so if you click on the assets tab here you can see that we have this now as a component this button so we can click and drag that onto our desktop one canvas and uh oh what's going on here it's being masked so we need to select the two items originally in the mask and just group them by pressing command G hey Presto we can see our button now let's call this background component one click on that we can align it again to the left or the bottom let's go to the middle and middle that looks pretty pretty good if you hold down spacebar you can use the hand tool to just drag around your canvas and that's what I'm doing there so let's prototype this thing so if we click on the button then just click on the Prototype menu you can see there's a little Plus on the edge if we just click and drag that over to this desktop it will give some options here so yes on click we want to navigate to this other frame desktop 2 and that's going to dissolve as well we can play this flow now to see how it works let's make it full screen so you can actually see it hover over the button yep we get that nice hover transition to the pink click on it and we navigate to our next page you've made something the last things you might want to do is share this figma is very collaborative so you can share this with colleagues you can share it with clients and choose the access that people can have whether it's just to view or to edit and comment on it you may also might want to export these as Stills so if you click on export When selecting any frame you can select the options like at 1X scale we're going to have a JPEG at 2x scale we might want a PNG you can also do scalable vector graphics or PDFs then click export and save that somewhere on your computer to take the next steps in learning figma follow along with our long form tutorials here on the flux Academy Channel until next time happy designing