Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Android – Import WEBP assets into drawable directories with dark theme support

This recipe shows how to configure FigX to export illustrations from Figma as WEBP images into Android drawable-* directories, including dark theme variants based on a naming convention.

Project structure

.
├── app/
│   ├── src/main/
│   │   ├── kotlin/
│   │   └── res/
│   │       └── drawable-*/
│   ├── .fig.toml
│   └── build.gradle
├── .figtree.toml
├── settings.gradle
└── build.gradle

Workspace config

# .figtree.toml
[remotes.illustrations]
file_key = "..."
container_node_ids = ["..."]

[illustrations]
extends = "android-webp"
remote = "illustrations"
# Export only the required density scales
scales = ["hdpi", "xhdpi", "xxhdpi", "xxxhdpi"]
# Dark theme support configuration
# Defines the naming pattern for dark theme variants
# {base} will be replaced with the base asset name
# Leave unset to disable dark theme support
# For example, if you have an asset named "ill-welcome" in Figma,
# figx will also look for "ill-welcome-dark" when night mode is enabled
night = "{base}-dark"
# Losless quality by default (recommended)
quality = 100

FigX automatically looks for Figma nodes like illustrations/start-dark when the night naming pattern is defined.

Each module in your workspace can define its own .fig.toml to select specific assets and optionally override settings from the workspace-level .figtree.toml profile.

Fig-file app/.fig.toml config

# .fig.toml
[illustrations]
# <name of resource in project> = <name of figma node>
ill_start = "illustrations/start"
# you can override any field of parent profile "illustrations"
ill_finish = { name = "illustrations/finish", quality = 75 }

You can override individual fields from the parent profile per asset using inline tables. In the example above, the export quality for ill_finish is lowered to 75.

Run

figx import //...

Note: The //... pattern recursively imports all modules with .fig.toml configs found in the workspace.

Result

.
├── app/
│   ├── src/main/
│   │   ├── kotlin/
│   │   └── res/
│   │       ├── drawable-hdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       ├── drawable-night-hdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       ├── drawable-xhdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       ├── drawable-night-xhdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       ├── drawable-xxhdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       ├── drawable-night-xxhdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       ├── drawable-xxxhdpi/
│   │       │   ├── ill_start.webp
│   │       │   └── ill_finish.webp
│   │       └── drawable-night-xxxhdpi/
│   │           ├── ill_start.webp
│   │           └── ill_finish.webp
│   ├── .fig.toml
│   └── build.gradle
├── .figtree.toml
├── settings.gradle
└── build.gradle