Because Figma is a cloud-based tool, all our design files are stored in the cloud and are organized within a structure imposed by the tool. Figma allows for up to 4 layers of organization:
Organization Workspace (Org tier only) → Teams → Projects → Files → Pages
As an Atlas Design Team, we use Figma in the Professional tier, which allows us to operate within one Team, have an unlimited number of Projects with an unlimited number of Files inside.
<aside> 💡 Tip: You can pin Projects to your sidebar in Figma, by clicking on the star next to the Project card. Pinned Projects can be rearranged.
</aside>
| Projects | Files |
|---|---|
| **🎨 Resources** | |
| Contains libraries Figma files and other design resources | - **📄 Foundation** |
| *Library of Atlas design tokens | |
| -* **📄 Web Components** | |
| *Library of Atlas design web components | |
| -* **📄 Icons** | |
| *Library of Atlas icons | |
| -* **📄 Figma Utilities** | |
| Library of utility Figma components used to document our designs | |
| **✅ Final** | |
| Designs and prototypes ready for development | Page name 1, Page 2... |
For each page there should be a separate Figma file with the following structure:
• Thumbnail • 🖼 Design, with the designs of static pages themselves • 📊 RWD, with responsive versions of those pages • 💠 Local components • 🔀 User stories, with a separate prototype for each user story. Each prototype should have it’s own “description” frame (see details below)
🚨 These files should be kept up-to-date. | | **🚧 Work in progress** Designs and prototypes that designers are working on | Page name 1, Page 2...
The only rule here: For each page there should be a separate Figma file.
You can structure your files however you want. It’s your workspace. Adjust it however you feel most efficient. | | **🏗 Temp workspace** Irrelevant Figma files, explorations, experimentations, etc. | **📄 Joystream Atlas** A soon-to-be-deprecated Figma file containing designs from the "pre Figma Team era", when everything used to be kept within a single file. | | **🛠 Pioneer (Tweaks)** Loosely organized space for Figma files with designs for simple Pioneer tweaks | |