Figma UX tutorial for beginners - Wireframe

hi everyone i'm aliena welcome to my first  figma tutorial video where i will teach you   how to create a wireframe a wireframe is a digital  outline of your design as a ui ux designer i often   need to create wireframes during zoom calls  where other people want me to visulize some   ideas quickly so wireframe only represent the  big picture of an idea and it is very important   for you to learn if you want to become a ui or  ux designer or if you want to design any app   or websites i'm going to take a screenshot of  the instagram app and let's try to recreate the   wireframe of this app together let's get started  let's go to figma.com and then select new design   file then let's give this page a title for mine  i will name it under instagram ui practice simply   hit return to save the title now let's drag  the screenshot that we have to the canvas   it might turns out to be very large or very  small so please zoom in or zoom out accordingly   now on the left side you will see a layer  named under the name of this image let's   name our layer to something that actually makes  sense so i will name it under insta screenshot   so on the left hand side underneath layers we  have all the items that we added to our canvas   and on the right hand side we have everything  that's needed to adjust things in our layers   and on the top we have everything that's needed  to add a component and for now i will add a frame   or simply use your keyboard and press f then i  will select a frame size that's the same as my   device which is iphone 11. creating a frame is  like taking out a piece of paper to draw on it   we don't want to draw directly on our table or  desk that's why we want a paper and i'm also going   to place the frame right beside the screenshot  and adjust the size of the screenshot to match   the size of the frame make sure to press shift  on your keyboard to maintain the ratio while   adjusting the size of your image now let's try  to recreate the wireframe of this screenshot   there are only two things you need to  know if you want to create a wireframe   first how to use text which is the t icon and  second how to use a rectangle which is the square   icon let's start by adding a rectangle to the page  to represent the most obvious component which is   the image in the middle if the size doesn't look  right you can always adjust any of the edge or   any of the angle there are many other elements on  this page that can be represented by a rectangle   for example we can use a rectangle to represent  the navigation bar at the bottom of the page   let's press the letter r on our keyboard to  create another rectangle we can also use a   thin rectangle to represent a division line and  another one for the button and also some for icons   if we have a few icons that are in the same  size we can always copy a component and then   paste a component using command c command  v or ctrl c ctrl v to save us some time   i know that profile picture is represented by a  circle but we can always adjust a rectangle into   our circle by adjusting the corner radius if i use  a maximum corner radius and then make sure it is a   square then we are creating a circle please take  your time and try to use a rectangle to represent   everything on the screenshot that is not a text  i'm going to fast forward a little bit right here   now in this part i'm going to create a rectangle  on top of a rectangle so their colors will be the   same and i'm going to click this fill to adjust  the color of the top rectangle and remember for   a wireframe you don't have to create the perfect  spacings in between components and you don't have   to choose a perfect color here we already have  everything that's on the page that's not text   the second step will be putting the text that  we need to our wireframe and to put in a text   let's click the t icon or simply hit t on  our keyboard then let's copy the text from   our screenshot to our wireframe on the right hand  side we can adjust the details of our text such   as changing the regular to a medium font let's  create another text box and then put in posts   for some reason i like copying an  existing text box to create a new text box   we can slightly adjust the font size and the width  of our text to reflect more of the final product   but again we shouldn't spend a lot of time on  it and it doesn't have to be perfect please   spend more time on your own to create the rest of  the text box as a reminder you can hit t on your   keyboard to create a new text box when it comes  to designing a new product a lot of designers use   lorem ipsum to represent the text lorem if  some looks like a few lines of random text   however this is not a really good habit in order  to make your wireframe as understandable as   possible please try to come up with some realistic  tags to replace those larp ipsum now we've already   used rectangles to realize everything that's  a visual component and then we use text boxes   to represent everything that's a text component  and we're pretty much done but there's a slight   problem to this wireframe i wouldn't be able to  tell with those squares representing those icons   so i'm going to take you one step further to  teach you how to use a pen tool to draw up   a sketch for those icons you can click here or  simply press p now click a spot to start drawing   and then click another spot to add a corner and  then click another spot to add another corner   if you want to end the drawing press enter now  we have the back icon let's try a harder one   let's do a home icon click on a spot to start  drawing and then click on other spots where you   want to form the corners and finally let's connect  everything together back to the starting point   and here we have the home icon for the search  icon we can use the same tool to draw the stick   but for the circle we can simply just  use the circle tool you can use o on   the keyboard now let's draw a circle to  represent the head of this searching thing   we don't need to fill it with any color so i'm  going to minus the fill and then add a stroke   here we have it if you want to increase the size  of two components at once you will have to press   shift and then select the two components  and then you can adjust the size all at once   please try to use the same method on the other  icons now if you don't want to create a sharp   corner but rather want to create a curvy edge  then what you need to do is to hold your mouse   and then pull it toward the direction you want the  curve to be and then click it again to form the   ending point let's practice again for the curve  inside the shopping little icon please click the   spot where you want to start the drawing and then  click and drag until you form the curve and then   click the spot where you want to end the drawing  press enter on your keyboard to end the drawing   let's do the same for all the other icons  please don't worry if your icon doesn't look   really good because the point of building a  wireframe is simply to communicate the idea   and as a ui ux designer i almost never create an  icon myself because usually if you are working   with a company the company has a design system  where they provide all the icons for you so all   you need to do is to copy it from the design  system and then paste it on your own design   congratulations if you come this far then you've  learned a lot about wireframe today in my next   video i will challenge you to go one step further  to move this wireframe into a high fidelity mockup   so please don't forget to subscribe to my  channel and turn on the notification bell   to learn more about design and some other random  cool stuff see you in the next video and bye

Channel: Aliena Cai

Views: 415,061

Keywords: figma tutorial, ui design, figma tutorial for beginners, figma for beginners, how to get started with figma, ux design, figma tutorial app design, figma basics, ux ui design, user experience design, user interface design, product design, figma app, figma mobile app design, figma app design tutorial, figma wireframe tutorial, wireframing in figma, wireframe tutorial, figma wireframe, wireframe figma, Figma UX tutorial for beginners, how to create wireframes in figma

Id: D4NyQ5iOMF0

Length: 8min 41sec (521 seconds)

Published: Mon Jul 04 2022