Guidelines File naming and organisation

File organisation and handoff

Organising our Figma process is important for a functioning design to dev process. We use Figma as our primary design tool, so the information discussed is focused on the Figma process, but can cover a multitude of alternative tools if things change.

Getting started
File naming
Page structure
Prototypes

Getting started

Project file structure

Figma project (Top level folder) = Feature group
- Figma Initiative (Single file) = Jira Initiative
  - Figma Epic (Single files) = Jira Epics
    - Figma Stories (multiple pages within Epic files) = Jira Stories

To keep our design files in a fit state for development and make sure revisions are handled correctly, we freeze files once they have been completed. These files are broken out into separate files that can only be edited by the developer working on it. These 'handoff' files are linked to Jira tickets for easy reference.

Organising files

We mirror the Dev process in Jira by breaking projects down into three types; Initiative, Epic, Story.

Initiatives

We begin by creating a new project and then creating an Initiative file within this.

We start by creating a project in Figma. Below we created an 'Evidence' project. Then we create a new Figma file called 'INITIATIVE: APP-823' under it. This file is where we do our conceptual work, user flows and research.

Epics

Epics are broken out from Inititatives when design is being handed over to Dev.

When we are happy that a user flow is completed and ready to go to Dev, we create an individual Epic file.

Below, a new Epic file has been created called 'EPIC: APP-842'. This has been broken out from our 'INITIATIVE: APP-823' file. This makes it easier to sort and search by.

Stories

Within Epics are Stories. Epics can be made up of many Stories which are broken down flows of Epics.

Once these Stories are complete, and ready to hand over to Dev, we sort them in to the 'Delivered' section on the Epic file. This is effectively frozen for Dev and cannot be touched. Revisions can only be made by duplicating the file and naming it as a new version.

Below, you can see that soemtunes not all stories are connected to Epics, and so we can organise them like this.

File naming

We use Figma as our primary design tool, but this naming format can work for any design tool. Correctly naming files is important for searching and also giving a useful description of what the file is about.

The format

For Initiative project file

INITIATIVE: APP-000: [Inititative name]

Example

INITIATIVE: APP-394: ESG - MVP1

For Epic file

EPIC: APP-000: [Epic name]

Example

EPIC: APP-394: ESG - Goals - List page

For Story file

STORY: APP-000: [Story name]

Example

STORY: APP-394: ESG - Delete goals on list page

Keep spaces between each word as this aids searching. Do not capitalise Epic titles.

Page structure

A blank Figma template has been setup to start using. Open the Figma template.

Every Figma will include one or more of these pages:

Delivered: For stories that are complete and handed over to Dev. These can only be refined by making a new version of the page.
WIP: These pages are for creating new stories, concepts, and flows.
Archive: This is included in Inititative files, and is for older ideas, and concepts that we want to keep but not use.
Assets: For the cover, design goals, components and artwork.

Cover

Each Figma file has a cover with status and title.

Prototypes

Clickable prototypes will exist in a separate file. This is to ensure that prototypes do not change or break especially if they are being shown to clients or being used for presentations.

Here we have ‘PROTOTYPE: APP-842’ as a separate file. This can be shared with restricted privileges.