Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Designing Instagram in Figma | DigiSkills | YouTubeToText
YouTube Transcript: Designing Instagram in Figma
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
This lecture provides a step-by-step guide on how to create interactive prototypes and wireframes using the Figma platform, specifically demonstrating the process by building an Instagram mobile app prototype.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
in this lecture we're going to learn how
to work on the platform figma how to
create a prototypes in one word we can
say that figma enables the creation of
prototypes and wi frames uh which allows
you to express your Concepts more
effectively whether it's for a business
proposal a project presentation or even
new startups today with the help of
figma we will learn how to create a
prototype of Instagram before to start
let's look at the interface on the
middle part we going to put down all our
assets on the right panel side we can
design our assets or add some
functionalities with prototype part on
the left side you can see all the layers
and assets that you have used in your
prototype top side is for the tool boxes
which allows us to insert shapes figures
text and work with different plugins
okay first of all to create a prototype
we need a frame frame it means type of
device let's go to the thirt button
select the frame uh we can see here we
have a frame for mobile phones which are
versions of iPhone and Android tablet
frames desktop frames so it depends on
what kind of prod prodoc you're going to
prototype so first let's say I would
like to create an Instagram on mobile
version let's SEL the one of uh mobile
phone frame uh in my case I decided to
work on iPhone 1 and 14 so on the top
left corner you can see the play button
if you'll press it
you could see the output of your frame
so your task is to manage both of your
tabs first tab it is your workspace
where you're going to insert all data
the second page it's your output where
you can see how your prototype is looks
like on real mobile phones okay so since
we creating an Instagram first we need
the Instagram's logo type so all uh logo
types icons that we going to use on our
prototype they already available for us
in section plugins let's go to resources
plugins and you can run here the plugin
which is called logotype run the vctor
Instagram
insert resize
it also don't forget to check your
output uh next thing that we have to do
is to work with a plugin I'm going to
run the plugin which is called icons uh
by default here you have a size
1990 but in my prototype I'm going to
use the icons on the size 30 and 30
let's search for her icon select and
send double check your output for
example in my output I cannot see the
heard and sent button it's because your
main frame is iPhone which is this one
on the left side uh but my two of icons
are out of my frame which means you have
to select both of them and drag inside
of iPhone make sure all your items has
to be under your main frame only in this
case all your items will be available in
your output section next part we have to
work with circles which allows us to
include or two upload our stories let's
go to shapes select the ellipse draw it
here uh on the right side we can see the
weight and height where I'm going to for
example apply side 60 and
60 and now I would like to duplicate
this cips and for the second one let's
assign the size 1550 - 10 and you can
change the color to differentiate the
first circle from the second one so why
do we need the two circles Front Circle
will get the Avatar picture the back
Circle will get the gradient color
that's the main reason why we got the
two circles here and please duplicate it
line in order to fill out the circles
with the avatars we need to First select
the circle which is on the front part
let's go for our plugins and round the
plugin which called unsplash un splish
is actually the website stock free
website to take different photos images
from these categories let's select the
portrait then select
one in the same way please fill out all
portraits the next part is to fill out
the backside circle with gradient color
to apply the colors for select your
ellips go go to the FI section and we're
going to change this solid into gradient
one in this part we have to manage these
two shapes the first shape allows you to
fill out the top side of your circle the
second shape allows you to fill out the
down side of your ellipse or Circle in
the first part select the color which is
close to purple in the second part
select the color which is close to
Orange and don't forget to drag your
second line in order to fill it out with
the color as always it will be on
transparent boat the same with others
[Music]
steps okay good next part is a text we
what else do we need we need the
horizontal line which separates our
story section from main page section
let's do it uh in our own example uh go
to the shape select the line make sure
the color is light gray like this and
now let's start creating the main page
section to create I'm going to for
example copy this SE user and paste it
here let's resize it make sure you have
highlighted both of your circles and
apply the same WID and height for
example in my case 25 and 25 let me copy
this users's username put it next to the
Avatar and the next comes here the three
dots um you know the three dots it's the
ellipse let's draw it here assign the
size for example three and three at the
same time the color has to be black one
and don't forget to duplicate since we
have a three dot you have to duplicate two
times now we need to post the picture
time okay the next part is again icons
like uh like commenting sending and
saving so this one is called bookmark in
icon part and the text like byart and
example to complete the liked by part we
need to copy the three avors paste under
your icons and let's resize the three together
together
to make the text bolt you can press the
keyboard combinations contrl b b means
Bol last time text let's say here posted
day is November
16 okay for this text I'm going to use
extra light and change the size for
example seven one moment don't forget to
check your output all the items that you
have inserted in your workspace should
be available or visible in your output
next part we need a downside uh this one
footer home I can search reals um what
else shop and
profile uh before to add all these icons
we need to First draw here rectangle
because when you'll scroll the page all
your items should be fixed on the
downside and the downside should get
white color so to get this white color
exactly we need this shape make sure it
has a white white
icons search for an icon home [Music]
first okay here we are in that P we have
finished designing our first page now
our task is to add some functionalities
which first we're going to start
scrolling our page before to add the
scrolling option we have to group some
items uh grouping we needed to fix the
positions or to scroll this positions
okay that's why we will start from the
downside first the downside if you
remember we have a rectangle and all
these five icons your task is to
highlight all of
them right side of your mouse and group
your selection so you can check it by
taking off this item from out of your
frame and return back so it means all my
items are grouped together next step is
to group the middle part items let me a
little bit res size this one it's too
small I guess list highlight starting
from profile including username SS the
pictures all your items and right side
of your mouse group selection let's take
out our grouped items out of our frame
so my task is to scroll the page that's
why we need a lot of posts so I'm going
to copy this my group item contrl c
contr v and paste your copied card under
your first post and one more time make
sure you have a three posts for this
three post we need three different
pictures double click to change your
[Music] unsplash
unsplash
okay now three of our P are
ready the next task is to group all the
three so I will start highlighting from
the first post second post and please
right click the right side of your mouse
group selection after that please return
back your post uh inside of your
frame okay let's double check our output
so all my elements on the right position
except the footer section right and I
need to bring all this footer items to
front side to bring it you have to click
the right side of your
front let's check one more time output
now it looks better and now we need to
scroll the page at the same time we need
to fix our foot part in order to fix the
footer select your group in my case it's
group number one let's go to prototype
here we have a scroll behavior and
inside position to fix our footer on the
down side we need to click the fix stay
in the place in the next part our whole
frame should scroll okay in order to add
a scrolling option we need to select our
frame go to scroll Behavior overflow
gives you the several options how to
scroll like horizontally vertically or
both directions we need a vertical
scrolling let's go back to output and
try to scroll your page uh please make
sure your bottom side is fixed and your
whole page Scrolls vertically great on
that point we finished the main page of
Instagram so so now we need to create
another frame uh in order to make our at
least one of the circles
clickable let's select the same frame I
used before iPhone 1314 here this should
be the same frame since it's the stories
page I need to fill out whole my frame
with the shape of rectangle run again
your unsplash select one stock free
F okay what do we next um we need here
user profile close button send message
part let's do it one by one
one [Music]
[Music]
uh the next step is to add here the shape
shape
rectangle uh to make it more similar
like an Instagram we need to put down
here the corner let's say 25 degree uh
and then we have to apply the transparent
mode okay to connect this two pages we
need to work with interactions first I
added the story to the circle let's
select the circle go inside of prototype
select interactions when you will click
or tap this circle in need to direct
your page from main page to the stories
page let's check it
out click it here is the stories page
but there is no way to return back to
the main menu so we need to solve it the
same with this close button select the x
button direct your page from the stories
page to the next to your main page again
click it now it returns you back to the
main page so make sure your page Scrolls
at the same time at at least one of your
circles should get a stories and one
more thing how we can for example click
the like button to get a red colored H
it's really easy so you can just easily
copy your second frame for example in my
case is iPhone number two I will copy
all items and paste next to it you need
to change only one item which is the her
icons
and the last interaction click your
shape one more time interaction when I
page go
back click it close it go back scroll it
click it open like it close it okay
really easy to create that prototype on
figma now your task is is to make
clickable at least one of the given
items from the footer
section when you'll finish on the top
side you have a share
button uh make sure it's anyone with the
link can edit copy your link and submit
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
