Skip to main content

First of all, I’m confused by the definition given for files…


Screenshot_2021-02-05 what are files for in figma - Google Search


Source: https://tinyurl.com/19ba9qcp


But, overall, I’m trying to grasp what the hierarchy of things in Figma is…



  • A frame exists within a canvas and a canvas can have multiple frames - right?

  • Does the same hold true for files so that we would say → a canvas exists within a file and a file can have multiple canvases?


If the above bulleted points hold true then the following should be true also??


A file has a one to many relationship with canvas(es) and a canvas has a one to many relationship with frames?


Then the order of precedence is file → canvas → frame where the file is parent to canvas and canvas is parent to frame?


Then, how to use them?


Sooo… If that is the case then a person would probably use files per project or per client? In other words, you would name the file the name of your project or the name of your client?


Then also you would name canvases based on the kind of design it contains? For example: a moodboards canvas that contains moodboars, a content spec canvas that contains the ui mockups for different device types, and a viewport spec that contains the content seen in several viewport sizes - so 3 possible canvases in one project or client file?

Hey @Jake thanks for reaching out. Hopefully I can help clear some things up. 🙂



^ This is correct. Frames are essentially just groups but with special properties. If you’re familiar with other design tools, frames are very similar to artboards.



^ Kind of.


The canvas is the space where you create your designs, build out your prototypes, etc. Within a file you can have multiple pages and each page technically contains a canvas. So in that way this statement is true. With that being said though you don’t really need to think of canvases in an organizational way. They are more just the (nearly) boundless container in which you work in. In other words they just have an x and y axis and not a defined width or height.


Sorry this might have made things more confusing 🙃


———


The order of hierarchy is this:

Org (if you’re on the Org plan) > Team > Projects (think of these as folders or spaces) > Files


Then within Files you have the following:

Files > Pages > (Canvas)


Within each Page you can then organize however fits best. You can use frames to represent screens (e.g. Desktop, mobile, etc.). You can use groups to combine similar objects. Or you can leave everything on one level. This is really up to you and the type of project you’re working on.


One last thing to note is that each Page can have a single prototype. So for example if you were working on designing a website. You might have a page for desktop, a page for tablet, and a page for mobile. Then within each of those you’d have a prototype that walks through the flow.


Also here’s some further reading that might help too:


Team project and file organization

Groups vs Frames

Moving from Sketch to Figma


Actually, they way you explain it makes sense. I can see that there’s plenty of terminology to go around when it comes to Figma though.



Now it feels like there’s one more level of hierarchy than there needs to be (unless you do like, for example, one device type per page in a file, or one screen size per page in an-other file (where those files are in the same Project).


Or maybe that extra layer of hierarchy just gives you the option of splitting things up or keeping them all on one page/canvas.


All in all I totally get it now. Thanks for such a clear explanation. Figma is my first design tool experience ever so I really needed that.

Reply


Terms & ConditionsCookie settings