How I organize my Figma files to overcome the creative block (with Template)

do you know that feeling you get when you start a new file and you're facing an empty canvas on your screen and for a moment you feel lost and you don't know where to start it's kind of daunting right like you're starting and it's empty I imagine this is the writer's block for writers but if there's such a thing there's a project design block when you start a new file and you just have to think of what to put in it if you haven't experienced that I am so jealous of you I go through this every single time I have to start a project actually matter of fact I have this before starting a project so I have this fear of not not knowing what to put in it which makes me procrastinate and like get to the very end of a deadline when I have to submit a design if any of this sounds interesting at all to you or familiar don't despair there are ways you can get them blocked and through the years I've found what works for me because what was working for everyone else didn't work for me so if with this I can help even just one person find their routine and get unblocked when starting a file that's gonna be a success for me so if you're interested listen along we're gonna do this thing all right so now follow me onto figma if I look this ways because I'm trying to look at the screen it's not because I don't want to look at you guys I'm in the untitled screen that shows up when you hit this plus icon and try to create a new file so I like to create in drafts because I work on a big team and whenever I create a file if I create it in the project folder a lot of people will see it and there's no really reason to clutter the projects page with just a bunch of untitled files that I don't know where they're gonna go what they're gonna be named so what I usually do first is if I know the name of the project I'll just rename it and call it you know project alpha or whatever it's called all right then what I do is I go here on word it says page 1 I expand this and try to give a give myself some breathing room here and start from the first very first page so in order to get unblocked I try to not think about content yet but try to put a structure to it so that when the structure is in place then I feel more ready and creative to actually start exploring so from here I go with first thing first I need a cover so I don't have one yet so it will come I'll have it usually what I do is I copy it from an existing file that I worked on so yeah I usually just create a cover and we'll fill it out later I just know that sooner or later I'm gonna add a cover for now it's not public so no one will care or will know so go ahead and add a divider so a divider for me it's just an empty page with you know some dashes as a name so it separates the cover from the actual content I just don't do anything on this page and then I hit plus again or add a new page and I add my main two pages so one is explorations so I usually always add the explorations tab and the references tab so now let me spend a little bit more time here I let's start from the references tab actually I usually add that as my go-to like the first place that helps me get them locked so what I do there is I copy paste into the references tab anything that comes from previous projects screenshots of competitors maybe audits that were done in the past I just create a ton of stuff so yeah I'm a heavy screenshot er I I lose my files a lot which is I don't know not optimal for working at Dropbox but I I like to just screenshot stuff and reference it here so they don't have to look for it every single time that I need it so I just you know fill this up with references the more you have actual UI vectorized references from past projects instead of screen shot of course the better and in those cases I would just copy paste but sometimes you're looking at competitors you don't have the sketch file or the figma file for them and so I just dumped stuff here so let's say for example I have this folder of photos collie photos cause my dog and so let's say that I'm creating a photo app for my dog and so I'm gonna need you know some reference files they're gonna of course paste as huge it doesn't matter right now because I'm not trying to organize them in a pretty way actually the most messy this page is the best this just reflects my mind and how like things are you know crazily organized in there okay seems like I'm having connection issues but it doesn't matter so from here I have like all of these references and usually this page becomes huge full of stuff I go into my explorations so this is my playground my like place where I can do whatever I want with the designs so I usually just go ahead and take maybe the one that is a better reference for me and imagine that these photos are actual UI of stuff there's no need to have that now but imagine that this is a I phone screen I just go and duplicate as much as I can try to change things up and and figure out where I want to go so this is a space for me to just explore hence it's called exploration now I like to keep it simple people add emojis right before the names you know like maybe some sort of comm pass or some sort of book if you like it do it if you're a super visual person for these things I discovered of myself that I end up getting distracted more than necessary if I have emojis there so I just go with plain text but you do you so once I have these there are a number of accessory pages that I add depending on the project some projects are very well done with this because maybe we need to move super fast and explorations are all it takes till I got a good one hit that share button anchor it on to one of the explorations and my engineers will figure out that that's where I need to take them where they need to be taken sometimes you may need to be more explicit and add some something like a I don't know m0 maybe your first milestone and you add it here and then what I like to do is to separate use a divider again roughly at the same number of dashes as the one above but a divider that divides anything that is temporary and work-in-progress from the actual milestones so you could imagine this becoming you know a milestone one look at that less than 2 m/s some 3 so that PMS and engineers know where to look at they may or may not actually I like this order better but they may or may not know if which of these is final maybe they're building them 0 but they get confused if they see more things so sometimes this is where I actually use emojis sparingly to help me label what's final and what's not and so we usually do a check here to just tell them that this is where they need to look and that maybe empty our name I wouldn't even put it if I'm not working on it but I see these as screenshots in time of what they need to build so for m0 what they need to build is ready and this for m1 is in progress so I would just go like super clear like that reason why I say these are a screen shot in time is because I don't want them to look at explorations and get confused onto what's final and what's not so I just packaged it up in a nicely organized way in m0 and I usually have something similar to like this plus some text on top like to describe well I usually do different colors but you get the idea and everything that is under here relates to this test everything that is under another one of these blocks becomes something else so I use blocks like these to organize my content once I have this it's good to go but in that in between there are a number of accessory pages that a project may require maybe something is super simple and it doesn't but let me just show you a couple of ones that may come up so you may need let's get into the scenario you may need to do some research so again I want a screen shot in time of what design I want to show users so I'll just go here and say research June 20th all right and then here I'll work on the actual mocks that we're gonna show users maybe sometimes I remove some information to make it less confusing for them and focused so I just put whatever I have here and similarly I do the same for presentations let's say maybe the day after after we have results from research or prototypes similar thing I want them to be a screenshot in time because I'm trying to share maybe one specific interaction and not the whole project so I like to have these as the bottom of the list something that I can reference to with the link if I need to but I don't need people that are exploring this file to accidentally go there and think that this is maybe the most recent I just want people to stay in the top three or four tabs which is eventually what they'll what they'll check now if all of this sounds interesting or any of this resonates with you I have a good news so I've been working on this framework for a little bit and what has worked for me may be very well good for others too and so I've put together what I'm being calling a design project template and let me go at the very start of this I publish it on figma community and you can find it I'll push the link down in the description below but it has a number of features to get you unblocked from that creative block product designer block that you may have while looking at a blank figma document so it has a number of cool things but just I just want to highlight two that have really been helpful for me so other than the pagination here which definitely helps because you don't have to focus on the design yet but you focus on how you organize it first I have these two tabs which are really interesting and I use I've been using for a long time on paper the software from Dropbox that we use to create documentation but more and more I think about it more I think that they should live in figma so I've started this project overview template that has some prompts so it has some questions that you can ask yourself to figure out where to start is this the problem worth solving how are we solving this problem has this we solved before what is the design proposal what are the risks so this should get you going because just by answering these questions it should start getting your creative flows out that plus another thing that I usually do on my own and I have in my mind and I thought well maybe it's good to write down and cheechee co-worker of mine actually wrote it down already so I decided to just incorporate it here just like she did it didn't need to change anything and it's basically a checklist to make sure that your projects are accessible they follow the design system lenz and that you've basically followed all the steps that you are supposed to follow so all of this and the ton more are in this template now I don't expect you to use all of this but if this can be a starting point for you where you can remove tabs and add your own that would make me so happy so let me know if this is useful at all duplicated make your own version upload it to figma and let me know in the comments below if you want anything to change of this template or if you find that something else for you is useful in getting them blocked so this is all thank you so much for listening in and if you want more videos like this let me know I hope to find you at the next video have a good one [Music]

Channel: Carola Pescio Canale

Views: 23,617

Keywords:

Id: C4LIC2n6pkw

Length: 13min 30sec (810 seconds)

Published: Wed Jul 01 2020