How to setup your Figma file for product design

hey friend welcome back to another video on my channel it is nice to see you here again now I've gotten quite a lot of requests to show you my figma file setup and how I actually organized my design files in thickness so I'm gonna show you that today and stick around because what I'm gonna show you is actually a figma template that you're gonna be able to get access to download completely for free also if you decide you want to take your learning one step further after this video then you can always put one-on-one time with me on superpet and there will get 30 minutes to have a video call and discuss more in detail your workflow and your process alright let me show you my thickness so here I have figma open and this is the template that I've created for you and now you can see that it's got a nice cover setup and I've done this completely intentionally I don't know about you but I go crazy when I come into a figma project that just has a lot of missi looking files and it's really hard to kind of get a sense of where as what and what is what when there's not really any organization visually so I've set up this cover that you can just update really easily to match your own project or your own team and it kind of just helps make it easier to identify projects so let's open this up now you can see here we begin with the cover and you can edit all of this yourself so here I would put your team name or your company if you work at a really small place and then the project name some description the month in the year to give a bit of context of when this was worked on and then I like to add a photo and also a status of the design and I've included in here some different statuses that you can flick and switch between to kind of match where you're up to in the design process so let's take a look at how I actually set these files up from a high level so over here on the left you'll see that I've got several different pages set up we've got our cover here and then followed by about latest designs and hand off now the About section I like to include this for anyone that's coming to this figma file for the first time maybe they don't know what this product is about or they don't have any context so I like to kind of include this as a kind of start here place for anyone to kind of get calm takes on the project latest designs is where I put my latest work so anyone who comes into this file if they want to kind of just get us in straight away of where the design is up to and what I've been working on lately they can go here to kind of see what the latest work is handoff has the final designs and implementations and specs for engineers then the next section I have is actually a section all about reviews and crits so in our team we have both weekly design reviews as well as crits which are a little bit more informal crits and more just kind of the immediate designers and we kind of crit each other's work and reviews are a little bit more formal where we have more cross-functional stakeholders in the actual review and so I kind of like to keep a historical eye gift collection of the different work that I've shown at different milestones and different points throughout the project and it's really easy for me to then go back historically and see like what I shared at what review and also the progress that's been made in the last section I have is sandbox and this is kind of like a playground where it has all of my explorations all of my messy work this is kind of the place where I'm actively working and designing and I'll move frames from the sandbox to other pages within the Sigma file so with that high level kind of done let's dive into some of these a little bit deeper so beginning with about like I mentioned someone who's come to your figma file for the first time this is the TLDR where they can learn about your project if i zoom in a little bit closer I've kind of set this up like a slide presentation so that if you wanted to maybe you were presenting or giving a review you could actually open this up in like the prototype or like presentation mode and kind of go through each as like it was a presentation so in this kind of like about presentation I have included you know common things that I often include when it comes to my projects so first we have like a little bit about the team and here you can include all the different people or the partners that you're working with on this project then the project objectives so like what is it that this project is trying to solve what is like kind of the key focus of this project and maybe within a project with several different work streams and this particular like design file is focused on one work stream so like that's here I've included kind of a little way to sort of highlight what that work stream is so like just for context to kind of explain that better often at uber it's when we're working on a project we have to think about multiple sides of the marketplace so if we're deciding something new in the eater app we might have to also design that experience that supports that in the restaurant tooling so these might be two different work streams where we're working on one project but there's like a work stream for the eater app and then there's a work stream for restaurant tooling I hope that kind of helps make that a bit more clear so once you've got sort of the key project objective I've also included a slide here about work streams and timelines so maybe you know you have three different work streams that are going on for this project and you know kind of just outlining the different phases and the different milestones and kind of you know at what point you expect to be at you know different parts of the design process and you can edit and adjust this of course to fit your project and your timelines I always include a slide to any relevant documents so any like key documents related to design and research maybe you have like findings from usability studies or maybe you have some you know more detailed planning and timelines for the team you can include those here and then I just find it helps to link to you know product and engineering things as well just to give context of like you know what we're actually working on together as a team so you know I've got a few more extra slides here problem statement the business case also you know some how might we and key overall protocols so you can kind of get a sense here that like if someone were to jump into this they can very very quickly get a high-level overview about what this project is what your focus is what you're working on and they don't have to like ask you to kind of give an update and I find this really helpful especially when I'm looking at past projects so something that might be a year or longer you know old and having this context is just really helpful because maybe the designers left the company or like things have changed a lot since then so it's helpful to kind of know what was going on at this point all right latest design sections so I've left this blank because it's for you to put your latest designs in but I have included these headings here so typically I'll include like a big hitter for the work stream or like the category of work that the designs below relate to and then I also kind of include a little status here of where the design is so if it's completed if it's in progress if it's blocked or maybe it's not even started yet I find that it's just helpful to kind of have these statuses because often I'll have engineers jumping in this file or product managers and people kind of want to know like you know what's what's done what's not done what's the latest like where you kind of up to in the design process and so I try to sort of indicate where I'm up to with these like status bars I guess all right in the handoff section a game so you might have several different work streams in this project so you could just duplicate this but if you have one work stream you know you can put the title up here and then again I have these statuses here so that it's very very clear to engineering what is actually like complete and officially handed off typically I'll include the course screens here and the flows followed by you know outlining any specs and then also different states so you know if there's a button maybe I have to show like the hottest stage the pressed state the active state etc etc now you'll see I haven't gone into depth here about sort of showing you how I would lay these out I'm planning to do a whole video about my hand off process what my QA process and implementation a relationship is like with engineers when they're actually building the designs so stay tuned for that I'm gonna go into a lot more detail about what this actually looks like once you put screens and things in here so stay tuned for that so then the review sections so there's a page for reviews and crits now I've left these blank because I don't know how you run reviews it your company and it's kind of up to you to lay out the work in a way that you think is presentable typically I will have a few sort of slides at the top so you know you can duplicate over some of the slides from the About section and kind of edit them as you see necessary just to kind of introduce the work like talk about where I'm in in the process talk about what kind of feedback I want today so I'll typically have a few slides at the top followed by the actual screens or the flows underneath that I actually want to review in this session then lastly the sandbox again this is open because this is your Missy playground to put all of your work mine usually looks like a mess honestly I don't organize my sandbox very well so you know this is kind of your place to play and explore and refine your designs a few other key pages that sometimes end up in here but it's not necessarily owned by me the designer are things like you know any research related stuff or we also often have a content sandbox and so that's where our UX writers kind of you know try and play around with the words and try and figure out what the content strategy is going to be maybe they want to stress test some of the content in the actual designs so that's often another page we have in here and then I might also have a page for like future work or like fast follows so things that maybe didn't make it to the handoff maybe they got the scope or were reprioritized I'll kind of put them in like a archive or like a v2 kind of extra page so that the work is still there because it's still relates to this project but maybe they just didn't make it to the handoff cut so that is a look at how I set up my figma files now I have run into the occasions where my figma files have gotten too big and figma sort of starts of warning me that I'm using too much memory so when that happens I'll often remove any old work so things from my sandbox are in the archive to a new file that's kind of just like an overall archive file for this project but I don't often organize that file really at all because it's just kind of old work that's not really yeah up to date anymore now as I mentioned at the beginning I am making this template available for you to use all you need to do is go on over to my website sign up here on this page and I'll send you a link to this template now if you're already on my newsletter I will send this out to you so don't worry you don't visitor need to sign up a second time but if you do sign up a second time I will send it to you sooner so feel free to go and do that if you want to get the templates sooner rather than later okay hope you found this helpful I'd be really curious to know how you sit up you're flicking the files was there anything surprising from the way that I do it maybe you have a bitter way I'm sure there are better ways to do this honestly but this is just what's worked for me and my team so let me know in the comments below what you do differently and I'll see you in another video I guess thanks for watching friend bye [Music]

Channel: femke.design

Views: 50,414

Keywords: design, product design, ux design, research, user research, ux research, women in tech, women in design, designer, graphic design, design education, tech, uber, uber design, figma, figma project, figma setup, figma set up, figma file, figma template, figma organization, design organization

Id: aerHboWAG1E

Length: 11min 26sec (686 seconds)

Published: Sun Jul 05 2020