Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current Restore this Version View Version History

Version 1 Next »

Introduction

Moniepoint has a growing design team spread across different locations and working on many products. To keep our work organized and consistent, we need a standard way to structure our design files.

Figma Enterprise is the main tool we use for this. It allows our designers to create a clear and consistent folder structure for all our design files and documents.

Why this?

Our previous Figma plan had limitations. We could only create a single level of folders, making it difficult to organize design files for a large team working on multiple products across different regions. There was no documented system for consistently ordering and organizing design files.

New solutions

  • We upgraded to Figma Enterprise allowing us to create more 2 more folder levels, improving file organization.

  • Implemented dedicated file templates for different types of designs, ensuring consistency and ease of use.

  • Enhanced file identification with improved file covers, making it easier to understand the status and purpose of each design.

Project Structure

The new directory structure for every design file is as shown below:

image-20250106-140200.png

Workspace

A "Workspace" is the highest level of organization or a single product. This includes things like Moniepoint, TeamApt, and the Design System.

image-20250108-101146.png

Team

Each Workspace will have multiple teams spread across different locations. These teams will focus on various aspects of that Workspace's product. For example, within the Moniepoint Workspace, there might be teams for Business Banking, Personal Banking, FX, and the Global App (though this is not the final team structure).

image-20250108-102732.png

Projects

A project represents a significant feature or set of features developed by a small design team. It can also be used to divide a large project into smaller, more manageable parts, or to track different versions of a product. For instance, the design system component library team might have projects for each version release as shown below.

image-20250108-103408.png

Files

This is not a folder, but the actual file containing the design work. We recommend creating new files using the templates provided in the Design System Toolbox.

Available file types include:

  • Feature design files (Figma)

  • User flow files (Figjam)

  • Research reports files (Figjam)

  • User testing & interview files (Figma)

  • Full prototype files (Figma)

  • Presentation files (Slides)

More template types will be added in the future

Page Structures

Every design file should be created with this page navigation structure.

The pages of a file should include as show above;

Cover

To only contain the project cover for the feature. see File Covers

Final designs

The grouping should contain three sub-pages which include Developer handoff:

  1. Dev handoffs

  2. Prototype

  3. QA

Design brief

  1. User stories

  2. PRD

  3. UI Designs

    1. Feature 1 [ as a page]

      1. Iteration 1… [as a section]

      2. Testing Prototype

  4. Playground

  5. Archive

  6. Rules

    1. Horizontal rule

    2. Indentation for sub folders

  7. Iterations

  8. File covers

    1. The template

    2. The status

  9. ConclusionÂ