In this Figma Mobile App Design Tutorial, you are going to learn how to design a Shoe Ordering Mobile App in Figma. Figma is a free UI Design tool use in creating Mobile App UI and UX.
Get Figma
👉 https://hyginusukeh.com/figma
How to Remove Background from Image in Figma: https://youtu.be/IHy6_T9htvs
Let me know what you think about this video and should in case you have any challenges, let me know in the comment section.
Remember to like, share, comment and subscribe. Also, hit on the notification bell to get notified when I upload a new video.
Subscribe to my channel my liking this link: https://www.youtube.com/channel/UCbVPTU8fv7e0EjGeQFbIsJA?sub_confirmation=1
You can also reach me on :
Website: http://www.hyginusukeh.com
Facebook: https://web.facebook.com/hyginusukeh2
Twitter: https://twitter.com/hyginusukeh
Instagram: https://www.instagram.com/hyginusukeh
Youtube: https://www.youtube.com/channel/UCbVPTU8fv7e0EjGeQFbIsJA?sub_confirmation=1
-~-~~-~~~-~~-~-
Please watch: "Figma Web Design Tutorial with Animation"
https://www.youtube.com/watch?v=eCJLCoPmEIk
-~-~~-~~~-~~-~-
what's up guys and welcome to my channel
building amazing things today's video we're going to be building a shoe
ordering app with figma i'll share with you some tips and tools i use in
creating designs make sure you watch to the end of this
video so if you're new to this channel kindly hit on the subscribe button and
the notification bell so you get notified once i create a
new video before i get started thank you my subscribers now i have about 450
subscribers that's not much anyways you could
support my channel by sharing
commenting liking and watching my videos to the end
thank you because i know you will so guys i'm going to share you one tip
right now in this section and that tip is looking
for inspiration from the internet before i make any design i go to the
internet to look for inspiration and one of the best place I go to is dribbles you
can look at dribbles they are wonderful ui designs you can pick out from dribbles
and look at what they are doing I also look at Pinterest,
Pinterest is also
an interesting place but I got to find out about
Instagram you can follow some hashtag on Instagram
and one of them is ui trends which have over 294 000 posts
so i got this design inspiration of this shoe app design from
Instagram you can follow me up on Instagram I'm
active on Instagram @hyginusukeh so follow me up there on Instagram so guys
let's talk about the tool we're going to use for this design
we're going to use Figma there are so many benefits of using Figma
1. it is
a free tool 2. you can work with it on the browser
3. You can also work with it as a desktop application
and one of the interesting thing about this Figma you can use it to do your
prototyping you can also use it to work as a team if
you have various people working as a team so you
guys can collaborate and work together as a team so you can
use other tools like you can use photoshop you can
use Coreldraw you can use XD and the rest of that but
in this tutorial, we're using Figma for this design
so guys in your design
you need some resources and one of those resources
is images you need high quality images for your design
that will make your designs to stand out so
looking at this folder now i've downloaded four couple of images
the black shoe nike the blue the red and the white
nike shoes so i'm going to use these images but i got these images from the
internet and i have removed the background
of these images i'm going to show you in a couple of seconds how to do this
so I go to unsp
lash.com, unsplash.com is a free platform where you can download
good quality images with no copyright attached to them
so these images are free you can download it and use it in what design
you're doing either web design mobile app design and the
rest of that so I also did a video on Figma on how to
remove the background of images you can go check out the link
below in the description also there's an online tool you can use
to remove background images is pretty fast i use that online tool
for t
his design so and the online tool is remove.bg you can simply just upload the images and it removes the background
like magic so now I've opened my Figma environment if you're new to Figma
I know this would look strange to you but I'm doing a course on Figma
that course should be a crash course on Figma where you get to learn the basics
so, for now, you're just going to look at what I'm doing and learn from
what I'm doing um it's not going to be easy to pick up now
if you're new to figma but re
member i'm working on a crash course so you can
also check out my crash course uh i hope that crash course will
come out soon so now um on my figma environment if
you're already used to figma you can um understand this
environment very well so what i would do initially is um i'm
going to tell you how this app is going to look like i'm going to
basically just do two screen the first screen is where you get to see the
available shoes from the nike store then the other screen is where you get
to se
e the details of the particular shoe before you add
that shoe to the cart so um basically that's the two screen
I'm going to do for this video the idea is for you to learn um some
basic skills and some basic um tools and tips
which i'm going to bring out to you and which i'm going to show you
and one of them is mixing color and one of them is also
um playing around with shapes and bringing out
different types of design so for now we are going to dive into the design
aspect of this application i
know you are excited
so let's get started so the first thing i'm going to do is to click on my frame
tool now if i select the frame too i'm going
to decide which screen size i'm going to design this app for and i'm going to use
iphone 11 pro x that's what i want to use for the design
so i'll rename this um frame to let's say the products
this should be the product screen where you get to see the different products
so um i want the edges of these um products to be curved this product
screen to be
curved so i can go to corner radius and make it to be 30
and I have a curve corner radius so the next thing I'll need to do is
I'll select my text tool and add a text and do some basic
configuration of the text so I like using Poppins then um
let's say the font size should be medium and um
let's reduce the size down to let's say 24
and we'll write some basic text let's say our Nike
um shoe store next thing I'm going to do is uh add
a grid um a layer grid to this frame that will help me to align
my contents
like this text now i need to align the the text properly on
this frame so i need to set my layer grid so
i just click on this plus icon here and click on this box and select um
columns usually websites are six so um 12 i use six for my mobile app
design and i use margin of 30 so that way i can
look at what the grid is and align this content
very very well on this frame so now what i'm going to do is to select this nike and
align it down to the spot and i make sure it's
matching with
this line of my grid line so i can turn off the gridline by
clicking on this eye tool and it gets off my design so
next thing i want to do is um i want to add a hamburger
that maybe shows other options of the app so what i would do is to select my
pen tool and i'm going to carefully zoom in here
and click here and click hold my shift on the
um on the keyboard and click also so when i'm done click on the
escape so i have this i click on done i have
this so i'm going to duplicate this um in
three
places and um if you check the
the alignments they're not properly aligned so
i have some alignment tools here that can help us to align this properly so
i'm going to select this three um content
and select distribute vertical spacing that way to align the spaces between
them to be equal then um also i'm going to
set this to be center so when i click on center everything
looks aligned well and i'm going to increase the stroke to
2 and i have my stroke em my hamburger
icon ready here so i can us
e my command G
or ctrl G whatever you're using mac or windows to
group this content next i need a search bar where i can search for tools
for shoes sorry and uh i'm going to click on the box that all the rectangle to and
make something like this then i'm going to
add some corner reduce let's say um we're going
to add 10 and then i'm going to increase this a
little bit then um one thing you want to do is to
reduce the opacity of this color so
click on fill and reduce the opacity and just get some
thing
similar to this okay that's fine so um i'm going to
crease this a little bit and that's fine so i need some icons i can go ahead and
start designing the icons but it's going to take me a lot of time
so one great tip i'm going to give out here is get your icons
out of the box so what i do is i go to plugins i install a plugin for that and
in my previous video i've shown how to install plugins
but no worries i'm still going to show you how to do that so
to install a plugin just right click a
nd go to plugins then go to manage plugins
so when you get to manage plugins here you can see
the plugins i've installed before now so you can just click on these plugins here
and you can search any plugin you want to
install and then install the plugin plugin gives you extra functionality to Figma
so i'm going to close that and i'll just
right click and go to plugins i've installed this plugin so you can see
here so i'm going to select um unless a
feather icon feather icon is a good um icon set
so
i will wait for it to get opened depending on the internet how fast it's
going to be so good my failure icon is open so i
need a search icon so i just search and uh
i'll click on this and this is my search icon
so what i'll do is to bring this search frame into
my product frame and i'm going to take this
down to this point and um i'll reduce the size this is 24
well what i'm going to do is um i'll click
on constraint proportions and reduce it 22 that way the width is also
reducing so i can m
ake it 20 okay 20 is nice i can
set it down here and i can reduce the opacity as well
and let me close my feeder icon i can reduce the opacity down this way
and that's okay now next thing i want to do
is i want to show cuts of um the shoe so what i'm i'm going to do is to add a
rectangle again select a rectangle for the cuts
um i'll add a corner radius let's say at a corner reduce of 20
and this is fine so um i'm going to pick i'm going to pick one
of the shoes and let's try it so i'll go to my
shoes
these are the very shoes i've um downloaded so i'm going to pick the blue
shoe in and let's look at the blue shoe so um
i want to pick a color from this blue shoe so
on one great tips here is you can pick colors from your images
that way you don't have your images looking different color and your app
looking different color so i'll just click on the fill here and
click on the eye to here and click on this image and i have this
color from the shoe and um
i think i need to reduce the opacity
of this color and
i'm going to reduce it this way that's fine and i can add um
i can make it a linear color that way i have two sets of color
then i can rotate this color this way or i choose to make it
ready or you choose to make it anything you want to
set it to so but i'm choosing to make it radiant
and i'm taking this part to this edge and taking this part this
way then i'm bringing back the opacity of
this back to 100 then i'm making it a change on this
color so that i have a little touch
of white
at the middle if i increase it more you can see the
white so i'm reducing it a little bit so i have a little touch
of white on the background there so that's fine now so what next i want
to do is um i'm going to duplicate this
and i'll duplicate it by holding my art and um
reduce the height so what i'll do now is i'll turn on my grid so that i can
see what i have so i'm going to do this this way and
bring this this way do some basic alignments so that it
matches to my grid line so that'
s fine
so i can choose um different colors let me set this also to match with the
grid line and this is fine so i can turn off the grid line then i can change the color of this
right to different colors so i can click here and
i can swap between different colors so that's it so i'm going to swap a little
bit this way to get this
so i'll copy this color code and go to the next color
and paste the color code here and i'm going to reduce it
to have like a white in it a little bit of white
and this
is nice so what next i'm going to do this search i'm going to add a text that described
that that's a search button
so i have my search then um i also reduce the opacity
of the search down and also reduce the size to let's say 18
and i'll bring it here so one thing i want to do is to group
everything i have here i can set this to this height and set it to this height
that way i can use align center to make sure that it's center and i can
select these two and also use my alignment to make a
cente
r and i can select with the textbox and
use my command j or ctrl g to group so i have that grouped then um
next thing i want to do is um let me get in
another shoe so let me get in the black shoe
into this design and i'm going to take the black shoe
to this point so what i'm going to do is to reduce this black shoe and this is too much
okay and i think this is fine so i have this black shoe this way so
this is one of the cut and this image i wanted to be behind on
behind um detect behind everyth
ing so i'm going to bring the text box down
the frame sorry the return go down and bring the
image above the rectangle so now i'm going to give some
description of this um of this um of this card for this particular item
so what i'm going to do is add a text so i'm going to click on the text
and um give you the text description this should be for the black
nike shoe so i'm going to make this to be bold semi boot
and i'm going to reduce the size to lex 18
now drag it to this point and that's fine
i'm also going to reduce
the opacity a little bit and
this is okay so next i'll need to do is um let me bring down this image a little
bit down then um this more descriptions
i can duplicate um this text this black text i can duplicate it down
to give another description and um this show is for a peer so i can rename add a text
i can change the text to appear this time around i'm going to reduce the
opacity um very wall
or i rather change the color to gray and i'll reduce the font size to let's
say 12. so i think grey is not
that interesting so i'm going to take it down to black black then reduce the opacity okay that's fine so um
you can zoom in and this um card is two cuffed so i'll reduce it
to 15 and also do the same yeah
so next thing i want to do is um i'll do that for
um the price so i'm going to select this black
and i'm going to duplicate it downward here
then let's say the price for the price for this black nike
is um let's say the price is 220 dollars so i'm going to reduce
the size to
14 then reduce the zeros down to 12.
let's also make it 11 just a kind of design
then um i'm going to do some basic i join adjustment to this
point i think that is fine so you can see as
i'm working this image is disturbing me so
i can click on the lock icon here so i don't get
to select the image anytime again so i just have to select
either the box or my text so anytime i need to do the adjustment i
unlock the image so this text i need to bring it down a
little bit this way and un
lock the image so i can
work with the image and lock it back so the next thing i need to do now is um
i need to show that this is something you can
select so i'll definitely add
maybe a an icon here so you can select it
so what i'll do is i'll select my shape select
my circle or eclipse and i'll set the item width to 30 and
then i'll set the color to white and i'm also reducing opacity a
little bit then using my plugin
i can right click and go to plugin and go to
feta icons then i can look for a
box like this is a
nice check post that means you want to select this and add it to cut
so i'm going to click on it and drag it into the products
then drag it in to the cycle so i'm going to reduce this a little bit
this way and let's make it 18 by 18 then the color for this i'm going to
select this color right so close this and um instead of black
for the color i'm going to select this and make it
more darker so that it stands out it comes out
so i'm going to do some basic alignment and i have
this so
um next thing uh there should be a navigation icon here that will take you
back so i'm going to add um a box
this way this will actually take you back
so i'm going to look at the height of this diet is around 18.
i'm going to make this um let's say 18 by 18 well that's not that's not good so i'll
increase it a little bit and increase the width
a little bit so i'm going to pick the color from this color
and i'll use my paint to to do something to show that this is actually
a navigation b
row so i'm going to set the color to the
line size to be true and um if you look at it and the edges are
square so i'll need to format that so when i click
on this and i select round
the edges around and you can also change the
meeting points that is the joints to also be round as well
so that's fine so i can add some corner reduce to this let's say
corner of three there's okay
i can crease this a little bit and reduce this
this way and do some basic alignment so i get what i
want okay that's fi
ne so you can
click on it and click on the grid layout so you can do your basic
alignment to the grid okay fine this one is
aligned the night shoe is aligned our
search bar is aligned so turn off the grid line
so i'm going to do that for the remaining shoes so i'll quickly do that so guys uh i'll simply do some basic
alignment like i'll have to select this and bring it down a little bit
this way and um this is okay so next thing i need to do is to
add our icons at the down um so what i'm going t
o do right now is
to add a rectangle into this frame just right i'll go this way so i'm going
to change the fill color of this frame i'm going to make it a little bit gray
so as a little bit of gray then i'm going to make this footer icon
should be white and i'm going to add a shadow to it
i'll click on effects then click on the shadow here
i'm making the top four also and i'm making the blueness to be like
say 20. so we have a very nice shadow here so let me know what you think about the
design
so far what do you think how is the design coming along
and tell me what you've learned drop a a comment what you've learned
so far so what i'm going to do now is to select
an eclipse and uh make a circle here and let's say the cycle should be 70
80 by 78 so now you're going to learn the basics
of um using what we call
the boolean functions in figma so i'm going to select this circle to have this color
and this color is okay so i'm going to select the both
of them then these are the boolean eff
ects here we have
in figma so i'm going to use subtract that way it does remove it and
i'm going to add another circle to it remember we used 78 so this time let's
try 70 by 17 and let me do some proper alignments and
i'm going to pick the color pick back that color okay fine
i'm going to take this a little bit up then add some
effects by some shadow making shadow 20 20 is too much um 10
10 is okay then the opacity i can reduce the opacity
and this is fine so what i'll do is i'll quickly add my
icons to this so what i'll do is to right
click and go to plugins and go to fader icon so what icons do i need i
need the home icon so click on the home icon so i'm
taking it into this products and i'll drag it here i will increase the size let's say 30
because this is the home and i'll make the color to the white
i want this microphone to be here so make it to the white that's fine so don't know why it's not changing
so i just need to close the icon and make it white
so okay that's why so what
next i'll do the basic alignment and
make sure it aligns using the figma line so i need other
icons so i need a hat icon so search for hats and that is it
so i'll take the hat into the product then drag a hat this way
this is okay you can align it a little bit down
i need the cut so click the card and drag it to the
product and then bring it down here i need this
setting i'll click on the setting and drag it
into the product drag it down here then i need the graph to show um
reports so i'm going
to look for icon for the graph
and okay here we go so i'm going to use this and bring it
into the product and drag it down yeah
so i'm going to use my alignment to to my grid line so i'm going to set this
to the middle this way and also set this to the middle
i think that is in the middle the cut and set the um
setting to building the window so i'm going to select the
icons then click on align particle center that way all of them are
aligned vertically center and i'll drag it down
a little bit
close my my icon then i click on the frame then
remove the crit so great you have this
design that's great you can do more you can do some
tweaking you can do some alignment so that it will be neat
another alignment you can do is selecting this boot and this
boot icon and making it align vertical center
so and then you can do order like let's change the color of the
drop shadow here so i want the color to be this color
i think and reduce the opacity and that's fine it's better than the
black so
you can do other settings here you can as well reduce this to let's say
65 by 65 i think that way to be more better and i'll do some basic alignment
too and this is fine this is okay let me know what you think
about the design and remember to subscribe if you've not
subscribed to this channel please please and please subscribe like
hit the notification bell and also please comment that will help
me to create more videos on this channel so
the next thing i'm going to do now is the next screen and
um
what i'm going to do is i can simply duplicate this
to get this then um i'm going to delete some content i don't need on this basically i don't need all this content
i don't need this i don't need this i need a hat i can
and uh so the shoe is locked so i'll lock it and
i don't need it so what i would do now is um
um i'm going to add a rectangle this way
i'm sending it i'm going to send the hat to be
in front then i'll bring it down up a little bit
then i'm going to add um some curve here so
i'll click
on the edit object and click on this so i'm going to add this
a cover 30 that is small 40 and i think that's okay so select
this point and also make it 40 or click on done and now add a fill
color to the frame and this color i want to add is
i'm going to select color from this or from the shoe rather
then um i'm going to make this radical and um change the colors this way
then um i'm bringing this up a little bit here
reducing this then i'm increasing this a little bit
okay this is fi
ne so for this color i'm actually bringing
back the opacity and bringing this little bit white in it
then um i'm duplicating the shoe of the duplicating issue and i'm
increasing the shoe using the shoe size something like this
this is okay then add the color to this make it white and that's okay
then um i need a button and the needed text description so i'm
duplicating this text here and i say this text should be like um
this should be the blue show right and i'm duplicating
the pair of texts th
is way and this time around i'm saying
one pair and i'm increasing the font size lesson
14 and um dragging it this way i still need
to increase the lesser 18 and then this is okay
so um i need a text description and i need a
price so i can take the price from here and uh i can increase the size of this
price this size is 24 so i make
similar so um make this 24 and this
so the color i'm going to pick color from the show
or rather reduce the shoe color to 69 opacity the
blue shoe 69 it does okay o
h that's too much so let me
increase it 89 let's say 80 00 80 and also make this 80
for opacity so remember grid line so i'll click on the product
and show grid line so this is off our grid line so i'm going
to drag it in and also increase that of the decimal
values to let's say 13.
and let's try 14 okay that's cool then produce it
and set this to the line and also this is at the line so i can turn
off the grid line now and um i need a text description
for the products so i can drag this down a
little bit and reduce the font size to
let's say 18 then i'll say this should be the product description okay so i need some text of this product
so i have a plugin called lorem lorem so if i install that plugin you
can have access to it so when you click on the plugin it gives
you dummy text so there's text element here so i'm going to add
the text element i want the text to take this size so i'll click on auto generate
fills the content immediately how pretty nice is this so i'm going to reduc
e the
opacity to less to 40 and reduce the size to let's say
13 i'm going to increase the line height of this and okay this is fine i'll reduce this a
little bit so we have our product description
and i think this tech at this rectangle that they cover is too much so i'm going
to make it 35 and also make this 35 now click on done then
um next i need a call to action button which should be i'll add to cuts so i'm going to take
this this way and then this is okay
so i'm going to add a corner reduc
e of let's say 10
and 10 is too much so that's seven okay with seven change the fake color to
this and i'll reduce this a little bit then i'm going to duplicate this text in here send it to the front
then change the description of the text to
add to cut then i'm going to change the color of
the text to white completely and this opposite of bring it
out then i'm going to make it semi bold
so it stands out a little bit so i'm going to
size this text to the rectangle that way i can align this text
at the
center and use online middle
to get it to the middle so i'm also going to do another rectangle here and i'll remove the fear at the stroke
sorry remove the fee add a stroke then a stroke of
two and the color of the stroke should be this
and i can add a corner reduce like this then i will increase this this
way set it to the middle that way the person can be able to select favor
um that as the favorite so the fee is white i'm going to change the field down
to this sorry the height is hot s
o i'll just
click on that and click on the vector image
so that way i can add a feel to it and maybe remove the stroke so i'm going
to select the color and select this color and that's okay
so i can select this and do some formatting and select the bot
and group them and select the text and the rectangle and group
them as well then select a bottom of them then use my
alignment tool i'm going to use another vertical center
to make sure they're aligned properly well then um
i'm going to bring this
down a little bit in this a little bit
and bring the price down this way so going to bring the price the product
description if download want to add more you just
have one pair you can select multiple um
quantity you can select between one or two so i'm going to add something
for that so i'm going to select this color
this gray color i'm going to add some corner edges
so here i'm going to add some text so i'm selecting this folder description
text i'm duplicating it and i'm bringing it to the f
ront
then um i'm going to change this text to minus in case you want to minus
one of the one of these quantities you've added
and this should tell how many quantity i've added
and the plus to add more so what i'm going to do now is to change
this font style i don't like pompe for this
so i may look for array array yeah error is fine for this
so i'm going to select the three of them and use my alignment too
and good so once i'm done with my alignment i'll
set it to the middle this make sure i do
the proper
alignment to be aligned vertical middle
online videos so yeah i have that so i'm going to reduce
the font size and make it um 12.
that's fine then i'm going to make it um make it um bold
semi board or bot semi board depending so make it um
both and also make the other one both so i'm going to bring this closer a
little bit and that's fine
so you can add more um product or you can minus
for this particular shoe and let me know in the comment section what you really
think about the desi
gn and remember to share
like and subscribe to this channel share my video follow me on instagram at
hygienes okay so i'm turning on the grid to look at
this and um align properly to the grid
make sure it's at the point of the grid here
it's fine so turn off the grid so assuming there are more pictures to this
so how do you how do you then um
change the picture to see more so i'm going to add
an eclipse down here so i'm going to make this eclipse 23 by
23. so i'm going to make the color to be
bl
ack then i'll reduce the opacity a little bit
then i'm going to duplicate this and the third one so i'm selecting these
two and i'm also reducing the opacity more
this way then um i'll select the board and
say align vertically centered and use vertical spacing
and use sorry horizontal spacing that way i have it that way
and i'm going to select these two and also reduce the size to let's say 17
by 17 make it more smaller and make sure they are lying so
great you have your design awesome so you ca
n go ahead and do
multiple things on this design um i've not done
great um arrangements you can do more you can look at the design and see
what you can add more to it next we're going to do the prototype for
this design and that should be there so i'm
quickly going to do the prototype we don't have much screen here so i'll just
show the basic prototype to do a prototype just go to prototype
and i'm going to change the background color to
let's say having this as a background color
then i'm going
to select um iphone x then um
i'm going to select the prototype our elements
so when i click on this i wanted to navigate to
the screen and when i click on the cat so i'm going to select moving then
it's moving from right to left and when i want to go back i can
turn off this image so that i can select this
and say back or rather i should select the box
and say go back to the screen and i'm using move
out and it should move out towards the right so now basically
all about the prototype to run y
our prototype you can click on this play
icon here present oppose the prototype for you
and let's see what we have cool this will valve so we can
go back to the first screen this is the first screen so click on the cat
yeah and one click on the back and it's working
pretty well so guys thank you for watching this video
i'm pretty excited i've bring out something like this for you to watch and
learn remember to like subscribe
share this video follow me on instagram at
hygiene okay and i'm very ac
tive there chat me up i'll respond to you and
bye bye see you in my next video cheers
Comments
Today I got the JOB yes I got the JOB just because of this tutorial. Thanks MAN keep up the great work :)
love your tutorial videos. very insightful !
Subscribed! Great videos, thanks for doing them. Please do more going from nothing to figma to React Native please.
Thank you, learned a lot!
Nice tutorial Simple and easy to follow
Thank youuu
Great Sir, Love from India 👍
VERY understandable
Amazing
Thanks for this video
This is a very good UI Mentor in youtube.
You are amazing brother. Thank you so much for sharing your knowledge with us
Nice work
This amazing thenks alot for this tutorial
One full course on figma basic to advance please
I enjoy watching your videos and i learn so much from them. You are the best...Thank you for sharing your knowlegde.
Yes sir need more like this osm love u sir ❤️
Wow great. Please how did you remove the background from the shoes.
So nicely done.I have learned how to remove background from image and good sites to get components. Some stuff in figma like shadow, curve, etc I learned now. Thank you boss.
Thank you so much for sharing your knowledge with us I was thinking of giving up until I found your channel please can you do a food website with figma thank you