Other Assets

Introduction

Any folder under an app is a type. fonts/, images/ and icons/ have rules of their own, and any other folder is copied to every platform as it is: every file, in its subfolders, with the name of the platform and no format filter.

The folder names on this page, videos/ and data/, are examples. An app may have a folder of any name for the files it needs: videos, audio, documents, data files.

Source layout

A folder of any name lives beside the three known types, in source/<brand>/<app>/. The default brand holds the files of every brand, and a brand holds only the files that differ.

source/
├── default/
│   └── <app>/
│       ├── fonts/
│       ├── images/
│       ├── icons/
│       ├── videos/                   -> any other folder
│       │   ├── onboarding-intro.mp4
│       │   └── tutorials/
│       │       └── step-1.webm
│       └── data/
│           └── country-list.json
└── <brand>/
    └── <app>/
        └── videos/
            └── onboarding-intro.mp4  -> replaces the default file of the same path

This repository has one such folder: other/ of the configured web app, with a Figma variables export.

Formats

The build copies a file of any format from such a folder to every platform of the app. The format rules of the known types do not apply: a WebP file in data/ reaches iOS, and a WOFF2 file reaches iOS and Android.

A file of a type that Git LFS tracks is stored as a Git LFS file wherever it is. A format that the repository does not track yet, such as MP4 or PDF, is committed as it is until .gitattributes names it:

git lfs track "*.mp4"

Naming

Name a file in lowercase with hyphens, after what it holds: onboarding-intro.mp4, country-list.json. The build renames it for each platform, kebab-case for the web and snake_case for iOS and Android, as it does for every type.

Adding files

Create the folder under the app, put the files in it, and run the build. No configuration names the folder.

mkdir -p source/default/docs/videos
cp onboarding-intro.mp4 source/default/docs/videos/
pnpm assets

A brand replaces a file by adding one with the same path to its own folder, source/<brand>/<app>/videos/onboarding-intro.mp4. Subfolders are kept on every platform.

Best practices

The build copies a folder of another name as it is, so the name of the folder and the names of its files are what an app reads.

• Name the folder after its content: videos/, audio/, documents/. The folder name is the folder name of the output, and an app reads its files from there.
• Track large formats with Git LFS: add the extension to .gitattributes before the first commit of such a file.

Avoid the habits that undo this:

• Do not use a folder of another name for fonts, images or icons: the format rules, the density folders and the ic_ prefix belong to fonts/, images/ and icons/ only.
• Do not put a dot inside a name: the build turns it into the separator of the platform, so default.tokens.json is default-tokens.json in the web output.

Platform output

The build copies each file to a folder of the same name in the job, in its subfolder, and renames it for the platform.

For the source layout above, a web job gets the files under the names of the source:

dist/web/<app>/<brand>/
├── data/
│   └── country-list.json
└── videos/
    ├── onboarding-intro.mp4
    └── tutorials/
        └── step-1.webm

An iOS or an Android job gets them in snake_case:

dist/ios/<app>/<brand>/
├── data/
│   └── country_list.json
└── videos/
    ├── onboarding_intro.mp4
    └── tutorials/
        └── step_1.webm

See the web, iOS, and Android docs for how an app uses these files.