Tuesday, October 12, 2021

Understanding Figma Hierarchy

 Figma has a hierarchy, but it’s not always clearly represented in its web UI.

In particular, if you are looking at a specific “page” in Figma (for example, maybe a designer is updating a component, and you are a developer ) it might not be clear how to get to that page’s File’s Project ID. (For my team, Project IDs are very important for the tool we built to pull Figma data from its API.)

Empirically, Figma’s hierarchy seems to be:

Organization > Team > Project > File > Page

So for a Monster Global team member checking out some new changes to Buttons, that might be 

Monster (org) > Core (team) > Pre-Production (project) > Core [Jira Ticket Num] (file) > Button (page)

This hierarchy is not well represented by the Figma sidebar. For instance, logging in and heading back to figma.com/ I see this:


But often our Designers hand around links straight to Pages, and the Project ID isn't in the URL... in that case the stylized "F" has a menu with a "Back to Files" option that (if permissions are right and the creek don't rise) takes you to the page for the whole Project, which has the Project ID embedded in its URL.

No comments:

Post a Comment