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

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:

  1. Fetch Figma remote: REST API reference
  2. Locate the node ID by the specified name
  3. Request SVG export from Figma using the node ID: REST API reference
  4. Download the exported SVG file
  5. Simplify the SVG to retain only groups and paths (using usvg library)
  6. 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" }