Figma setup for UI/UX design projects

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

Channel: Aliena Cai

Views: 23,655

Keywords: ux design, figma design, ui design, ux design tutorial, user interface design tutorial for beginners, figma tutorial prototyping, figma tutorial for beginners, figma, uiux, organize figma files, organize figma projects, figma setup, figma file setup, figma 2022, ui ux design, design education, ux design setup, aliena cai, figma file, figma file organization, figma file organization best practices, figma file structure, figma file structure best practices, ux design figma

Id: 2HKfkMlT4X0

Length: 15min 16sec (916 seconds)

Published: Mon Jun 06 2022