Compose profile
Purpose
The profile is designed for importing vector assets from Figma and converting them directly into Compose's ImageVector format.
The asset import process consists of the following stages:
- Fetch Figma remote: REST API reference
- Locate the node ID by the specified name
- Request SVG export from Figma using the node ID: REST API reference
- Download the exported SVG file
- Simplify the SVG to retain only groups and paths (using usvg library)
- Convert the simplified SVG to ImageVector format
Complete Configuration in .figtree.toml
[profiles.compose]
# ID from the [remotes] section.
# Uses the default remote if unspecified, but can reference any configured remote
remote = "some_remote_id"
# Path to Kotlin source directory
# Defaults to empty (files are placed in package root alongside .fig.toml)
src_dir = "src/res/main"
# Target Kotlin package for generated *.kt files
# When unspecified, FigX attempts to auto-detect the package
# Explicit empty string will omit package declaration
package = "com.example.mypackage"
# When true, all generated Kotlin fields will have explicit visibility modifiers
# Default: false
kotlin_explicit_api = false
# Marks the get() accessor of the property with the @Composable annotation.
composable_get = false
# Fully qualified class/object name to extend with generated ImageVector
# When specified:
# - Adds required import
# - Modifies declaration to: public val ${extension_target}.{icon_name}: ImageVector = ...
extension_target = "com.example.mypackage.AppIcons"
# Lint suppressions to add via @file:Suppress(...)
# Default: empty list
file_suppress_lint = ["LongMethod", "MagicNumbers"]
# Color transformations to apply during generation
# Default: no transformations
color_mappings = [
# Example: replace all colors with Color.Black
{ from = "*", to = "Color.Black" },
# Example: replace all red colors (#ff0000) with Color.Red
{ from = "ff0000", to = "Color.Red" },
# IMPORTANT:
# - 'from' must be a HEX color code WITHOUT alpha channel
# (alpha is lost during SVG simplification and handled via group opacity)
# - 'to' must contain exact code to be inserted
]
# Custom preview generation template
# Overrides default FigX preview implementation
preview.code = """
@Preview
@Composable
private fun Preview() {
Icon(imageVector = {name}, contentDescription = null)
}
"""
# Additional imports to include with preview
preview.imports = [
"androidx.compose.ui.tooling.preview.Preview",
"androidx.compose.runtime.Composable",
]
# Specifies which variants to use. Only the listed keys will be processed.
# Can be overridden in .fig.toml for each resource
variants.use = ["L", "M", "S"]
# Available variants
# output_name - filename for the exported file
# figma_name - node name in Figma to look for
variants.L = { output_name = "{base}L", figma_name = "{base}_24" }
variants.M = { output_name = "{base}M", figma_name = "{base}_20" }
variants.S = { output_name = "{base}S", figma_name = "{base}_16" }
variants.XS = { output_name = "{base}XS", figma_name = "{base}_12" }