hi i'm aliena cai in today's video i will teach you how to create a mock-up by figma
a mock-up is a high-fidelity design that represents your final product
so by the end of today's video you will be able to recreate a screen that looks exactly the same
as a screenshot of your favorite app this is the second episode of my figma tutorial series
so please check out the previous one on how to create a wireframe before jumping to this video
let's get started this is what we built last time and let's start from here
on the left side we have the screenshot of the app that we want to duplicate on the right we
have the wireframe that we created the first thing i will do is to copy the wireframe frame
and then paste it here move it to the bottom so that will keep a storage of what we built
let's rename the top right frame to mockup by the end of this video we shall be able to
turn this mock-up frame into exactly how the left side looks like to do that we need to adjust the
size color and position of every single element let's start from the largest element the image
let's drag the rectangle in our wireframe on top of the screenshot then let's zoom into every
single corner adjust the rectangle so that the size and the location perfectly overlaps the image
you can see that the right size will be 375 times 375 for this image on instagram
now let's drag this rectangle back to the mockup frame to horizontally drag an element hold shift
and it won't change the vertical location once the vertical red line shows up throughout the screen
it means you've centrally aligned this element so let go of your mouse once you see the red
line shows up the selected element will always be highlighted in blue on the left side but you might
need to scroll up and down to find the element and let's double click on it to rename it to fill an
element with a photo please first prepare the high resolution photo in your local device select the
photo in your local device and then press ctrl c or command c then let's go back to figma select
the element and then press ctrl v or command v on the right hand side underneath fill we can see
that we are filling a rectangle by an image now we are done with creating the largest element in
our mockup let's quickly check whether there's any minor element within this large element
indeed there is one this is a carousel* post so there's a one third label on the top right of the
image but in our mock-up frame the image is covering the one-third label to fix this
problem we need to adjust the layers so let's go to the left hand side drag the photo layer
all the way to the bottom so that other layers can show up on top of it and this element is really
two elements first is the gray background and the other is the text element let's drag the rectangle
on top of the screenshot again let's adjust the size so that all the edges are perfectly lined up
now let's run these corners go to the right panel and pay attention to the second panel
use the 6 control to adjust the angle size here i'm going to set the angle radius to the maximum
now the shape looks right let's adjust the color select the element select view and then use the
color picker then select the original element color great now what we need to do is to put
it back to the original location we also need to figure out the horizontal location
so let's measure the space here a brute force way of measuring anything is to simply create
a rectangle and then you can just read it from the width of this rectangle here it is a 13 pixel
usually we can just look at the x and y coordinate on the top right but sometimes it won't work if
we are not working within a frame which is the current situation with this screenshot
so let's hold shift again drag it to the right frame on the x coordinate i'm going to minus it by
13 pixel that will make sure it will be placed in the right location as a recap to create a mockup
for a shape element let's first make sure it has the right size and the right shape then let's give
it the right color and finally let's adjust it to the right location it's also a great practice to
give the element a proper name now let's work on the text element the text is currently covered by
the upper element so first let's drag it to the top then let's drag it on top of the screenshot
to compare the size you can change the font the font size the color on the right for now
i will first adjust the color i'll use the color picker again to select the white color
then i'll adjust the font size until it overlaps better and move it back to the original frame
there are a few ways to center two elements well the first way is to just move it around until the
two red lines show up another way is to hold shift on your keyboard and then select two elements
then click the aligning icons on top click the center icon vertical and then click
the center icon horizontal i cannot really get access to instagram font
so i'll be using the font inter for this project as a recap to refine a text element in the mockup
the key things we need to pay attention to are the font the font size the font color and the position
now let's use the same method to refine all the other shape elements and text elements
as a kind reminder we're just trying to make a copy of an existing app or in an actual user
experience or user interface design project you will be the person that actually makes
decisions when it comes to the right spacing the right color the right font sizes but don't worry
if you are working with a company usually your company will have other designers who's in
charge of designing a design system and they will be providing you the right font sizes
and colors that you can use so you don't have to worry about how to make those decisions however
there's an exception when you are the only designer or you're working with a very early
startup in those cases you'll also be the one who make decisions for the color the phones it's going
to be challenging but it will be fun and the only best way to do it is to first practice practice
and second learn from other products here i'm seeing a shape that has a border on it
so let's select the element to add a border let's add stroke then we can adjust the color or adjust
where the stroke is being placed and now i'm just going to select the right color again
from the original screenshot to give it a right stroke color
here we go another fun fact and this time about text element is that many products actually don't
use the default letter* spacing size and this is an example here to adjust the spacing size
let's just go to the right panel again and use this field to adjust the spacing just like this
now let's keep going sometimes you might face the problem where your mouse or keyboard just cannot
control the spacing precise enough to make your element be in the location that you want it to be
just like this scenario or in this kind of case you'll have to go to the right panel
and then type in the position you might just need to minus or plus 0.5 pixel here we go and
if we trade every element separately we'll end it up having a canvas full of separate elements
so in this scenario it will be helpful if we just select all of these dots and then use command
g to group this into a group we can name this group into see more button and then that will
be more helpful than keeping these dots separately let's keep going to refine all the other elements
while you are doing it you might find it pretty fun to look at how precisely these apps actually
set themselves up you might also realize that it takes so much time to create all these details
especially in comparison to the last episode where we learn how to create a wireframe and that is why
designers usually create a wireframe before jumping into designing these details
and my suggestion to you is to always create a wireframe first figure out what structure you are
going to use before jumping into refining these details because this will sunk up a lot of your
time and please don't waste time designing for a structure that you are not even going to use
if you're confused about any element just jump back to the previous part of the video because
i've already covered how you can realize any element that you want and the hardest part of
being a ui or ux designer is really not about how to use this tool but rather how to make the
best design decision working within constraints collaborating with engineers and pms and also
design a product that users will like and design a product that your company can actually make
we're almost there and by now the only elements that you might not have finished are the icons
so now i'll teach you how to refine these icons the good news is that 99 of the time you don't
have to design any of the icon by yourself for now let's access the templates that's available online
to do that let's go to fake my home page and then let's go to the figma community page on the top
let's select icons now these are resources that's dedicated to icons template you can use any of
these resources choose the one that you like for my project i'm going to use a file that's named
under coolicons once you duplicate the file you'll open something that looks like this
here you can try to find the icons that you need and simply just copy and paste them to
your project to use it here i'm selecting the like icon copy it and then pasting it in my project
again i will drag it on top of my screenshot to figure out the precise sizing and also
the precise location please hold shift on your keyboard if you don't want to change the ratio
between the width and the length of this icon now let's look at the selection colors please
click the unlink icon to unlink the original selection color and then select the actual red
color that you want to use or you can use a black color to represent a post that's not liked yet
just like what we've done before let's again figure out the right position and then move it
to the right place in the right frame now let's do the same for all the other icons
while you are doing it you might encounter a scenario where you have to flip an icon
to make it right to do that simply right click on the icon and then select flip horizontally
let's keep going if you encountered a scenario we just cannot find the exact icon
don't worry just use a similar one for now we're not trying to be perfect in this practice
when it comes to icons you might be surprised how many icons there actually are in a screenshot
these are something that we don't pay attention to as a user because good designs are often invisible
so next time when you are using your favorite app pay attention to these icons and that could be a
great inspiration for your next project now we are pretty much finished for this mock-up screen
but there's just one more details we need to add and let's see what's the difference and the answer
is the system related elements these are things that come with your mobile for example the time
and the battery percentage on top of the screen these are also super important for a mock-up
to add these elements let's go to the figma community page again and let's search the
system that you have on your mobile phone for my project i'll be using the ios kit
once you open the kit not every element will be shown on the thumbnail page so make sure you're
in the right page and in this case i'll go to the component page now the only thing we need
to do is to have some patient and try to find the right element for the top of your screen and the
bottom of your screen once you find it copy it and paste it to your mock-up here's a reminder
that if you're creating a design on your own you should be copying these elements before you do the
detailed mock-up design this is because we don't want to make a design without considering these
elements being on top and bottom of the screen if we don't place this before we make the design
we might design it on top of elements and then ended up having to adjust all the other elements
and that's it we've finished the mockup for the screen congratulations you learned a lot about
mockup today let me know in the comment section below whether you want to take this even one step
further to make it an interactive prototype so please comment a victory sign emoji if you
want to see that video coming please subscribe to my channel and turn on notification because
more tutorial and design content is coming up also i have a new instagram account @thealienacai so
please follow that as well thank you so much for watching and see you next time