File types
Figma has two types of files: Design and FigJam.
These files can be grouped and organised within Figma teams using projects, which act like folders in a file system.
Teams
Teams represent business functions, such as a brand, component library, or explorations. Within each team are projects.
Projects
Each brand team follows roughly the same structure:
- FigJam - Collaboration files for this team
- Project Files - Projects are grouped logically based on the team's needs. Projects contain files specific to a task. The example below illustrates the projects within the Standard Life team
Set up projects to invite only certain members. If a project cannot be found, check access permissions.
Files & Pages
Files are the core of where work occurs. Clearly labelling pages in a structured way makes them easy to navigate.
Aside from Cover and Graveyard, files may have multiple pages of the same type.
Branches
Every file within Figma supports branching, allowing you to work independently of the main file. The branching documentation covers the strategy for using branches in projects.
Project Team Files
- 📘 Cover - Cover file contains the project thumbnail
- 🚀 Exploration - Indicates that these are only at idea stage. In some instances, make this a branch
- 🕹 Prototype - Indicates a page contains a prototype. In some cases, make this a branch
- 🚦 In Review - Displays that files are under review by stakeholders
- 🛠 Annotations/In Build - Files specific for development reference, include the Jira ticket name in the page title
- 💾 Published - Designs that have been built and published to a live site or app
- 🔬 Research - Contains supporting notes and exploration, using testing software for capturing research
- ☠️ Graveyard - When files are no longer needed, move them to this page, should they need to be referenced later
Examples
Use emojis as prefixes to pages as a visual indicator, for example:
- 🚀 Mailbox Redesign
- 🕹 Mobile - New User Flow
- 🛠 JR123 - Dropdown User Story
Phases
The emojis change based on the page's development status over time. The page title may also adjust for additional clarity. For example:
- 🚀 Mailbox Redesign - Ideas
- 🚦 Mailbox Redesign
- 💾 Mailbox Redesign - Live
Component Files
- Overview - Cover file contains the project thumbnail.
- Component Name - A page named the same as the main component
Web v React Native Component Libraries
The approach to the structure of web and native component libraries differs between platforms:
- Web - Each component has its own dedicated file to make it easier to manage and branch for component contributions
- React Native - React Native components are located in a single file, because they are less likely to change
File Links