Master Figma UI Design in 15 Minutes | This Tutorial Is For You!

are you ready to unlock the secrets of creating captivating UI ux designs for your website app or any other design project well you've come to the right place today I'm going to show you an incredible online tool called figma that will make your designing process super easy the best part you don't need any prior design experience you can design anything you want from stunning websites to eye-catching app interfaces figma offers seamless collaboration allowing multiple people to work on your design at the same time you can also get feedback from them it even has a mobile companion app so you can preview designs on your phone oh did I mention the best part figma is completely free to use it's a designer's dream come true throughout this video we're gonna break down the entire process step by step so you don't miss out a single detail I'm Brian from website Learners and let's get started first we'll create an account on figma so just click the link below this video and click get started and you will get this page now you can sign up with Google or you can enter your details here I'm going to sign up with my Google account so let's click continue Google then select your Google account fill up these details and click next now if you want you can also invite your collaborators or you can click here then you can answer these questions one by one or you can just skip them I'm gonna skip them then click Start for free now click here and it'll take you to the figma dashboard okay so now we have successfully created an account on figma to begin our design Journey first we will see how to create a UI design for our website to do that let's click on design file then it will take you to this editing area where you can create designs using these tools okay to start creating a website design we need to select a frame so just click here and you will get different frames to choose from since we are creating a design for our website let's click desktop now here you can choose the one you want I'm going to choose this and as you can see we have got the frame now let's create sections for our website design so let's click here then create a section like this now to change its color click here and select the color you like next we need to add some text so just click here then click on the design and then you can start typing the content you want from here you can select a font and also change the size of the text in the same way you can add any text you want next let's add an image to do that just drag the image you want from your computer and drop it on the canvas and you can resize the image and place it where you want and it's done in the same way you can create sections and add content to create your website design now you know how you can create a UI design for your website next let's see how we can create a UI design for an app so let's click here and choose phone I'm gonna select iPhone 13 Mini and once you have the frame in the same way we designed a website you can use these tools to design your app now instead of creating a UI design from scratch if you want you can use templates to make the process more simple now to do that we are going to do three steps the first step is to choose a template for your design so to choose a template go back to files then click explore community so here search for a UI design template so let's say you want to create a design for your travel app so just search for travel app and you will get different templates to choose from now just select the one you like here you can see the preview of the design now if you want to use this design just click on get a copy and as you can see we have got the UI design here okay once you've got the UI design template here you can start editing the design so let's go to the Second Step which is to edit this UI design now Reddit the design all you have to do is just double click on the element and edit it first let's say you want to change the background image so just double click on it to select it then on the right side you will get these options to change your background image now to change the image just click here and you will get this pop-up now go to image and click choose now double click to select the image from your computer and as you can see the background image has changed in the same way you can change the image you want in your design now let's close this then change this text also by double clicking on it then enter the text and it will be changed now you can also change the text size and the font from here in the same way you can change any text you want okay next let's change the color of this button so they select it then click here and select the color you want since we have a dark background let's choose a brighter color to give it more contrast and make it more visible now if you have particular colors for your brand you can choose those colors for your design in the same way you can change the color of all these elements simply select them and change the color okay so now you know how you can change the colors of your design next let's see how you can add a brand logo to your design so all you have to do is just drag and drop the logo from your computer and it'll be added to your design you can resize it and make it fit to your design okay now you know how you can get a pre-made design for your travel app and then edit it to suit your needs next let's see how you can create a UI design from scratch so far we have created these two frames a home screen and a two now let's create another frame like this which is called two details so that when someone clicks on this image they will get the details about the package interesting right to create a UI design from scratch first we need to create a frame so let's click here and click on frame then select iPhone 13 Mini and as you can see the frame has been added here you can also give it a name by double clicking here and entering a name I am going to enter two details okay now let's see how to create a design like this here you can see it has an image content for the package and a button so first let's add an image just drag and drop an image from your computer then you can easily resize and place the image here now in this design you would have noticed that the image has nice round corners which looks pleasing to have a balanced look on your design so to make the corners of my image more rounded just click here then enter the radius at 65 and as you can see we have got the rounded curves at the corners so let's click here then you will get four options which represent the four corners of the elements now to hide these two curves at the top let's make these two numbers zero and as you can see the top curved corner has been changed okay in the same way you can make any element to rounded corners now let's add some content to our design like we did before we can use this text option and then add the content here okay so now we've added the image and the content to our design finally to add a button just copy this button then click on the design where you want to add it and then paste it as you can see we only got the button you can easily add the text to the button by using the text option okay so now we have successfully created a UI design from scratch once you have created a design next let's see how you can add a navigation icon to your design like this adding a navigation icon to your frame allows your visitors to go to the previous frame or the next frame to add a navigation icon we will have to install an icon plugin in figma so to install it click here go to plugins and search for icons you will get a lot of plugins to choose from so I am going to choose icon Scout and click run then click here click login and it will ask you to create an account on icons card so let's click here sign up with your Google account and your account will be created let's go back to figma click login with web then click Grant access and you will be logged into your account now if we go to figma you can see that the icon pack has been added and you can search and add any icon you want I'm gonna search for the back arrow and press enter select the one you want and click insert and the icon will be added to your design you can drag this icon and place it here I'm gonna move to here and done then you can also change its color to any color you want I am going to change it to White and ignorance adjust the opacity from here so this is how you can add an icon to your UI design okay when you're designing in figma you may need some illustrations for your design so there's this website called unraw which lets you download and use illustrations for free okay our UI design is ready so to preview it just click here then click on the play option and from here you can press the right and left arrow keys on your keyboard to see the other frames okay we can now go to the final step which is to create an interactive prototype of the app an interactive prototype serves as the test version of the design which will allow users to navigate through different frames and experience the app's design and functionality by interacting with it so to create a prototype select the element that you want your users to click on to proceed to the next frame in this design I want the user to get to the next frame when they click on this button so I'll select it and click prototype now if we move the mouse pointer to the button you can see that a small circle appears now click on the circle then drag and connect it to the next frame you can see that these two frames are connected right now once the frames are connected here you can see that we got a pop-up now if we click on this drop down you can see that we have got different options these are the options that you can use to get to the next frame by default the on click action is selected this means when someone clicks on this button it will take them to the next frame so I'm gonna keep it as it is then close this and click play now if we click on this button you can see that we have got the next frame okay let's go back to figma and complete the prototype by connecting these two frames so this time we will connect the image to the next frame so similarly let's select the image drag the small circle and connect it to this Frame like we did before you can choose any of these options and use them or you can just choose an animation for this Frame from here so let's click on it and select the animation Style I'm going to select move in now if we click the play option then click get started and click on this image you can see that it goes to the next frame with the animation okay so this is how you can create a product app for your UI design next let's see how you can share your design with anyone you want to do that just click share enter the email ID of the person with whom you want to share the design you can also click here and change the permissions you want to give to this person if you selected it they can edit your designs so I'm going to go to them give permissions to view and click send invite now if you go to the person's inbox you can see that they have received an email from figma now if they click open in figma they can see the design you can also see the cursor on your UI design and if they had any comments to it you can easily View and reply to their comments so this is how you can share your design with any person you want okay you can also download this design to your computer just select the design and click export then again click export and your design will be downloaded now if you want to download all your designs in one go press Ctrl a to select all the frames and here you can also select the file type you want I am going to select jpg click export and you can see that it has been downloaded as a zip file you can also share the design to your phone and see how it looks okay now you know how to create UI designs for your website and apps by using templates and also from scratch you can explore more and create your UI designs with figma so that's it guys this is how you can create a UI design using figma once you've designed the app if you want you can also start building it and making it live so if you want to learn how to create an app the two without coding like this you can watch this video so I hope you guys found this video helpful and please give a thumbs up and subscribe to our Channel I'll see you guys in the next video Until then take care bye bye

Channel: Website Learners

Views: 390,593

Keywords: UI design, Figma tutorial, website design, app design, user interface, design tutorial, Figma tips, UI design techniques, interactive prototypes, brand logo design, Figma navigation, design collaboration, mobile-friendly design, design software, design tools, design workflow, design process, Wireframing, UI Prototyping, logo making, UI, Figma, Figma in 10mins

Id: uQsyobT2Rv8

Length: 15min 27sec (927 seconds)

Published: Sat Sep 16 2023