How to organize your design file on Figma

hi everyone today i'm going to share how i organize my design files [Music] full disclosure i'm not a design file god i don't spend hours renaming my layers and i often find that a lot of in-house designers like myself who don't have to work with clients and hand off their designs to clients we don't spend a lot of time tidying up our files the goal of organizing files for me is to make sure that my stakeholders like my engineers product managers and designers can navigate easily through my file and find the assets that they need to find so let's get started so the first thing that you'll find in my file is the cover this has the team name the designer's name the project name and when it was worked on this helps people navigate through different folders and spot projects really easily i also created a little status pill here where you can write the status of the project so this one is still in progress but if it's launched you can change this to launched i'll have this template available in the link down below so do check that link out then i have a section for engineering handoff and i always put the final designs at the very top of the file just because it's easy for people to access this is an empty page this is just a divider and i like to have some spaces in between because it just helps people navigate through my file more easily and this is where i have my final designs i try to put the final designs at the way top so that people can easily find my final designs without having to go all the way down to find my final designs and i name my pages based on the handoff date so when your project is really big i find it really helpful to have multiple handoffs because usually what will happen is i'll do the m1 handoff milestone one and then there's milestone two and then there's future iterations that can happen my engineers also really like this organization so in the end one final designs handoff i have here a summary of my project so i'll state the problems goals uxr insights metrics and a rough timeline of when the handoff is happening i like to include a project summary in the files so that people don't have to open up google doc and different links to understand what this project is about and i'll also link some of the relevant docs here so i'll use the link function on figma to paste the url so that everything lives in one place this is a section for the user flows so this is a sequence of screens that a user will be seeing i like to use these little cards to describe more of what this user flow is about and who should get this experiment this doesn't apply to all screens but sometimes i will annotate the individual components of the screen because this helps engineers understand what is changing and what isn't changing i'll write out some of the things that they need to be aware of when they're implementing these components and i also have a section for my design drafts these are all the iterations that i've worked on and they're also in chronological order with the latest at the top so before i used to have one page where i make all the changes and edits things would get lost very easily documenting the progression of my designs has been super helpful for me to write my case studies and remember my design decisions and all the feedback that came through because a lot of times the same feedback will come back it's good to have a history and documentation of how your team has made certain decisions then i have a section for uxr so if there are two rounds of sessions that i've done one was a usability test one was a concept test i can have all those smocks in here and then i'll have a separate section for the prototype and i'll put the link to the prototype here just so that my researcher can easily access this prototype without having to navigate through a figma so here's a section for sprints not all of my projects require design sprints but when they do i'll create separate pages for each of the designers that were involved and i'll have a competitive analysis page where i screenshot and copy and paste all the competitors website and mobile app then there's a section for devices i get asked a lot about devices how you can get device mock-ups and where you can find good ones and so i've created a template here that you can use so check out the description link down below i'm going to quickly walk you through how you can use this device mock-up template so once you click on the link down below to get access to this file you're gonna see what i'm seeing there are devices for different types of phones like the ios iphone android google pixel and a more generic phone that is not platform specific and then you'll have a tablet with the horizontal view and a vertical view and a laptop with an imac so what you're going to do is you're going to first duplicate this to your drafts so you do need a figma account which is free and even if you're not a designer figma is super easy to use so you're not going to have any problem using this template so duplicate this to your drafts and open it up right here and now you will have edit access and you can do whatever you want with this file because this file is yours now we're going to go to the phone page and we are going to put in our screen so i've created a separate file that have the screens that i want to put into the device so i'm going to select this frame roll 1 copy command c and then i'm going to go back to the template click this screen this is where your screen goes and then i'm going to copy and paste command v what that's going to do is populate the same screen with the device so all you have to do now is export this to a png by 2x and you export the device once you have the device in your downloads folder all you have to do is go to the google slides that you want to insert this is this device and voila now there's going to be a lot of times where you have to make edits to your screen and you don't want to be exporting new screens every single time you make an edit because that will add up and it will be a very long process so i'm going to show you how you can use this png this is why i've created a png version of the same template so i'm going to export this png by 2x and then i'm going to drop that png into this file i'm going to drop it and then i'm going to go back to my actual screen my designs export this and then i'm going to drop that screen here so these two screens don't match up perfectly so i'm going to do a little bit of customization here and that's good enough but i want this screen to be behind the device so i'm going to click on the right send backward and then now these two layers are in the right place so let's say you want to update this inside screen with a different one right this is like the new screen and you want to update it go back to this screen you're going to now switch the layers now the screen inside is going to come to the top so you can do that by command down down arrow so they've swapped places now you're going to right click and then you're going to replace image upload from computer and select that new screen now you have the new screen and then now you're going to move this back to where it belongs so that is command down arrow so you can also select all and make this screen a little bit smaller let's say that i want to create a new thumbnail for my case study this is the background that i want and i want to put these two screens into the devices so i'm going to copy the screen and i'm going to use one of the generic phone devices and i'm going to paste it into here and then i'm going to copy this because i want to paste it into my background i'm going to paste it here but then i want to also have this green next to it right so i'm going to copy this option move the screen and then this is a very important step you want to detach instance so you're going to go to this layer click your right and then you are going to detach instance once that's attached you're also going to detach this layer that's within the frame the same frame you're going to right-click detach instance and then you're going to go here copy command c this frame and then you're going to go back here and then you are going to click on your screen and then paste it command v you can also delete this so this is the old one so you can delete it delete that layer and then you are just going to export this thumbnail by 2x and then let's see how that looks let me just delete these you're gonna have a thumbnail nice looking thumbnail i'm gonna have a lot more tutorials and workshops and design with me sessions in the next few weeks and months so do sign up for those they're all in the description box below all the information is there for you and i will see you next time bye

Channel: chunbuns

Views: 210,749

Keywords: design files tutorial, ux design, figma design, product design, chunbuns, design organization, figma organization, organizing design files, figma tutorial, design for figma, ux design tutorial, ux design course, ux design tutorial for beginners, design system, figma tips, ui design, ux design process, figma design tutorial, figma design system, ux design case study, ux design portfolio, ux designer day in the life, product design tutorial

Id: hV-do16z6SU

Length: 9min 57sec (597 seconds)

Published: Fri Feb 11 2022