Figma Tutorial: project organization that saves you hours of work

you use figma all the time but you're organizing it all wrong and I'm not talking about naming layers web designers everywhere prefer figma but no one's taught us how to set up our files

what is the difference between a file and a page when do I use groups or frames I want to break down the ideal structure on a design file why it matters and how to structure your files

from top to bottom so your developer doesn't hate you let's get started first on our list starting from the tippy top teams and drafts teams are your collaborative space in

figma a place to collaborate with other designers share resources and collectively work on a project Under One Roof different members can have different role restrictions so it might

be ideal to create your project under a team if you're concerned about other people having too much access conversely drafts access your private Workshop where you can experiment iterate and

develop ideas before you present them or you can just use those files for fun like I do both teams and drafts have files in them so how do you make sense of those let's dive into files imagine

them as individual projects if your project is small or unique features if your project is large in the case of an organization like one password or fin Suite they might have individual files

for each new feature or initiative but for smaller projects or maybe freelance gigs you'll usually create one per client with a website as its own file try to give each file a unique thumbnail

think of them as book covers they should give a snapshot of the contained design make them captivating but more importantly make them easy to scan if every book on a shelf had the same cover

with different text it would be pretty tough to quickly find what you're looking for so try to make it easy on yourself and for anybody else looking for your files here's an organizational

tip always separate by projects or features for instance website redesign as a project or checkout flow as a feature this categorization helps you

find what you're looking for faster and keeps things more compact for everybody else now let's talk Pages inside each file you'll find a section called Pages they act like tabs in the browser

separating content by each website you could have phases per page or even features per page but how do you know when to use a new page versus a new file if you're starting a fresh design theme

or a completely new project opt for a new file use Pages for drilling down further within that theme so how should you set up your pages you'll want to maintain a logical flow this could be

based on user Journeys device types or even phases of a project let's say we've taken on a small freelance gig for a startup we're going to organize our Pages by The Phases within the project in this example we're going to start

with a site map to figure out how the website should be laid out then low Fidelity wireframes High Fidelity wireframes and maybe two extra pages an archive page where we can store old ideas that maybe we don't want to throw

away yet and an assets page where we can move things is we want to export in Mass we can see that by using this structure anyone can jump into the file and immediately understand the flow of your process and how you move from one phase

to another it's easy to follow along with your line of thinking because we already set it up as a chronological order here's a small tip for making Pages easier to scan creating dividing lines is an easy way to visually

separate the pages with a bit more room between each one if you don't like the dividing lines technically being real Pages use emojis instead they're like visual bookmarks that you'll prepend to

each page name they don't affect the page but they're easier to scan when you're scrolling through the page list let's unpack frames inside each page we have the canvas which can contain any

number of objects that figma allows images shapes text groups frames and sections consider frames as your individual canvases or artboards where

your actual design comes to life it helps to sequence them logically just like we did for Pages for a website it could be landing about services and contact frames if the nav in your design

is arranged in a certain way arranging your frames in that way will be easier for you and your developer to understand now when do you use a page versus a frame frames represent specific design

views while pages are a collection of such views you could put an entire app in your project but when you break it down you'll likely want the flow of each feature on a new page and each screen

within a unique frame or take a website you might want each phase of your project as a separate page but each frame on that page as a page from the website aside from just the

organizational aspect frame resizing is a blessing for responsive design you can visualize how designs adapt to different device sizes using constraints and auto

layout in addition frames can be clipped by default frames show all content even if it's outside their boundaries but you can toggle clipping to hide overflowing content if you're familiar with

webflow's overflow hidden this works exactly the same way the content isn't removed from the frame it's only hidden outside the bounds you specify I like to rearrange my frame so that each page of

a website moves from left to right and States within live below each frame like hovers and interactions I try to create more distance horizontally to make each flow distinct from one another next is

groups they let you keep elements together when designers first start using figma one of the challenges they run into is when to use groups and when to use

frames so let's make it easy use groups for short-term combinations or when you don't need the flexible structure of a frame frames come with more control especially

with properties like constraints and layouts if you're simply keeping objects together but you don't need them to do anything else a group is for you a group can't have a lot of the properties that

make frames so great no fill colors for backgrounds no constraints no Auto layout no clipping content and no Strokes on the entire container simply

put groups are best served for things that scale uniformly together like icons illustrations and experimental ideas that you just need to keep near one another lastly let's talk about sections

there are newer organizational aspect of figma and they're perfect for Dev handoffs they create larger divisions in your design representing bigger chunks or full-fledged features when you

finished a set of designs you can wrap them in a section to create different distinct segments for a developer the best part is that you can do this even when they aren't Dev ready just Mark the dev ready option and let them know what

is and isn't complete I want to talk briefly about layer names it's a contentious discussion within the design and Dev Community but there's a simple answer for whether you should name your layers or not you're a solo designer and

developer building the content that you design yourself it's not likely that you need to name your layers you know what they are you made them in the first place but if you're just a designer and

you're handing off to a developer a little bit of renaming can go a long way while developers don't expect you to rename every single layer if there's a layout where a feature has a specific

name it would be helpful for them to have you give it a name otherwise they'll give that section its own name and when referring to changes and updates you might be using totally

different terms name your files Pages sections parent frames parent layouts and anything else you really need your developer to name correctly remember

being a great designer isn't just about crafting beautiful visuals but also ensuring they're structured well for execution so dive deeper learn more with our other videos don't forget to like

subscribe and hit that notification Bell until next time keep making your devs happy