Learn UI design in 25 minutes - Figma tutorial

the time has finally come today you make your first screen in figma in this video I'll talk about the basics of Sigma and I'll try to design a random app and as I do this I'll talk about all the features of pigma that you need to get started with in 30 minutes you're gonna be in designing so this is an exciting video let's get started to give you a little background about what pigment is it was a screen design tool it's an interface design tool for Mac for Windows so it's web-based it also has apps that you can use on your computer but what you can do is you can create screens you can prototype can collaborate with themes you can leave comments you can share feedback and you can even use it for handoff when you're working with developers so check this out this is what it is I talked about this in a previous video but the reason I'm talking about Sigma in this course rather than something like sketch Adobe XD or Photoshop is that Sigma is like compared to sketch it's at parity and has more features in fact than schedulers it works on all platforms and design themes all over the world or a switch in Africa so learning Sigma you're ahead of the curve the reason I'm doing figma over X D is X T is just not ready for real products so as of making this video HD is missing a lot of things that you will need to make a decently sized app so while you can definitely go check it out and you know learning any one of these tools sketch HD or figma makes it super easy to use the others because they're all pretty similar in some ways alright so let's get into it this is the interface when you open a new file in Sigma so what you can see is there's a panel on the left oh there's another panel on the right and in the center here you have an infinite campus this goes on for as long as you want when you open a file when you want to start dying the first thing you do is you create a frame now you can either do this or you can just press the f and what happens on the right here is it asks you what device you're designing for see what phones you got tablets desktop Apple watch paper is making something footprint and it even has a few templates for social eat them I'm just going to go ahead and choose the iPhone X it appears on the left here as well now I can change this to whatever name I want like a home screen for now I'm just gonna leave this as iPhone X alright see how Blanche can use here what do you do to get started now I'm gonna pick a random app to sort of design and in the process I'll show you what the different features Sigma is so I went to this site called app idea generator let's see let's shuffle a couple times cooking up discovering cities you come in and you say you wanna explore by cuisine maybe there's a map let's see a few more a calculator Notes app for online shopping ahead of recording meetings yeah this could work but not a calculator but just a app to record meetings okay ask you should do this let's give this a name what are we gonna call this app an app for recording meetings what I just did here is I pressed e and D is the type tool it's up here you can just click anywhere on the canvas and you can start typing it's gonna do that again what should we call this we need video this if you notice is happening outside the artboard these are just some notes I'm taking to get started so the first screen that I want to design is a splash screen this is when I first opened the app it shows me the logo and it says we don't maybe I'll call this one flash now what I normally do is I name my odd boat then I usually put a number the effort sort of shows the flow as well so let's just lay out what our screens are going to be and if you watch my previous video on design process this is not how it works this is not you just don't have a deceased art in the tool but the purpose of this video is just to explain sigmaz so I'm gonna do it this way typically you would start with some research to find other apps I do something similar you would start with the information architecture laying out what the app should feel like then you will do wireframe e you start drawing it on paper and only then would you come to the tool but I'm just gonna do it here for the purpose of this video have a splash screen let's skip logins for this second screen can be your my meetings this can be maybe a list of all the meetings are created and this should probably have a button which lets you create a new setting let's just start with this you click an artboard and now you are ready and when you do this you notice this right panel your changes this right panel in figma is where all of the editing happens this is what you will be using to create more stuff let's say I just wanted to create something really quick right now proud do is I go here use the rectangle tool you just are let's say I wanna draw an app bar on top here what side should this be you just want to keep it random for now but I will talk about how you figure things like that out now as I created that you notice there's a new layer that's been created so this panel on the left is actually the layers panel it holds all your frames and then within each frame it shows you what layer's you so let's say I wanna now add some texture let me go you see as I move this this rod shows me these red lines these are alignment lines that pick my users to show you where you're placing something this can be really useful when you're moving things around so I have maybe a list item here for me so I'm gonna wear maybe put something like that - text Design Review Monday let's say this is the name of the thing and you know at this point you might be wondering is this guy doing like this looks like but trust me I'm just I'm just laying stuff out so I know what to design once I get started so they can yesterday recorded yesterday and you see this thing I did ago what I did was duplicated in this live you either hold this down press the option or Alt key and just drag it out that duplicates it or you can do command D as well that duplicates it as well don't worry if you're thinking about what the shortcuts are if you just right here you can see all the shortcuts that you will so it's all good no need to feel intimidated like now all right so design review Monday maybe I recorded this yesterday and maybe it was a 24 minute meeting 24 12 ok and let's say this is my list ID so now what I'm gonna do is you see I'm gonna select these lives as I do that the relevant layer gets left on them I'm going to do a command T what come on G does is creates a group and this group contains the layers that I just like now what I'm gonna do is I'm gonna duplicate this and create two more right here we have this app it's looking pretty but hope you got some idea of Sigma now and I'm gonna remove the splash screen for now let you do this screen now won't add a status bar to the top if you've seen an iPhone exit at the status bar how do i how do you do that you're not gonna recreate it so the trick to that is you have templates that are used whether you're designing for Android or you're designing for iOS and these templates contain the standard elements that you might need to make an app all right so I've opened this up these screens here are fully editable like this is a massive massive dignified you see you have all these nine no need to be intimidated by this so the huge file and organize really really well you might have some good buddy for understanding it but I would suggest going into this and try and break down what's happening now to give you a little story the way I got started in design I would take apps naturally I start with website so I would take a website I would take a screenshot of it and now try recreating it in Photoshop and that's what we use back then so what I'm gonna do is you just saw what I did I went into this yeah I selected this frame I did a command and see come on me just copy paste this into my file I'm going to use this as reference so one of the first things I need is this status bar on the bottom and I'm just gonna copy and paste it onto my own artwork now you see it faced with someone sent them if I want to take it to the top I can either just drag it like this or another thing I can do is I can use these alignment options on the top this is what it does so clicking this left lines it to the left of your frame this is Center this is right and this is dog now what I'm going to do is this height I don't really know what it should be but I'm just gonna copy what this is this is a height of 120 I'm gonna do that now if I want to nudge this what I can do I can just use my keys my arrow keys or I can just use my number and change this style to something I don't know what I should change it to but this is not the best way to browse fonts if you're looking for points you know I'll cover this in a future video but monserrate Google calm is the best place you can easily browse fonts and you can also type in your word and see what it looks like what would I want to use barroom hi John so pigma by default loads all google fonts within here so which makes it very easy you don't really need to go your click this download and all that stuff all right so I'm gonna change this style now I make it to be 16 and 4 I'm gonna style this now this rectangular I want to style it to be a different color now of course I don't even know what my brand colors are gonna be this is just something I'm making up on this part maybe something like this I could change this text to white now you see what I'm doing here is I'm selecting layers and then I'm going on the right here and I'm manipulating their styles and a lot of UI design that's what it's about it's about knowing what styles to apply and developing an intuition for how you should style certain things this color picker here is something you will see very often you use it very often yours it might be on RGB but I use HSV values and I'll talk about this in a future video about picking colors you notice when I'm on it just be this numbers the only thing that changes when I do this saturation is the y-axis and saturation sorry sorry the x-axis and brightness is the wire that's where HSB sample hue saturation and white let's see younger and sort of like this seems interesting Apgar seems too big though I'm just gonna take a call make this ninety and how do I know this is good how do I know what this is actually going to look like on my phone so figma has something called Sigma middle I'll talk about that once we sort of designed this to see how you can figure out what your app looks like and real time see changes on your phone now these list items let me just align them your Sigma also has something where you can just use these handles to change the spacing between your items this is super useful and you are not going to find this in sketch or XD so firstly I want my app bar to be white let me see if I can pick up a white app bar from that look I'm sorry a white status bar that's what I want [Music] now what I want to these decide I want to be able to listen to them because they're old meeting items and I want to be able to create a new one when I need it so for creating what I'm gonna do is gonna bring a button at the bottom here for now I'll just keep it very should be looking so I can play my ideas out but just some sort of create action at the bottom now I think keep in mind that I'm doing this completely impromptu like I had no idea what I was going to design so I haven't had any time to plan it out this is just something I'm doing on the go and hoping it turns out alright okay so what I want the circle to be is actually a play icon when I tap it it just starts playing right there so what I'm gonna do is apply a fill to it now you know it's become white you let me change the background of my thing I can do that by clicking on this name here and going in the background so I wanted to be like a light gray you see you think hold a certain amount of grade it sort of blends with my background what I'm going to do is when I have nothing selected this background here applies to the whole camp I'm actually gonna change my canvas right now to dark mode what I mean by that is just changing the color I think the background is a little too dark in the night oh it's gonna be a play but the one I sort of triangle interest what I'm gonna do is I'm gonna use the shape tool I didn't explain this but the same way that we do rectangles we draw an ellipse you can draw any shape you want I select this polygon you're gonna draw a triangle I'm gonna use this angle thing to do so hated now I can either directly enter a value or I can just click this icon here and just turn it around - change the shape a little and I'm gonna apply some border radius to say maybe that's too much point five one point five is okay I'm just gonna visually use a line this one so now I want this text which is the name of the meeting I'm just gonna press P all these behind you in your recording it might seem like my Sigma is always lagging that's not really true with because I have recording going on and so I'm recording my face as well as this game my computer is just like overheating right now doing this on a image macro one thing you might notice is when I created this text layer it got placed into this group as you're designing it's always a good idea to keep an eye on your layers panel to make sure everything is sort of neat theory now if you noticed your this is called group through this is status bar this is obviously not good practice every once in a while it can help to just clean up your frames and the way you do this is up to bottom left to right so status bar on top then I have my tangled name maybe I want to create a group this name I'm just gonna come on select all of these and just either group selection or just use come on G so now I have this text and I need to style it I need to pick a typeface weight or the size and a bunch of other properties so for this I'm gonna be going with system font which is so I'm gonna change this maybe what size should I keep if you look at the guidelines for Android and iOS the minimum excise you should use is around 10 but better idea is to keep well I'm gonna keep this a little bit you know keep it maybe 14 and regular is fine actually I don't want this to be pure black I wanted to be like dark gray a style this I can't do now I won't make this the same blue as before so what I'm gonna do is use the color picker tool and say okay do and this I'm gonna I want to give it an outline so I'm going to use the stroke tool don't insane but I want this to be maybe a little more subtle maybe like a 10% opacity now in terms of hierarchy this is my title and this is for subtext to this so typically what you would do is this will be lower emphasis and mid ways you can do this is of course my size you can do this by weight or you can also do this by color so this is looking a little better but it's it's still pretty shitty now if you see I'm trying to figure out what my spacing should be so normally keep consistency it's a good idea to keep your spacing of multiple of a single number so I'm going to keep everything a multiple of a changing the spacing centers are lining it from the edge I want to keep the 16 we need our old version that we created go now I want to duplicate this and let's say I created a group turn I accidentally aligned that now just wasn't paying attention or maybe I just put it like this and I want to clean these up we ever do that I select these we use this thing that shows up and when I do that equal lines all of this that style this bottom think you're right now I'm gonna select the ellipse I want this to not be blue I want this to be something that stands out with blue I'm gonna use something closer to college we use a complementary color what complementary colors are I'm gonna cover it in the future but just to give you some basic idea when you look at a color wheel you have these colors sort of laid out or complementary colors are those that are opposite to each other and they usually go well together with blue I would want something in this range to be complementary to it I think this looks decent we wouldn't take this plus and delete I also want to give this yellow part in a bit of a shadow so I'm gonna go into effects the effects you can apply your a drop shadow there's an inner shadow which I don't need of course is a blur no changes to drop shadow and I'm gonna just sort of eyeball this we're going to talk about this in the lighting chapter I just want the shadow to be under the bottom so assuming that the light force is on top X gonna keep it to zero maybe four introduce the blower listen and make it a lighter color one thing you might have sort of realized as you watch me do this is I do a lot of just like guesswork right that's what it's might seem like so you might see me going in and changing something and then changing it back and it sort of feels indecisive now one of the things about design and this is a technique that you will need to you is knowing what is good range of possibilities so two things I'm going to talk about is firstly whenever you make changes it's good to maintain all your previous logs when you make a change that you think is going to change things a lot so what I did here is I duplicated this artboard and now I'm gonna try something which is going to take just this item right let's say how big can this be 18 is that too big I think it looks okay like I could have actually gone with 18 keep that distance 14 not bad like this looks pretty decent as well in fact I would say this looks kind of better than the previous one this one might be hard to read what I'm gonna do is I'm going to download the Sigma meadow app I'm gonna mirror this design on my phone to see what it looks like alright this is what it looks like and I don't think this is too bad like it looks pretty decent and this is the small size and I think the small size is too small as a designer you need to experiment with what is it the different possibilities that you can use so 18 is okay but what about 24 right this is to make like let's say this was a longer title this would overflow into two line what about 20 maybe this works maybe this gets too long one says once it goes into two line what about clinics smaller what about reverse size 14 now this is too small so this way every single thing that you do every single item try a lot of different styles and try to understand is this an acceptable time does it look good or does this look bad eventually you will start developing an intuition for but range of value so you you will be like typically for titles somewhere around 16 is good or when using colors something like this is good when using shadows this is a good practice and with this you develop you start developing your own rules so that the next time you do it it becomes much easier for you to do it because you already remember what worked last time one thing I'm going to do is I'm going to go in here and I'm also gonna create a state for when I start playing it's like a pause button I'm gonna hide the triangle go into reading and I'm just gonna hide the new and in case I need to bring it back later this is probably too tall to make this shorter the way I'm bringing these rows up is I'm pressing down the hold I'm also gonna do is when it's the selected state I'm gonna change this to blue and I'm gonna change this to a playback that probably not the best way to do it but though is going something to occur and maybe when I do this the whole item gets left so maybe a sort of area at the back when I move this layer in the right position I'm gonna make sure holding another Alt key let's keep it facing seven and eight and I'm gonna change this to be very subtle so just like that I wanna see what this looks like on my phone in the mirror this another cool effect that I think might be interesting is I'm going to like this I'm gonna add is the full effect when I playing this the circle has a ripple behind it that's what of all saints and the shows me was playing so I'm gonna just create a circle remove it into the right group now this is super important because your files can become a mess if you an are conscious of where things are being placed what I'm gonna do is I'm just going to create one of these [Music] I actually like that it looks like it flow behind with a button and looks kind of interesting you wanna make it a little subtle though let's see what that looks like those are the basics of Sigma with this knowledge you can go and get started with actually designing an app one of the things that helped me practice was I would take screenshots so let's say I really liked Pinterest and I wanted to take screenshot of this and see what makes it work what I would actually do I would try to recreate this design turn down the opacity of this to like ten you know back in school you would trace that stuff you were to find something and you try to copy a quiet race and that's technique that works with design as well and it's a great way to practice so find an app that you like just try recreating it in pigma I can see there's a search bar here and it's a rounded search bar let's see I'm gonna guess what this value is it oh yeah I think I'm gonna align that up to the pixel level then there's an icon job can I redraw this icon I'm gonna take a circle and put it here and now your goal with this should be to try indie creating it to your best ability because manipulating the tool that way gives you a lot of experience in understanding what does it capability what are the different things that are just possible [Music] in terms of icons you can of course draw custom icons but I would say to start off with just use eye concepts and you can of course google them or a lot of icons are included in the Google material design kit after this video after you've watched it go pick up an app that you like and try a bit creating it and once you have done this with a few apps and are comfortable doing it try applying this to a hypothetical app so go to app idea generator com find something that seems interesting and try designing a screen for it now I'm gonna share the link to this figma file in the comments if you actually want to go in and check it out and if you want feedback on this feel free to join the whatsapp group for this course there's a link in the description where you can fill out the form and I'll add you to it and discuss with other designers you can share screenshots you you're feeling proud of the work you've done and you can also ask me questions if something seems amiss to do that's all I'm going to talk about for this video thanks for watching hopefully you now have an idea of what Sigma is and today is when you design your first week [Music]

Channel: ABNUX

Views: 73,074

Keywords: ui, design, ux, creative, process, india, bangalore, product, inspiration, sources, dribbble, pyjama, profit, figma, tutorial, sketch, xd, adobe

Id: RKILkYOHRXk

Length: 25min 58sec (1558 seconds)

Published: Thu Nov 01 2018