hey everyone i'm aliena and welcome back to my channel today let's talk about how to organize
a figma file when i started off as a designer most of my files look something like this
actually it can be way worse than this because usually i paste in a lot of design inspirations
from other apps but this is my first project it was a small scale project so it didn't look
too bad but now i learned that there's actually some good ways to organize your files
so today what i'm going to do is i will show you my system by simply reorganizing
this file from like 100 years ago and nowadays i'll have this default setup i'll have something
like a thumbnail page a documentation page an information architecture page personas or user
journeys page a latest version prototype page and then a sandbox page and an archive page
by the way it's not like for all the projects i'll have every single of those page but it's
more like if i want to start off a project i will first put in those pages and try to find as many
information as possible and if i just don't have something like let's say if i don't have a persona
that's still very normal yeah but let's just see this old design that i got here so you can
see like i still try my best to organize them by different iterations but first of all what i see
is that i don't have a thumbnail a thumbnail something that will appear here once you'll
go back to your figma [home page] it will just show what this document is about so this is how
my file looks like without a thumbnail so the first thing i'll do today is to teach you how to
have a thumbnail page so i will have a page and name it thumbnail i'll put it to the first page
and then i will use a frame a thumbnail frame is 1600 by 900 i will fill it with a color
yep and i will name it thumbnail first i will name my project
i'll make it really large
i'll edit the line width great and then i'll copy and paste this text box and then give it my name
i will try to make it a regular font and you need to select all of them and
then give it a smaller font so other than my name i sometimes also put in the date
right and then the line height can help you to adjust the line height and for me i have one of
my small logos so i already copied from somewhere else i'll paste it here and if you don't have a
small logo you can always design it later and then on the right i will just try to use a huge
circle to design a look that separates the page a little bit so i will move this into the [frame]
i will add the color a little bit to make sure they look good and then on the right side i will
try to give it a status summary so first i'll create a rectangle with the maximum angle size
so just putting a super large number and will just automatically be a super nice curved angle
and i'll give it like a green status bar because this project is already completed maybe something
like this for now and then i'll put it okay again and the progress should be completed and
yeah i'll put it on top of here make it a white color
and make it a little bit bigger and make it medium or maybe bold yeah if you scroll
to the top you can find this little alignment thing that helps you quickly to align the text
and tada the thumbnail is done and once you are done with the design
all you need to do is to click this entire frame right click it and then choose set as thumbnail
so after a few minutes if you go back to figma right here it will look something like this which
is great and the great thing about this thumbnail design is that you can use the same template
across different design files so that's the first step and then what i'm going to do is to organize
all the craps here so usually after thumbnail i have pages like persona documentation but
it's one of my small personal projects i don't have those so i just skipped both
so the most important thing i want to find is my latest
prototype which is maybe this one and i will drag it to the second page and i will rename
it first give it a little iphone icon already prepare it somewhere so just copy and paste it
you can have like a version number uh for this one i'll just give it the prototype number
v1.0 and since i did an iphone 8 version i will note that down as well
but the problem i see now is that although i have those screens i don't have any arrows or
documentation or small notes regarding what are these things so let me show you what i mean on
this page instead of showing the layout like this what i will do is to first understand where is the
starting point of this entire user flow and i see that the starting point is here so i will give it
a little triangle here like this i will double click it choose this one and press shift choose
this one so you can choose both angles and then set the angle curve to a very large thing to make
it looks like a water drop click return and adjust it it can be large i don't mind it to be large
okay and then i will turn it 180 perfect give it a color
and then give it a text i will say start
now what i did here is simply mark down where is the starting point of this entire project i'm
pretty ocd so let me just adjust the color again great and then i will use lines and tags to mark
different user flow so i will move this group this one move it up and then i can use things like line
adjust the color i can just copy the text over here
great and then i will copy this entire group to mark different other pages
now i'll move the other things around as well
from here i can see that this is one entire user flow so i will copy this again
but what i will do is i will make this line longer to cover all these pages
and then i will give it a name like add another scan
so if a user photo takes up a large space i will just move it downward to a separate line like
like this
and the next thing i would do is to add a little bit of arrow lines to indicate
how the things move around i'll click the drop down here and i'll choose arrow and
then i'll just draw an arrow between two screens please press shift in order to make it straight
i'll edit the line width to something like four sometimes it might disappear simply because it's
being embedded in one of the other frame so you can just move this arrow up all the way to
make sure it appears like this and that's already good and um i don't know if you like this kind of
sharp edge i personally don't so the way to change it is to just click this line here and
then make it to a rounded little edge great so now i know that once you click the home
it goes to the home page and then once you click received it goes to this page
these information are not supposed to show outside the screen but anyways it is what it is so i will
press return and i will give a little bit drag things here to make it more flexible
you know put it here put it here and then adjust these okay and then you can also click return
and make all the corner to like curve corner by setting it to something like like this
and once you have like one or two arrows you can just copy it to make other things work
if you have like a very complex line to draw you can press p to use the pen tool and then just draw
the curve
i will make it 4 width and then 10 and then i will give it an arrow
now just press shift and select all the lines the arrows i don't want it to make
it too dark and that's why i would just change the color to something a little bit more subtle
like this like maybe ah yeah maybe this whatever this is fine
now i have something that's better annotated now after this prototype page i will organize
all the other pages there's a sticker sheet page so i move this up here give it a little icon like
for sticker sheet i would put it before prototype because sticker sheet is something that i
use for a long time it's not an archive file and something i see in my sticker sheet is
that i have some things that are duplicated and not useful i'll delete those and i'll
just kind of rearrange the look a little bit i can do better but not in this video and then after
those i see that it's just all craps like this page is just pure craps so just name it archive um
you can find some emoji to represent archive but for me i usually use this little box archive great
and then for archive i will put it underneath the latest prototype actually i'll press prototype i
will add another page by clicking add new page icon and then i'll just give it a space this
pretty much just created an empty page but what it does is that it really is separated different
sections so you just separated anything that's important from from anything that's archived
ideally you don't archive file just by throwing things inside so for example i see that there is
a little bit of flow here i will move it to a section and then i'll use things like whatever
we have here this format to annotate these these things is put into archive so put it here
say something like prototype last edited may 2nd 2020 and then i'll add some notes notes
the reason i didn't use this version is something here you can take more notes and
probably i'll use a little bit of smaller font for notes and here it's a great spot to note
down why you make certain design decisions for design change and that's also super helpful for
other people to understand the project and also some great assets for your portfolio
under this archive i can see that there are many other pages where there's like
different design iterations i'm not going to put all of these all into this archive page simply
because for many of these design iterations i've created a separate prototype link and that link
is embedded in some of my user research study documents so that's why i don't want to move
things around because that might change the link and that might mess up some things i did before
and i will just put these pages underneath archive but i will give it a different name like for this
one i will say something like lo-fi prototype v1.0 and since it's also underneath archive i will just
give it like a little arrow to indicate that it's underneath archive and this is the oldest file so
i'll move it to the bottom here i have iteration 2 and i'll rename it to little arrow lo-fi prototype
v2.0 here i have a mock-up i'll name it to arrow markup v1.0 here i have a mock-up for iphone 10
i will name it to markup v1.0 but iphone10 so if i want to go back and work on this file again
what i will do is after this little empty page i'll create another page and i'll name it sandbox
sorry i always need to find emoji from somewhere else so give me a second
and if i want to make any design changes or design exploration i will do the design exploration
within the sandbox page and only when i feel like this design decisions is good to share with other
people i will make it to a separate different page like prototype v2.0 let's say but i will
start exploring the design within the sandbox simply because sandbox can be messy you can paste
different designs inspirations into the sandbox page and it won't confuse other designers yeah
and that's pretty much how i organize figma files these days i hope you find this video helpful
and as always thank you so much for watching my video don't forget to subscribe like and
comment and share with other people more content coming up so stay tuned and see you next time