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